主要總結標簽語義化方面的內容。
HTML的標簽都是有語義的。
下面列出一些常見的標簽及其語義：
完整標簽列表及更多HTML5標簽請參考：
http://www.w3school.com.cn/tags/index.asp
這里提一下，我們常用的列表相關的標簽有ol, ul, dl. 那么什么時候用dl， 什么時候用ol ul 呢？
-- 對于重復的條目，如果打亂順序，不影響語義就是無序列表（ul）；否則就是有序列表(ol).
-- 如果內部帶一個term, description的用dl.
比如圖片帶個文字說明，圖片帶個問題說明....如此重復的采用dl比較好。
為什么要使用語義化標簽？
由于css 很強大，無論有沒有按照語義選擇標簽，都可以實現(xiàn)需要的設計。但這也是把雙刃劍。事實上，css布局只是web標準的一部分。在html, css, js 三個元素中，hmtl才是最重要的，結構是重點，樣式是用來修飾結構的。
so, 正確的做法是：先確定html, 確定語義的標簽，再選用合適的css。
此外，搜索引擎是看不到視覺結果的，它看到的只是代碼。它只能通過標簽來判斷內容的語義。
如何確定你的標簽是否語義良好?
-- 去掉樣式，看網頁結構是否組織良好有序，是否仍然有良好的可讀性。
有個工具很好用，web-developer。瀏覽器可以安裝此插件，開啟后，disable all styles 禁用css，可以幫助我們查看頁面結構。
常見標簽應用場景
一、標題和內容
有很多靜態(tài)頁面結構是標題+內容的布局，例如：
在這里使用div + h2 + p 標簽的方式要優(yōu)于全部使用div標簽的方式。要記住，div span標簽是用來輔助實現(xiàn)設計需求的。在寫頁面的時候，首先選擇語義化的標簽，然后配合css設計樣式來達到實現(xiàn)設計需求的目的。
二、表單
很多場景涉及表單填寫：
這里：使用label + input標簽的方式要優(yōu)于 div + input的方式。
同時，表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途。（fieldset默認有邊框，legend也有默認樣式，我們可以設置fieldset border 為none , legend display 為none 來兼顧語義化和設計兩方面的需求）
此外，label 標簽的for屬性應該與input 標簽的id關聯(lián)起來。
三、表格
css布局日益流行，很多人患上了“table恐懼癥”，其實table也有自己的語義和用途，它在二維數(shù)據(jù)展現(xiàn)上是比較好的。
使用table時注意：表格標題要用caption; 表頭要用thead, 主體用tbody， 尾部用tfoot. 表頭和一般單元格要分開，分別用th, td.
四、語義化標簽時應注意的一些其他問題
- 盡可能少地使用無語義標簽div 和span；
- 語義不明顯的既可以用p也可以用div的地方，盡量用p；
- 不要使用純樣式標簽，如font, b， u等，改用css設置。語義上需要強調的文本可以使用em strong標簽等。
- 加強“不可見”內容的可訪問性
背景圖上的文字應該同時寫在html中，并使用css使其不可見，有利于搜索引擎抓取你的內容，也可以在css失效的情況下看到內容。
Reference
[1].編寫高質量代碼-Web前端開發(fā)修煉之道 -- 曹劉陽.
