本文來自:http://bbs.blueidea.com/thread-2922186-1-2.html貼後面的回覆.感覺很不錯.
轉帖在這裏,以爲自用,可同用之.
初學DIV+CSS應該理解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><span></span></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裸奔”的時候，纔會仍然讓人看得出哪裏是導航菜單，哪裏是文章標題，日曆表格也不會分崩離析。