什么是語義化的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——搜索引擎優化，這是一種利用搜索引擎的搜索規則，采取優化策略或程序，提高網站在搜索結果中的排名。

網絡爬蟲：又稱網絡蜘蛛、網絡機器人，是一種搜索引擎用於自動抓取網頁資源的程序或者說叫機器人。從某一個網址為起點，去訪問，然后把網頁存回到數據庫中，如此不斷循環，一般認為搜索引擎爬蟲都是靠鏈接爬行的，所以管他叫爬蟲。這個只有開發搜索引擎才會用到。對於網站而言，只要有鏈接指向我們的網頁，爬蟲就會自動提取我們的網頁。

來源：http://www.w3cfuns.com/notes/32557/6b91faf9614287c822fb49c6d8af02e2.html