什麼是HTML語義化
說HTML語義化就要先說說HTML到底負責的什麼？下面摘自維基百科：
超文字標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。 HTML元素是構建網站的基石。HTML允許嵌入影象與物件，並且可以用於建立互動式表單，它被用來結構化資訊——例如標題、段落和列表等等，也可用來在一定程度上描述文件的外觀和語義。 關於對於語義化的理解顧軼靈：如何理解 Web 語義化？這裡講的很清楚了我就簡單說一下我的理解： 通俗的來講就是從程式碼上來展示頁面的結構，而不是從最終視覺上來展示結構。單純的HTML程式碼是不帶任何樣式的只是用來標記這一段是標題、這一塊是程式碼、那一個是要強調的內容等等，但是為什麼我們只寫HTML在瀏覽器中不同的標籤也是有不同的樣式呢？那是因為各個瀏覽器都自帶的有相應標籤的預設樣式，為了方便在沒有設定樣式的情況下友好的展示頁面。 良好的語義化程式碼可以直接從程式碼上就能看出來那一塊到底是要表達什麼內容。
為什麼要使用HTML語義化標籤
為什麼要使用語義化標籤？我用DIV+CSS也能做出來一樣的效果，確實單純看效果兩者並沒有什麼區別，但是頁面不止是給人看的，機器也要看爬蟲也要看。 網頁結構更清晰方便開發維護：
另外，在網路或其他原因頁面樣式檔案丟失的時候，滿是div組成的頁面和良好語義結構組成的頁面那個對使用者更友好？
優點
- 標籤語義化有助於構架良好的HTML結構，有利於搜尋引擎的建立索引、抓取。簡單來說，試想在H1標籤中匹配到的關鍵詞和在div中匹配到的關鍵詞搜尋引擎會吧那個結果放在前面。
- 有利於不同裝置的解析（螢幕閱讀器，盲人閱讀器等）滿是div的頁面這些裝置如何區分那些是主要內容優先閱讀？
- 有利於構建清晰的機構，有利於團隊的開發、維護。
大廠都是怎麼做的？
看一下大廠的操作，開啟淘寶的頁面檢視它首頁的原始碼發現，全域性只有一個h1標籤就是他的LOGO。
再往下看主題分欄的標題是h2
<em></em>專門強調處理。
儘管這些東西都是用div+css就能搞出來的，但是它還是專門使用了相應的語義化標籤來強調作用。
寫語義化程式碼應該注意什麼
- 儘可能少的使用無語義的標籤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關聯起來。
常用的一些語義化標籤
<h1>~<h6>，作為標題使用，並且依據重要性遞減，<h1>是最高的等級。<p>段落標記，知道了<p>作為段落，你就不會再使用<br />來換行了，而且不需要<br />來區分段落與段落。<p>中的文字會自動換行，而且換行的效果優於<br />。段落與段落之間的空隙也可以利用 CSS 來控制，很容易而且清晰的區分出段落與段落。<ul>、<ol>、<li>，<ul>無序列表，這個被大家廣泛的使用，<ol>有序列表不常用。在 Web 標準化過程中，<ul>還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支援 CSS 的時候，導航連結仍然很好使，只是美觀方面差了一點而已。<dl>、<dt>、<dd>，<dl>就是“定義列表”。比如說詞典裡面的詞的解釋、定義就可以用這種列表。dl不單獨使用，它通常與dt和dd一起使用。dl開啟一個定義列表，dt表示要定義的專案名稱，dd表示對dt的專案的描述。<em>、<strong>，<em>是用作強調，<strong>是用作重點強調。<table>、<thead>、<tbody>、<td>、<th>、<caption>， 就是用來做表格不要用來佈局
HTML5新增的那些
HTML5標準更加的講究語義化了，借用一張網上的圖來說明這些新標籤
header元素：header 元素代表“網頁”或“section”的頁首。footer元素：footer元素代表“網頁”或“section”的頁尾，通常含有該節的一些基本資訊，譬如：作者，相關文件連結，版權資料。hgroup元素：nav元素：nav元素代表頁面的導航連結區域。用於定義頁面的主要導航部分。aside元素：aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。（特殊的section）section元素：section元素代表文件中的“節”或“段”，“段”可以是指一篇文章裡按照主題的分段；“節”可以是指一個頁面裡的分組。section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。article元素：article元素最容易跟section和div容易混淆，其實article代表一個在文件，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。
推薦看原博主的部落格：傳送門