Web標準網站建置的思考

我是從去年初開始學習web標準的，兩年下來也有些心得。最近跳槽了剛好閒在家裡，寫一些出來跟大家交流一下。

1.對於web標準與W3C XHTML規範的理解

依照習慣的理解，這兩個概念似乎都是指的一個東西（就是咱們在這個版裡討論的這些個"高深理論“^_^）。但我認為，事實上從技術的角度上講，這兩個事物幾乎沒有任何相關性。 web標準簡而言之就是將頁面的結構、表現和行為各自獨立實現，更通俗的講就是如今招募時流行的語言」div+css"。但W3C XHTML的任何一個版本都沒有對web標準理念作限制。很明顯的，我們可以用xhtml 1.1寫出一個table定位的網頁。說到這裡，或許會認為我講了一堆廢話。但任何一項技術，只有當你對基礎概念有足夠清晰的認識的時候，你才會正確的使用它。我從下面兩個方面，來談談如今Web標準應用走向的兩個歧途：

第一種情況很簡單。自以為只要使用了XHTML+CSS就是Web標準了。頁裡面遍地是class和id。肆意的為每個細節都單獨定義class。這樣的頁面和傳統的html的差別就是img標籤裡多了個"/"。事實上這樣子還不如回到傳統的html，至少我可以輕鬆的使用font，而不用總是跟查字典一樣去查樣式表。另一種更隱蔽的隨意使用CSS的我在以後講。

第二種情況我覺得比較難理解一些，也就是試圖用各種紛繁複雜的div嵌套和css語句來實現你所想要的表現。很簡單的一個例子就在我剛看到的一個帖子" 不用切圖的頁面圓角"。首先我想肯定的是這個創意確實很不錯，使用CSS功能將圓角「畫」出來。為此，設計者必須在對應的位置加上一大段如下的程式碼：

但是，這裡嚴重違反了Web標準的基本概念──結構與表現要分離。因為它將用於控制網頁表現的程式碼放在結構文件中了。或許你會說它事實上還是把真正的表現代碼放在CSS裡的。但我認為這是一個偷換概念。因為以上這些b標籤跟網頁結構無關，它們都是一些空標籤。也就是說，它的存在並不是為了將某些內容放在文件結構所需的位置。因此它們對於文檔結構來說只是一些廢代碼。

另外一個例子可能更加隱密。之前我有在alistapart.com上看到如何實現網頁三通欄的文章，其原理大概就是使用三四個div相互嵌套。我認為這也是違反Web標準思想的做法。因為這些div標籤在程式碼中擺放的次序已經不單純是為了結構的需要，而是用於網頁的表現。

當然，我承認，以上的觀點在某種程度上是鑽牛角尖（但反過來說，非要實現非圖片圓角不也是在鑽牛角尖麼，呵呵）。有些時候結構和表現並不是那麼輕易的就能分開的，我們為了實現一些豐富的表現不得不讓結構去遷就（想想<div style="clear:both" />的用處）。但是知道什麼是對什麼是錯是很重要的。即使我們有時候不得不做一些錯事。

最後，我想聲明的是，我並不是"非圖片圓角"是無意義或是錯誤的。我也很佩服作者的聰明和靈感。我覺得這樣的技術研究就如同以前用CSS畫國旗一樣，對CSS技術的熟練度很有幫助。但是，它的用途也應該只和CSS國旗一樣局限，不應該在實際應用中採納。因為它違反Web標準的基本原則。

2、HTML標籤的語意

如今Web標準都被通俗的叫做「div+css」或「層佈局」。我不反對這種便宜行事的叫法。但是這樣會陷入一個誤解：也就是大量的使用div標籤作為結構元素。事實上這是一種更進階的div濫用(Jeffrey Zeldman在《網站重構》一書中提到）。

HTML為我們提供了相當豐富的標籤，每個標籤都有它各自的意義。我認為在設計時，除了遵循HTML語法以外，應該充分利用並遵守各標籤的「語意」。如標題文字應該包含在h1-h6中，大段的文字內容應該由<p>進行分段而不是<br />，列表項目應該放在ul或ol或dl中，表格形式的數據應該仍然用table佈局。

為什麼要這樣做？一個很有說服力的原因是，保證在使用者去掉CSS顯示的情況下，網頁能夠盡量有效的將內容的結構層次顯示出來。如果全部都用div，當去掉CSS之後，整個網頁就失去了層次，只剩下一些雜亂的文字碎片。這並不符合Web標準對低配置相容性的要求。

我下面詳細的列舉一下我對一些標籤的語意的理解：

p br

先說個最簡單的。分段要用p標籤而不是用br（甚至連續兩個<br />）。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發帖，如果我想分段，就打回車。而如此傳輸到後台並顯示出來的，顯然就是用<br />分段的。

table th

由於大力宣揚div+css的結果，似乎現在誰用table佈局誰就是未開化的土著。但我認為這種觀點是不正確的。 table的意思是表格，因此凡是應該以表格形式出現的數據，仍然應該用table佈局。簡單的例子是班級同學的花名冊，包括姓名學號性別等等，這明顯是一個表格形式的數據，因此應該用table佈局。另一個比較值得探討的例子是，blog裡面的日曆導航。我曾經有看過一個blog程序，它的日曆導航裡的各個日期，從1號到30號全用div套好，再使用float:left樣式7個一排的排出當月的日曆。當我取消瀏覽器的CSS顯示之後，日曆的部分則從1號到30號一垂直排下來。我認為這是不對的。因為日曆應該是一個表格形式的數據，因此仍然應該用table來佈局。當取消css之後，應該還是會按照一排7個的樣子歸成一個表格。

th則是另一個會被忽略的標籤。由於CSS的萬能，所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講，一些表格單元應該用th標籤。例如上文說到的日曆表格，裡面的「MON TUE WED... SUN」這些識別星期的單元，就應該用th而不是td。

h1-h6

對於h1-h6標籤，從語義上講，它們應該適用於所有標題文字。因此，一些如<div class="diary-title>的寫法都是多餘的，直接寫成<h1>，然後直接對h1而不是.diary-title定義CSS，不是一樣的效果麼？當然，這個規矩我也不能定得太死，因為有時候標題部分的結構元素並不能簡單的用一個h1就能解決的。的結構嵌套得更複雜，以滿足表現的需要。

但這裡會出現一個語意上的分歧。 h1究竟該理解為一級標題呢還是理解為1號字體大小的標題。我通常理解為一級標題，一級標題下方再有小標題就用h2。但事實上回顧HTML設計之初，h1-h6後面的數字更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字體，但並非它就是三級標題。否則一級標題全用h1，個個都是鬥大的字，又得用CSS來控製字號，覺得很累贅。所以，這是一個待商榷的問題。

ul ol

凡是需要羅列條款的，都應該用ul或ol，而不是用p。例如招募廣告裡的職位需求，例如注意事項，例如操作步驟說明。另外一個流行的用法是網頁的導航選單也用ul li來列舉，然後再用CSS控制其排列方式。

應該要補充的是，別忘了li裡面還可以再用ul或ol，形成第二級列表。

dl dt dd

這是一組幾乎被人忘記的標籤，但Jeffrey Zeldman在《網站重構》中大力推崇它們的使用。 dl應該是「defining list（或是definition list？有知道的朋友請告訴我）」的全名，一個典型的用法是字典的詞條。單字的名字放在dt裡面，單字的解釋放在dd裡面。而alistapart.com網站更加高明的，將右側欄整個定義為dl，每個單元的標題用dt，而該單元的內容則用dd。

img

img標籤本身也沒啥好說的。只是想老生常談一個，即只有當確實這個元素是內容裡必須的圖片的時候才使用img，否則應該用CSS定義為樣式。如插圖，頭像，表情圖標，這些是內容中必須出現的圖片，用img。而其他的例如標題的背景圖，列表項目前面的小icon，這些都不應該用img標籤。

span

span如今大有和div並駕齊驅的風頭。但事實上我認為我們還是應該遵從它最初的使用。我個人的理解，span最初就是用來帶class或是style屬性的。它本身不具有明確的語意。因此在文字流中，我們需要對某些文字做樣式上的改變，就用span括起來。例如有些字要加紅，我就用<span class="red">。

但值得注意的是，這樣又有可能犯下先前h1裡面提到的問題。因為有些文字的樣式其實是有現成的標籤的，像是<strong>、<sub>等，我們也應該適當的給它們一些機會。

a

a是控制超連接的標籤。但有些特殊的情況，我們不一定喜歡用它。例如需要彈出一個小視窗。我沒怎麼留心，但我想有些設計師會將onclick直接定義到「播放」小圖示的<img>標籤裡。我個人認為還是應該在img外面加一個a，然後將onclick定義到a裡面，並記住在js函數最後寫上return false。如果可以，該a標籤的href屬性也應該寫上彈出視窗的URL,保證使用者在禁止JS的情況下仍能夠有效的開啟頁面。

我暫時列出這麼多。

最後再總結遵循HTML標籤語意的重要性。 Web標準的其中一個要求是低配置的兼容性：當使用者停用圖片、停用CSS或停用JS的時候，我們仍能夠讓他有效的瀏覽網頁內容。眾所周知強制alt屬性就是為停用圖片時的相容性作考慮。而正確的遵循HTML標籤的語義，則是保證禁用CSS時的兼容性。只有當正確使用了HTML標籤，我們的網頁在「CSS裸奔」的時候，才會仍然讓人看得出哪裡是導航選單，哪裡是文章標題，日曆表格也不會分崩離析。