HTML 標籤語義

什麼是HTML

HTML全稱是HyperText Markup Language，翻譯過來就是超文本標記語言。它定義了網頁的內容和結構。

爲何要使用語義化標籤

• 可讀性、可維護性

html有不少標籤，每一個標籤都有它的語義，好比 h1～h6 表示不一樣重要程度的標題。雖然平時不少同窗用無語義的標籤 div 、span 等也能實現相同的效果，可是可讀性就差了不少。也許有同窗以爲可讀性沒有變差啊，那是由於咱們當中不少人平時就沒有使用語義標籤的習慣，全都是 div。

因爲 html 是標記語言，是聲明式寫法，不具備可編程性，邏輯表達能力不強。html 標籤就像其餘可編程語言例如：Java 、C 、Javascript 等的變量，若是一位程序員隨意給變量命名，代碼的可讀性會很是差，後期維護成本也會很是高。

• SEO

因爲絕大多數網站的域名難以記住，不少人上網都是經過門戶網站上網。可是，搜索引擎出來之後，使用搜索引擎上網愈來愈成爲一種趨勢。搜索引擎能夠根據你輸入的關鍵字，直接搜出相關網站和內容，免去人工一個一個去查找。

但是搜索引擎是如何知道網站是咱們要找的內容呢，搜索引擎派出爬蟲會時時刻刻的去訪問網絡上的各類網站，當它獲取到一個個網站的 html 文檔，會根據文檔頭部內容裏面的 meta 數據判斷出網站類型以及內容，並保存到數據庫。（惡意誘導爬蟲另當別論）

seo 重要嗎？固然很是的重要。seo 能給網站帶來流量，流量就像網站的血液通常，沒有訪問量，網站就等於不存在。seo 如今已經成爲了互聯網的一個垂直行業。作得好的，年入百萬不是夢。可是，seo運營並僅僅包含這些。

• 可訪問性

一個好的網站應該儘量讓更多的人無障礙瀏覽。例如盲人藉助屏幕閱讀器，也能夠上網購物。若是網站的購物車按鈕是用 div 寫的，那麼屏幕閱讀器識別起來會很是的困難。咱們爲何要讓盲人也能夠上網呢，這是一個很是有意思的問題。由於咱們天天要花許多的時間用手機或其餘設備瀏覽網頁，萬一之後眼瞎了，咱們之後還能夠衝浪啊。（不只如此，這個世界上還有盲人遊戲、盲人程序員）

常見HTML標籤語義

關於 html 標籤語義的討論和文章，已經數不勝數，也有不少網站開發人員想不遺餘力去遵照，但是一旦到了開發的時候，就想不起該用什麼標籤了。因而，就開始撓頭皮，時間久了，就禿了。

下面列舉一些標籤的用法：

article: 翻譯過來就是文章的意思，其內容應當是一篇獨立完整的文章。能夠是雜誌、報紙、技術或學術文章、論文或報告、博客或其餘社交媒體文章。article 能夠嵌套，可是其內容必須是相關的。每一個 article 都應該有一個標題（h1～h6）。

section: 段落。好比一篇文章（article）的片斷。每一個段落應該有一個標題（h1～h6），當section 做爲 arcticle 的子元素時，標題字號不要大於文章的標題（不然看起來很怪異）。也不建議對 section 使用樣式或者做爲腳本切入點（大體意思，就是不要用js操做它），應該使用 div 來替代它幹這些事。它和 p 標籤有區別。咱們平時寫文章換行、起頭空兩個字，這個表示一個段落，能夠用p 表示。而 section 能夠是一個或多個 p 段落。這幾個段落表達的意思相近或者構成一個完整的意思。相似於中小學語文課，老師讓學生分段同樣。

nav: 導航塊。好比包含跳轉到其餘頁面或者本頁面的連接。nav 的內容能夠是列表也能夠不是。例如：

<nav>
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</nav>

<nav>
    <h1></h1>
    <p>
        <a href="#">...</a>
    </p>
</nav>

不過，在網站的底部通常都有不少連接，例如地址、聯繫方式等。這個時候通常不必用 nav。

aside: 與當前位置段落相關的獨立內容。例如相關文字、段落、廣告、導航

h1 ～ h6: 重要程度不一的標題。

header、footer: body、article、 aside、 nav、 section均可以有一個頭部或者腳部。header 一般用來包裹頂部的搜索框、目錄、logo等，也能夠包裹標題 h1 ～ h6，但不是必須的。

figure、figure-caption: 兩個結合使用，可用於註釋插圖、圖表、照片、代碼列表等。例如：

<figure id="l4">
  <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
  <pre><code>interface PrimaryCore {
  boolean verifyDataLine();
  void sendData(in sequence&lt;byte> data);
  void initSelfDestruct();
}</code></pre>
</figure>

div: 沒有任何語義。能夠用來包裹一系列相關的子節點，以及將相關內容定位佈局。

ol、ul、dl: 前面兩個使用更爲日常，分別是有序列表和無序列表。dl 有點像二維的無序列表。例如：

<dl>
  <dt>得分A</dt>
  <dd>趙xx</dd>
  <dd>錢xx</dd>
  <dd>孫xx</dd>
  <dd>李xx</dd>
  <dt>得分B</dt>
  <dd>周xx</dd>
  <dd>吳xx</dd>
  <dd>鄭xx</dd>
  <dd>王xx</dd>
</dl>

blockquote、q: 都是引用的意思。一篇文章裏面引用了另外一篇的內容。若是須要展現引用的地址或者相關信息，能夠配合使用 cite 標籤。不一樣的地方是，blockquote 將包含 cite 標籤在底部；q 引用內容更短小一些，像短語或者詞語，且 cite 會做爲其兄弟節點出如今它前面。雖然 q 的表現與雙引號同樣。可是，卻有不一樣的使用場景。例如：說過的話，能夠用引號包裹強調，可能不適合 q。

s、del: 二者默認外觀差很少，都有中貫線。可是， s 表示沒那麼重要了，而 del 意味着已經廢除。

strong、em: 二者都有增強的意思。strong 着重強調相關內容，而 em 強調的是語氣，像英語口語中的重音。

i: 外來或者專有名詞，或交替出現的心情或者聲音等情景。前半句比較好理解，後半句比較難理解。先看一個例子：

<p>雷曼開始睡覺了.</p>
<p><i>這艘船週二離港的</i>, 他夢見. <i>船上有許多人, 其中有一個叫凱莉的公主. 他看着凱莉，日復一日，但願她可以注意到他，但是，她歷來都沒有.</i></p>
<p><I>終於，有一天晚上，雷曼鼓足了勇氣對她說——</i></p>
<p>這時，一段火警發出的報警聲把雷曼吵醒了.</p>

上面的例子，雷曼睡覺和醒來是現實的描寫，而夢境是虛擬的，是另外一種場景，都用 i 擴起來了。有時候 i 能夠被其餘標籤替代，咱們能夠 em 表示語氣的不一樣，用 dfn 包裹那些外來或者特殊意義的名詞。

b: 強調，引發注意，但不必定是重要的，對此，無須作出任何解釋。好比，搜索高亮、一段文字的開頭。下面是一個反例：

<p><b>注意!</b> 不要在巴比納吐口水!</p>

這裏更適合用 strong。

u: 很難辨認（發音）、拼寫錯誤或者中國名字。

time: 與時間相關的內容，例如時間、時區等。

code: 代碼片斷。

var: 數學或者編程及其餘地方用到的變量。例如：

<p> <var>x</var>的值是5</p>

samp: 表示一個例子或者對計算結果輸出的引用。

span: 與 div 同樣，也是沒有任何的語義的。能夠用來包裹行內元素或者文本，進行樣式改造。

未完......