什麼是語義化的HTML?有何意義？為什麼要做到語義化？

標籤：利用   前端開發   重要   排名   span   瀏覽器   完全   簡單   權重   

一、什麼是語義化的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

什麼是語義化的HTML?有何意義？為什麼要做到語義化？