HTML語義化標籤探析

什麼是HTML語義化

HTML語義化就是根據具體內容，選擇合適的標籤進行代碼的編寫。便於開發者閱讀和寫出更優雅的代碼，同時讓搜索引擎的爬蟲能更好的識別。

爲何要語義化

1. 有利於SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的，所以語義化標籤能使爬蟲抓取更多的有效信息。

2. CSS文件讀取失敗的準備：萬一CSS文件掛了，語義化的HTML也能呈現較好的內容結構與代碼結構。

3. 方便其它設備的解析(如屏幕閱讀器、盲人閱讀器、移動設備)。

4. 便於團隊開發和維護。

具體的語義化標籤探析

本文主要是爲了探析部分HTML標籤在語義化中的差異。同時也探索HTML5新加入的語義化標籤。

1. ul/ol(列表標籤)

ul和ol雖然都是列表項，可是具體使用時，差異仍是很大的。

A. ul(無序列表)

說明: ul的英文全稱爲unordered list，翻譯成中文就是無序列表。表示列表中的項目。是沒有前後順序的。網頁中大部分列表均爲無序列表。

<ul>
  <li>Lxxyx的博客</li>
  <li>Lxxyx的評論</li>
  <li>聯繫Lxxyx</li>
</ul>
<!-- 列表中的三個項目，均沒有先後順序的分別。 -->

B. ol(有序列表)

說明: ol的英文全稱爲ordered list，表示列表中的項目。是有前後順序的。這一點是ol和ul的本質區別。

<ol>
  <li>1. Lxxyx的第一篇文章</li>
  <li>2. Lxxyx的第二篇文章</li>
  <li>3. Lxxyx的第三篇文章</li>
</ol>
<!-- 列表中的三個項目，有先後順序的分別。 -->

2. dl,dt,dd(定義列表)

說明: dl,dt,dd是自定義列表，可是使用上又與前面的ul/ol有所不一樣。自定義列表不單單是一列項目，而是項目及其註釋的組合。

1. dl: 英文意思爲definition list，做用是定義列表。

2. dt: 英文意思爲defines terms，做用是定義列表中的項目。

3. dd: 英文意思爲defines description，做用是定義列表中項目的註釋。

舉例:

<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器 ... ...</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

效果圖:

C. b/strong , i/em(強調標籤)

說明: 在HTML中，b和strong都是加粗，i和em都是斜體。可是從HTML4到HTML5中，又發生了轉變。因此有必要寫下來。

1. b/strong(加粗)

說明:雖然b和strong的展現效果同樣，都是將字體加粗表示。可是b在HTML5中又發生了變化。

1. b標籤(bold):

HTML4的定義:

The <b> tag is for "offset text conventionally styled in bold,without conveying any extra emphasis or importance.
// 意思爲b標籤僅僅表示加粗，不帶有任何強調的意味。(只是爲了排版或者好看)
<hr/>

HTML5的定義:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood.
// 意思爲表示「文體突出」文字，通俗講就是突出不安分的文字。像概要中的關鍵字，產品名。或者表明強調的排版方式

2.strong標籤(全稱是stronger emphasis):

<strong> represents a span of text with strong importance.a <strong> tag within another <strong> tag has even more importance.

// 意思爲strong 標籤是語氣加劇，更爲重要的強調，若是兩個strong標籤嵌套還表示極度重要。strong的重要程度是要大於em標籤的

總結：b僅僅只是加粗，並無任何語義。可是strong標籤則有語氣加劇的強調的意思。

2. i/em(斜體)

說明:就像b和strong的關係同樣。i和em的對應關係也很容易理解。

1. i標籤(全稱是italic):

HTML4的定義:

The <i> tag is for "text conventionally styled in italic". There is no semantic meaning.
// HTML4意思爲i標籤僅僅只是將字體顯示爲斜體，無任何語義化意思
<hr/>

HTML5的定義:

The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose.
// 意思爲i元素如今表現爲在文章中突出不一樣意見或語氣或的一段文本,例如外語，科技術語、或者是排版用的斜體文字

1. em(全稱是emphasis):

The <em> represents a span of text with emphatic stress.

// 意思是說em有強調的意思

總結:i僅僅只是斜體顯示，並無任何語義。可是em標籤則有增強的語義在內。

3.em/strong(強調標籤)

說明:在上面的介紹中，已經介紹了em和strong，箇中差異，看英文既能分辨。
em的全稱是:emphasis,意思爲強調。
strong的全稱是:stronger emphasis，意思就是語氣更強的強調。
總結:em和strong標籤均帶有強調的語義，可是strong標籤所表現的強調語氣要大於em的。

總結與參考連接

這一部分，查閱的文檔和資料太多了，看完了html4發現html5又更改了意思，只能跑去w3c去看規範。
總結:i和b在Html5中被賦予語義，不一樣於html4。em和strong的差異在於強調的程度。

參考連接：

Using <b> and <i> elements
HTML5: The Semantic Difference Between Bold and Strong

總結

暫時總結的就這麼多了,重點在於b/strong , i/em幾個標籤的區別。也是目前前端學習中的盲點。
前兩天看到一句話：

"不少人很是努力的學習JavaScript，認爲學好了JavaScript就是一切。可是忽略了JavaScript實際上是一門'膠水語言'的本質，它是用來粘合HTML和CSS的。"

看到這句話後，決定在寒假認真學習HTML與CSS。這些東西，雖然說簡單，但寫好也很難。好比說最近學習的Sass，PS切圖等。不管哪一個，都屬於技術盲點。

由於經驗尚淺，因此若是有出錯的地方，但願各位能幫忙指正。
最後附上本人博客地址和原文連接，但願能與各位多多交流。

Lxxyx的前端樂園
原文連接：寒假前端學習(2)——HTML語義化標籤探析