標籤語義化

主要總結標籤語義化方面的內容。

下面列出一些常見的標籤及其語義：

完整標籤列表及更多html5標籤請參考：

這裡提一下，我們常用的列表相關的標籤有ol, ul, dl. 那麼什麼時候用dl，什麼時候用ol ul 呢？

-- 對於重複的條目，如果打亂順序，不影響語義就是無序列表（ul）；否則就是有序列表(ol).

-- 如果內部帶乙個term, description的用dl.

比如帶個文字說明，帶個問題說明....如此重複的採用dl比較好。

由於css 很強大，無論有沒有按照語義選擇標籤，都可以實現需要的設計。但這也是把雙刃劍。事實上，css布局只是web標準的一部分。在html, css, js 三個元素中，hmtl才是最重要的，結構是重點，樣式是用來修飾結構的。

so,正確的做法是：先確定html, 確定語義的標籤，再選用合適的css。

此外，搜尋引擎是看不到視覺結果的，它看到的只是**。它只能通過標籤來判斷內容的語義。

-- 去掉樣式，看網頁結構是否組織良好有序，是否仍然有良好的可讀性。

有個工具很好用，web-developer。瀏覽器可以安裝此外掛程式，開啟後，disable all styles 禁用css，可以幫助我們檢視頁面結構。

有很多靜態頁面結構是標題+內容的布局，例如：

在這裡使用div + h2 + p 標籤的方式要優於全部使用div標籤的方式。要記住，div span標籤是用來輔助實現設計需求的。在寫頁面的時候，首先選擇語義化的標籤，然後配合css設計樣式來達到實現設計需求的目的。

很多場景涉及表單填寫：

這裡：使用label + input標籤的方式要優於 div + input的方式。

同時，表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途。（fieldset預設有邊框，legend也有預設樣式，我們可以設定fieldset border 為none , legend display 為none 來兼顧語義化和設計兩方面的需求）

此外，label 標籤的for屬性應該與input 標籤的id關聯起來。

css布局日益流行，很多人患上了「table恐懼症」，其實table也有自己的語義和用途，它在二維資料展現上是比較好的。

使用table時注意：**標題要用caption; 表頭要用thead, 主體用tbody，尾部用tfoot. 表頭和一般單元格要分開，分別用th, td.

[1].編寫高質量**-web前端開發修煉之道 -- 曹劉陽.