http://blog.shaochuancs.com/w3c-html5-header-footer-main-address/
https://www.w3.org/TR/html5/sections.html#the-header-element
HTML5 中的 data-* attribute 屬性
https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html
HTML 5 規範的語意化標籤
<header>
顧名思義就是頭部，主要是用來放置網站的刊頭，固定會重覆出現的導覽、LOGO、站名等內容。
<footer>
尾部，包括頁尾，像是法律資訊或是作者訊息等等，不過<header>及<footer>都不是唯一的，在網頁中的同一個區域可以重覆使用。
<nav>
導覽列，像是選單之類用來導引使用到網站各個地方的，可以用<nav> 包起來，在裝置上的操作是可以直接跳過、跳是跳到這個段落然後跳選下一個連結。
<main>
HTML <main>元素呈現了文檔<body>或應用的主體部分。主體部分由與文檔直接相關，或者擴展於文檔的中心主題、應用的主要功能部分的內容組成。這部分內容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重複的內容，比如側邊欄，導航欄鏈接，版權信息，網站logo，搜索框（除非搜索框作為文檔的主要功能） 。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main
<aside>
側欄，網頁中非主要區域的地方，常見放廣告及導覽、全站檢索的地方。
<article>
文章，意指一篇完整而可獨立抽出來閱讀的文章。
<section>
章節，表示相關但是不同的段落，段落tag裡也可以包<article>, <article>裡也可以包<section>主要的差別是語意上的。
<header>：網頁的標頭，通常放置網站標題。
<nav>：網頁的選單、導覽。
<main>：網頁的主要內容。
<aside>：網頁的側欄、附加內容。
<article>：一篇文章內容。
<section>：自訂的區塊，例如數篇摘要組成的空間。
<footer>：網頁的頁尾，通常放置聯絡方式、著作權宣告等等。
<mark>：Highlight parts of a text.
<time>：顯示日期時間。
Google 的 Matt Cutts 說過的話、發表的內容可以相信，因為他是搜尋引擎的頭頭，基本上 SEO 的規則他說了算。不過要得到彙整過、消化過的資訊並不容易，因為他發布的消息比較零散。
這篇「How To Use H1-H6 HTML Elements Properly」根據 Matt Cutts 做了一些整理，也是本文內容的依據：
H1、H2 等標籤不必依照順序，搜尋引擎仍可處理(依據影片內容)
一個頁面最好只使用一個 H1 → 雖然根據影片，Matt Cutts 說不要到處都是 H1 就好，但一個頁面使用一個 H1 "才是這個標籤的本質"。相信當一個頁面只要不是刻意使用超過一個 H1，Google 有辦法判斷出該使用方式是否為惡意、還是正常使用。
H2 最好使用二～三個就好 → 避免分散權重
H3 最好使用二～三個就好 → 避免分散權重
H4～H6 不太重要
For example, this is semantically correct:
<h1>Website Design Basics<h1>
<p>Here is some text</p>
<h2>HTML</h2>
<p>Here is some text</p>
<h2>CSS</h2>
<p>Here is some text</p>
