理解HTML語義化

參考文章

一、什麼是HTML語義化？

根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

二、爲何要語義化？

• 爲了在沒有CSS的狀況下，頁面也能呈現出很好地內容結構、代碼結構:爲了裸奔時好看；
• 用戶體驗：例如title、alt用於解釋名詞或解釋圖片信息、label標籤的活用；
• 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
• 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
• 便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

三、寫HTML代碼時應注意什麼？

• 儘量少的使用無語義的標籤div和span；
• 在語義不明顯時，既可使用div或者p時，儘可能用p,由於p在默認狀況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標籤，如：b、font、u等，改用css設置。
• 須要強調的文本，能夠包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和通常單元格要區分開，表頭用th，單元格用td；
• 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
• 每一個input標籤對應的說明文本都須要使用label標籤，而且經過爲input設置id屬性，在lable標籤中設置for=someld來讓說明文本和相對應的input關聯起來。

四、HTML5新增了哪些語義標籤

audio, video,header頁面頭部、section章節、aside邊欄、article文檔內容、footer頁面底部、section章節、aside邊欄、article文檔內容、footer頁面底部等

---

之前的後臺開發人員使用table佈局，而後美工人員使用div+css佈局，最後專業的前端會使用正確的標籤進行頁面開發。 HTML 語義化就是使用正確的標籤，段落就寫 p 標籤，標題就寫 h1 標籤，文章就寫article標籤，視頻就寫video標籤，等等。