一、什麼是語義化的HTML？
語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）,也就是說用正確的標籤做正確的事情，能夠便於開發者閱讀和寫出更優雅的代碼的同時讓網絡爬蟲很好地解析。
二、爲什麼要做到語義化？
1、有利於SEO，有利於搜索引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
2、在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。
3、便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。
4、支持多終端設備的瀏覽器渲染。
三、語義化HTML該怎麼做呢？
在做前端開發的時候要記住：HTML 告訴我們一塊內容是什麼（或其意義），而不是它長的什麼樣子，它的樣子應該由CSS來決定。（結構與樣式分離！）
寫語義化的 HTML 結構其實很簡單，首先掌握 HTML 中各個標籤的語義，在看到內容的時候想想用什麼標籤能更好的描述它，是什麼就用什麼標籤。
<h1>~<h6> ，作爲標題使用，並且依據重要性遞減，<h1> 是最高的等級。
<p>段落標記，知道了 <p> 作爲段落，你就不會再使用 <br /> 來換行了，而且不需要 <br /> 來區分段落與段落。<p> 中的文字會自動換行，而且換行的效果優於 <br />。段落與段落之間的空隙也可以利用 CSS 來控制，很容易而且清晰的區分出段落與段落。
<ul>、<ol>、<li>，<ul> 無序列表，這個被大家廣泛的使用，<ol> 有序列表也挺常用。在 web 標準化過程中，<ul> 還被更多的用於導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支持 CSS 的時候，導航鏈接仍然很好使，只是美觀方面差了一點而已。
<dl>、<dt>、<dd>，<dl> 就是“定義列表”。比如說詞典裏面的詞的解釋、定義就可以用這種列表。
<em>、<strong>，<em> 是用作強調，<strong> 是用作重點強調。
<q>也不僅僅只是爲文字增加雙引號，而是代表這些文字是引用來的。
<table>、<td>、<th>、<caption>， (X)HTML中的表格不再是用來佈局。
補充：網絡爬蟲，SEO等概念
SEO：Search Engine Optimization——搜索引擎優化，這是一種利用搜索引擎的搜索規則，採取優化策略或程序，提高網站在搜索結果中的排名。
網絡爬蟲：又稱網絡蜘蛛、網絡機器人，是一種搜索引擎用於自動抓取網頁資源的程序或者說叫機器人。從某一個網址爲起點，去訪問，然後把網頁存回到數據庫中，如此不斷循環，一般認爲搜索引擎爬蟲都是靠鏈接爬行的，所以管他叫爬蟲。這個只有開發搜索引擎纔會用到。對於網站而言，只要有鏈接指向我們的網頁，爬蟲就會自動提取我們的網頁。