很多同學一提到語義化就覺得這只是一種規範，既然是規範，遵不遵循也沒有多大影響，這種想法是錯誤的，如果你仍然是那種div標籤跑遍整個頁面的，請務必看看接下來我們要將的關於HTML語義化的知識

定義

使用正確的標籤做正確的事情，即使是原始碼也是有意義的，也是可讀的，理解起來很簡單，人眼能看到的某個標籤長什麼樣，做什麼用，但是閱讀裝置智慧閱讀原始碼結構，所以必須要讓這個結構是有意義的組織。

目的和效果

1. 方便其他裝置如螢幕閱讀器、盲人閱讀器、移動裝置解析
2. 提升使用者體驗
3. SEO優化
4. 便於團隊開發和維護

怎麼做

1. 儘可能少的使用無語義的標籤，比如<div>和<span>
2. 不要使用純樣式用途的標籤，<b> <font>而是該用css來實現，原則就是HTML負責內容和結構，而樣式則交由CSS全權負責
3. 每個input都應該配備一個label標籤說明其用途，並使用for屬性關聯
4. 請勿使用非表單元素來實現表單功能，比如用div來實現按鈕，雖然樣式上可以看上去一致，但是你會失去表單元素原生的一些功能，比如鍵盤的可訪問性，無法通過tab鍵獲取焦點
5. 確保按鈕和連結文字標籤是可以理解的，不要使用 點選這裡 類似的文字，因為螢幕閱讀器使用者有時會列出按鈕和表格控制元件列表
6. 使用表格時，標題要用caption，表頭用thead，主體部分用tbody,尾部用tfoot，表頭和一般單元格要區分開，表頭用th,單元格用td
7. 圖片img標籤始終新增alt屬性，其內容提供影象的直接表示以及他在視覺上傳達的內容，任何個人說明或額外描述都不應該包含在這裡，而應該放到title屬性中
8. img標籤中的圖片應該是內容，具有意義，如果純粹是為了視覺裝飾，則應該作為css背景影象，
9. 使用HTML5的新標籤   

• <header> 代表整個網頁和section的頁首
• <footer>代表整個網頁和section的頁尾
• <hgroup>組合標題
• <nav>頁面導航連結
• <aside>附屬資訊
• <article>文件內容
• <mark>突出顯示文字