語義化HTML是什麼？有什麼意義？
所謂語義化HTML，就是從程式碼層次表達程式設計師的想法、思路，同時描繪出網站頁面的結構：
- 與同為人類的程式設計師溝通，幫助程式設計師快速掌握當前程式碼。這一點其實是可以通過註釋來實現的，不過用上
語義化HTML多多少少可以省點註釋，哈哈。 - 與同為程式碼構築的系統（例如殘疾人士閱讀器以及搜尋引擎爬蟲等）溝通，幫助其快速、準確達到目的。由於這類系統與人類的智慧相比起來實在有限，因此需要協定好通過什麼樣的方式來進行溝通，而
W3C的決議就是語義化HTML的標準了。
最近在惡補前端基礎時，碰到這一個知識點，發現市面上的資料大多雜亂，而且往往只能意會而不能言傳，很難找到其中有什麼實用的價值，因此特寫此文，不妄求全面剖析，只求實用至上。
文件章節類HTML標籤
文件章節類HTML標籤能體現網頁的結構，因此也擁有最多的語義化HTML標籤。
<article> / <section>
這倆標籤的語義比較相像，都是表示文件中的一個獨立區域（獨立單元），其中還可以從結構上拆分成<header> / <footer>等部分。
這倆標籤比較起來的話，<article>比<section>要大一級：
<article>中可以包含<section>，舉個例子：一篇部落格文章的下方或側方一般會有“相關文章”的列表，那麼，這一整塊HTML就可以用<article>給包起來，而“相關文章”的那一小塊HTML則可以用section來表示；再舉個例子，比如說文章的“版權資訊”，也可以用section來表示。<article>中可包含<article>，比如說：一篇文章以及這篇文章的使用者評論，整塊HTML可以用<article>來包起來，而使用者評論從邏輯分析起來也是從屬於這篇文章的，因此也可以用<article>包起來並歸到文章的<article>之下。<section>之下不能再放<section>了，這從側面表示這是最小一級的獨立單元標籤。<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/