語義化 HTML

前言

HTML5 新增了不少功能性標籤如 video、audio 等多媒體標籤，canvas、svg 圖像標籤，新的表單類型和屬性，以及很是多的語義標籤。

然而在的平常開發中除了用一些如 footer、header 等 h5 語義化標籤外，其餘的基本都是 div + span 一梭子所有搞定。快速還原設計稿，並不會感受有什麼不妥。由於在 HTML 語義上面花費太多時間並不會有一個很明顯的收益，還可能會被領導誤認爲在摸魚。因此語義化的 HTML 在緊張的開發迭代中就這麼被忽略了。

可是看了 winter 對於語義化 HTML 的講解以後，才忽然認識到這些年寫的 HTML 就是在瞎 ** 寫，雖然實現了佈局結構可是意義徹底是變了味道的。

語義化 HTML 的意義

• 語義類標籤對開發者更爲友好，使用語義類標籤加強了可讀性，即使是在沒有 CSS 的時候，開發者也可以清晰地看出網頁的結構，也更爲便於團隊的開發和維護。
• 除了對人類友好以外，語義類標籤也十分適宜機器閱讀。它的文字表現力豐富，更適合搜索引擎檢索（SEO），也可讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提高網頁的搜索量，而且語義類還能夠支持讀屏軟件，根據文章能夠自動生成目錄等等。

正文

ruby

ruby 元素被用來展現東亞文字註音或字符註釋。

龍行 龘dá 龘dá

明日 Ashita

以前在遇到這種佈局的時候通常都是使用定位達到顯示效果，可是 ruby 元素纔是該場景的最優解。

em

em 標籤告訴瀏覽器把其中的文本表示爲強調的內容。對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示。

em 是英文 emphasize 的縮寫，意思爲強調。

我今天吃了一個蘋果

我今天吃了一個蘋果

上面兩句話，第一句強調的是蘋果第二句強調的是今天。因此若是有須要強調某個詞語的時候就應該使用 em 標籤，若是僅僅是爲了斜體顯示則使用 i 標籤。

strong

strong 標籤和 em 標籤同樣，用於強調文本，但它強調的程度更強一些。

若是常識告訴咱們應該較少使用 em 標籤的話，那麼 strong 標籤出現的次數應該更少。若是說用 em 標籤修飾的文本好像是在大聲呼喊，那麼用 strong 標籤修飾的文本就無異於尖叫了。沉默寡言的人說出的話老是一言既出;駟馬難追，與此相同，限制 strong 的使用能夠令應該更加引人注意，並且更加有效。

aside

aside 元素表示一個和其他頁面內容幾乎無關的部分，被認爲是獨立於該內容的一部分而且能夠被單獨的拆分出來而不會使總體受影響。其一般表現爲側邊欄或者標註框（call-out boxes）。

• 被包含在 article 元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料、名次解釋，等等。
• 在 article 元素以外使用做爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可使友情連接，博客中的其它文章列表、廣告單元等。

hgroup

hgroup 標籤用於對網頁或區段（section）的標題進行組合。

h1-h6 是最基本的標題，它們表示了文章中不一樣層級的標題。有些時候，咱們會有副標題，爲了不副標題產生額外的一個層級，咱們使用 hgroup 標籤。

section

section 元素表示一個包含在HTML文檔中的獨立部分，它沒有更具體的語義元素來表示，通常來講會有包含一個標題。

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>
複製代碼

section 的嵌套會使得其中的 h1-h6 降低一級

article

article 是使用來定義獨立於文檔且有意義的來自外部的內容，好比：一些投稿文章、新聞記者的文章，或者是摘自其它博客、論壇的信息等。

article 是一種特別的結構，它表示具備必定獨立性質的文章。因此，article 和 body 具備類似的結構，同時，一個 HTML 頁面中，可能有多個 article 存在。 除了內容主題之外，一個 article 元素一般會有本身的標題及腳註。

header

如其名，一般出如今前部，表示導航或者介紹性的內容。

footer

一般出如今尾部，包含一些做者信息、相關連接、版權信息等。

hr

hr 元素表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）

在還原設計稿的時候一般會遇到很長的橫線，有不少方法都能實現這個橫線，border、hr、僞類、高度元素等，因此在不一樣的場景使用不一樣的實現方法。

blockquote

blockquote 元素（或者 HTML 塊級引用元素），表明其中的文字是引用內容。一般在渲染時，這部分的內容會有必定的縮進（注 中說明了如何更改）。若引文來源於網絡，則能夠將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，能夠經過 元素。

<blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>
複製代碼

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World

time

time 標籤用來表示24小時制時間或者公曆日期，若表示日期則也可包含時間和時區。

<p>The concert starts at <time>20:00</time>.</p>

<p>This article was created on <time pubdate>2011-01-28</time>.</p>

<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
複製代碼

figure

用於表示與主文章相關的圖片，代碼、表格等流內容。

dfn

dfn 標籤是用來包裹被定義的名詞。

<p><dfn>硬核</dfn>做爲網絡流行語的該詞，本來的含義爲形容搖滾樂的分支之一硬核，好比硬核朋克，是更具備力量感的音樂形式，熱情奔放猛烈強勁。但不知什麼時候被做爲網絡語而流行了起來，甚至有了調侃的意思。</p>
複製代碼

pre

pre 元素表示預約義格式文本。在該元素中的文本一般按照原文件中的編排，以等寬字體的形式展示出來，文本中的空白符（好比空格和換行符）都會顯示出來。(緊跟在 pre 開始標籤後的換行符也會被省略)

<pre>
    html
  js     css      
</pre>
複製代碼

    html
  js     css      

samp

samp 元素用於標識計算機程序輸出

<pre>
    <samp>
        GET /home.html HTTP/1.1
        Host: www.example.org
    </samp>
</pre>
複製代碼

GET /home.html HTTP/1.1
Host: www.example.org

code

code 元素呈現一段計算機代碼。

<code>
    const a = 123
</code>
複製代碼

const a = 123

kbd

kbd 標籤常常用在於計算機相關的文檔和手冊中，定義鍵盤文本。

鍵入 <kbd>quit</kbd> 來退出程序，或者鍵入 <kbd>menu</kbd> 來返回主菜單
複製代碼

鍵入 quit 來退出程序，或者鍵入 menu 來返回主菜單

var

var 元素表示數學表達式或編程上下文中的變量。

<p> 一個簡單的方程：<var>x</var> = <var>y</var> + 2 </p>
複製代碼

一個簡單的方程：x = y + 2

small

small元素將使文本的字體變小一號。(例如從大變成中等，從中等變成小，從小變成超小)。在HTML5中，除了它的樣式含義，這個元素被從新定義爲表示邊註釋和附屬細則，包括版權和法律文本。

s

s 元素 使用刪除線來渲染文本。使用 s 元素來表示再也不相關，或者再也不準確的事情。

常常用於電商領域表示打折前的價格。

del

del 定義文檔中已被刪除的文本。

頁面效果跟 s 同樣，意義不一樣。

ins

ins 標籤訂義已經被插入文檔中的文本。

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
複製代碼

My favorite color is blue red!

i

i 用於表現因某些緣由須要區分普通文本的一系列文本。例如技術術語、外文短語或是小說中人物的思想活動等，它的內容一般以斜體顯示。

b

一般做爲關鍵字使用。

u

u 元素使文本在其內容的基線下的一行呈現下劃線。文本標記爲中文文本中的專有名稱，或 將文本標記爲拼寫錯誤。

參考

• HTML語義：div和span不是夠用了嗎？