理解HTML5語義化

最近學習HTML，發現HTML5新增了一些元素。在HTML5以前，要表達一個文件結構，可能只通過<div…/>元素來實現，通過給div設定id或class來代表不同的含義。而為了使頁面佈局更加明確，HTML5便提供了很多語義更加明確的結構元素。HTML5還提供了很多其他語義元素。在此，有必要梳理一下對HTML5語義化的理解。

先來理解一下語義化的概念：
語義化就是讓文字內容來結構化，選擇與語義相符合的標籤，使程式碼語義化，不僅便於開發者閱讀，也能維護和寫出更優雅的程式碼，還能夠讓搜尋引擎和瀏覽器等工具更好的解析。

語義化用途：
1.儘可能少的使用div和span這些無語義的標籤；
2.不要為了實現樣式而使用純樣式的標籤，比如b、i、font等，改用css樣式來設定；
3.需要強調的文字，可以用strong和em標籤來表示，strong是加粗，em是斜體；
4.使用表格時，標題、表頭、主體部分和尾部都要用對應的標籤；
5.在即可以使用div，又可以使用p使，儘量使用p標籤；
6.表單域要用fieldset包起來，使用legend標籤說明表單的用途；
7.input標籤的說明文字需要用label標籤，指定label標籤的for屬性使其與input關聯；

HTML5也保留了一些與語義相關的元素
如：addr、address、blockquote、code等。

HTML5新增的結構標籤
article/section/header/footer/nav/aside/main/figure/figcaption
article:一篇獨立的文件內容，內部可以巢狀header/footer/section/article
section:對頁面內容進行分塊，內部可以包含一個標題，巢狀section/article
header:包含複雜內容的標題時，使用header來組織
nav:定義頁面上的導航條，配合ul、li和a標籤使用
aside:頁面或者文章的附屬資訊，通常使用css渲染成側邊欄
main:一個頁面最多包含一個main標籤，包含導航條、LOGO、版權資訊等之外的主體內容
figure:用於表示獨立的"圖片區域"
figcaption:放在figure內容，定義圖片區域的標題

HTML5新增的語義標籤
mark/time/details/summary/wbr/bdi
wbr:指定文字在何處適合新增換行
bdi:將一段文字從上下文中隔離出來

更多內容可以參考這篇文章，寫的很好：https://zhuanlan.zhihu.com/p/32570423