個人HTML會說話——從實用出發，談談HTML的語義化

語義化HTML是什麼？有什麼意義？

所謂語義化HTML，就是從代碼層次表達程序員的想法、思路，同時描繪出網站頁面的結構：

1. 與同爲人類的程序員溝通，幫助程序員快速掌握當前代碼。這一點實際上是能夠經過註釋來實現的，不過用上語義化HTML多多少少能夠省點註釋，哈哈。
2. 與同爲代碼構築的系統（例如殘疾人士閱讀器以及搜索引擎爬蟲等）溝通，幫助其快速、準確達到目的。因爲這類系統與人類的智能相比起來實在有限，所以須要協定好經過什麼樣的方式來進行溝通，而W3C的決議就是語義化HTML的標準了。

最近在惡補前端基礎時，碰到這一個知識點，發現市面上的資料大多雜亂，並且每每只能意會而不能言傳，很難找到其中有什麼實用的價值，所以特寫此文，不妄求全面剖析，只求實用至上。

文檔章節類HTML標籤

文檔章節類HTML標籤能體現網頁的結構，所以也擁有最多的語義化HTML標籤。

<article> / <section>

這倆標籤的語義比較相像，都是表示文檔中的一個獨立區域（獨立單元），其中還能夠從結構上拆分紅<header> / <footer>等部分。
這倆標籤比較起來的話，<article>比<section>要大一級：

1. <article>中能夠包含<section>，舉個例子：一篇博客文章的下方或側方通常會有「相關文章」的列表，那麼，這一整塊HTML就能夠用<article>給包起來，而「相關文章」的那一小塊HTML則能夠用section來表示；再舉個例子，好比說文章的「版權信息」，也能夠用section來表示。
2. <article>中可包含<article>，好比說：一篇文章以及這篇文章的用戶評論，整塊HTML能夠用<article>來包起來，而用戶評論從邏輯分析起來也是從屬於這篇文章的，所以也能夠用<article>包起來並歸到文章的<article>之下。
3. <section>之下不能再放<section>了，這從側面表示這是最小一級的獨立單元標籤。
4. <article>通常用於「詳細內容」，所以通常一個頁面只含有一個頂級的<article>。而相反，<section>的用途更普遍一些，除卻「詳細內容」外均可以用<section>來進行包裹，好比說：網站首頁上，能夠利用<section>來展現不一樣分類/欄目的文章列表。

<header> / <footer>

這倆標籤性質比較相似，因此放到一塊兒來比較：一個放頭部，一個放底部。
乍一看，以爲這倆標籤就是網頁的頁頭（通常包含網站LOGO、BANNER、頂級導航等）和頁尾（網站自己的信息，包括版權信息、聯繫方式等），但實際上這倆標籤的應用範圍遠不止於此，徹底能夠做爲其它獨立單元（<article>/<section>/<aside>/<nav>等）中的一部分，好比說下面的這個文章欄目，紅色框住的部分能夠用<header>（能夠考慮裏面包含個<nav>），而藍色框住的部分就能夠用<footer>了。

又好比說一篇文章，文章的標題/做者/發佈時間等信息可使用<header>，而文章的版權信息、參考文章列表等則可使用<footer>。

<main>

既然提到<header> / <footer>，就不得不提<main>了。<main>望文生義，就是整個頁面的主體部分。跟<header> / <footer>不同，一個頁面只能有一個<main>，不能放進其它獨立單元裏。
<main>僅包括一個頁面最核心的內容，好比說一篇文章，其它旁枝末節，好比搜索欄、菜單等內容不該被包含其中。

<aside>

<aside>通常表示頁面主體內容之外的側邊欄，好比上文提到的「相關文章」，又或者是「做者我的資料」，若是是這些狀況的話，通常會被包含在<article>中。另外，<aside>也能夠表示一些工具功能，好比說「分享文章」、「回到頂部」等功能。

<nav>

<nav>表示網站的導航，但不必定全部的導航都須要用<nav>來實現，建議僅用來實現比較重要的導航，例如網頁頁腳的連接列表，直接用<footer>便可。另外，每一個頁面能夠有多個<nav>。

<h1> - <h6>

<h1> - <h6>表示標題，共有6級，其中<h1>的權重最高，<h6>的權重最低，其它的則依次遞減。通常來講，<h1>須要分配給網站名/LOGO，若是有設置二級域名，也能夠分配給分站的網站名/LOGO。
對於搜索引擎來講，<h1> - <h3>是瞭解網頁的重要途徑，所以必定要恰當地分配，好比：給文章的標題用上<h2>，給文章中的各個小標題用上<h3>。

文本級別語義HTML標籤

文本級別語義HTML標籤數量很多，但我認爲有實用價值的很少。

<a>

<a>表示一個通向其它頁面或當前頁面其它位置的入口，這是一個歷史悠久的語義化標籤，同時也是搜索引擎的基礎，想必你們都很熟悉了，所以這裏不做詳述。

<p>

<p>表示一個段落，這也是一個悠久的標籤了。從語義上來講，我更傾向於使用<p>來表示一段純文本，而不是利用<p>來呈現某個樣式。

<em> / <strong>

這倆標籤都是用來強調某個詞/句，從語氣上來講，<strong>比<em>的語氣更重，也就起到更強的強調做用。
聽說，這倆標籤是用來在語義上取代<i>和<b>。那麼，<em>跟<i>，有什麼不同呢？答案是，<i>如今已經不用來表示「強調」，而僅僅只是把一些專有名詞（好比人名、書名等）跟普通的字詞區分開來。<b>的狀況與<i>相似，也再也不表示強調了，從某種程度上來講已經失去語義了，僅僅做爲完成css樣式的輔助標籤。

<time>

<time>用來表示24小時制時間或者公曆日期，若表示日期則也可包含時間和時區。對於<time>，儘可能用機器能識別的時間格式，而不要用一些模糊的表達，好比說「一小時前」、「兩天前」等。

組合型HTML標籤

<figure>

<figure>表示一段富文本，能夠是一個文章插圖、一段代碼、一個表格，一般搭配<figcaption>來表述這段富文本的描述/標題，固然，一個<figure>下只能有一個<figcaption>。
我卻是想到了<figure>的一個典型運用，那就是瀑布流文塊：

結構化數據

這一塊在SEO領域至關重要，根據目前已經擬定好的一些規則，你能夠明確地標明某頁面主體的各個屬性。
舉個例子：一個商品的詳細信息頁，用普通的語義化來表示，大概只有商品的名稱能夠進搜索引擎的法眼；但自從有告終構化數據，能夠經過某些標籤及屬性，指明商品的價格、供應商、實物圖等內容；搜索引擎獲取到該商品頁的各個屬性後，會在搜索結果頁面直接呈現出來，另外在排名上也會有所偏重。
這方面的內容不少，建議仍是參考各大搜索引擎的優化指南，畢竟各搜索引擎對這結構化數據的支持程度不同。這裏放出Google支持的結構化數據的官網：http://schema.org/