什麼是語義化的HTML?有何意義？爲何要作到語義化？

1、什麼是語義化的HTML？

語義化的HTML就是正確的標籤作正確的事情，可以便於開發者閱讀和寫出更優雅的代碼的同時讓網絡爬蟲很好地解析。

2、爲何要作到語義化？

一、有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。

二、在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。

三、便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。

四、支持多終端設備的瀏覽器渲染。

3、語義化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