此文為前段時間團隊研究會出品，與小夥伴兮兮圓一起研究的成果，意外地上了公司km的今日推薦，今日挪過來，為新開張的部落格先暖暖場吧。
一、常用標籤
<header>、<footer>、<nav>、<aside>、<hgroup>、<section>、<article>、<main>
二、標籤簡介
<header>
<header>標籤代表頁面或片段的頭部，通常包含頁面（或片段）的標題、介紹資訊或一組導航。
一個頁面裡可以有多個<header>標籤。
<header>標籤不能包含在<footer>、<address>和其他<header>標籤中。
示例場景：
注意事項：
切勿過度使用<header>，<header>包含的是頭部的一組資訊，若頭部只有標題，直接將標題“裸”出來就行了，沒必要加多一層<header>。
BAD:
GOOD:
<footer>
<footer>標籤代表頁面或片段的尾部（“腳”），通常包含該頁面（或片段）的一些基本資訊，如作者、版權、相關文件的連結、聯絡資訊等。
一個頁面裡可以有多個<footer>標籤。
示例場景：
<nav>
<nav>標籤代表頁面的導航區域，通常包含一組導航連結。
一個頁面中可以有多個nav元素，作為頁面整體或者不同部分的導航。
並非頁面上所有的連結組都需要包含於<nav>中——只有那些由主要的導航連結組成的部分才適用。比如<footer>中的連結組通常就不需要放在<nav>中，直接用<footer>包含即可。
<nav>對無障礙非常有用，可以直接跳過/跳到連結（當然，前提是大部分殘障使用者已經使用支援H5的螢幕閱讀器了）。
示例場景：
<aside>
<aside>標籤代表一個頁面區域，包含和頁面主要內容相關，但又可以單獨存在的那些內容。通常表現為側邊欄、廣告等。
示例場景：
<hgroup>
當一個標題有多個層級時，<hgroup>用於將不同層級的標題（h1到h6）歸組，以便實現子標題、題頭標語等。
<hgroup>“包裝”的標題元素在h5大綱中只顯示一級標題。
請勿濫用<hgroup>，若只有一級標題，直接用hn即可。
<hgroup>是獨立的，無需刻意用<header>包裹。
示例場景：
<section>
<section>標籤用於對文章或頁面上的內容進行分塊，通常由同一主題的內容及其標題組成。
請勿濫用<section>，若一塊內容僅在視覺上是一個整體，語義上並非一個主題，用div即可。
示例場景：
<article>
<article>標籤代表頁面中獨立的、完整的、可以獨自被外部引用的內容。通常為一篇論壇帖子、評論、文章、新聞、協議內容等，也可以是一個互動性的小部件，或者其他任何獨立的內容專案。
一個<article>元素通常有它自己的標題。
示例場景：
<main>
<main>標籤代表頁面的主內容區。
<main>中的內容須是這個頁面獨有的，而不能是會同時出現在其他頁面中的（像側邊、導航等公共內容）。
一個頁面中只能有一個<main>。
<main>不能在<article>、<aside>、<header>、<footer>、<nav>的裡面，即<main>的級別不能低於這些標籤。
示例場景：
三、h5大綱
檢視方式
chrome下“工具——>擴充套件程式——>HTML5 Outliner——>啟用”，啟用後chrome右上角會出現下圖所示的圖示，點選即可。
本地檔案不能用上述工具檢視，可將程式碼粘至線上工具HTML 5 Outliner中進行檢視。
注意事項
1、建議為每一個<nav>、<aside>、<article>、<section>都新增標題，一方面為了語義化，另一方面，若沒有標題，h5大綱中會顯示“Untitled XXX”，如圖：
視覺上不需要顯示的標題可以通過樣式隱藏。
2、h5中<nav>、<aside>、<article>、<section>元素都是獨立的，會建立一個新的“節”，也就是文件大綱中一個新的節點。在h5中，每個節都可以有自己的<h1>元素。
上述節點可以有自己的<h1>元素，而且也應該從<h1>開始，不然預設顯示會有問題，如圖：
此為chrome下的測試結果，初步猜測可能是頁面解析時在獨立節點<section>內找不到其（兩個<h2>標題“常用標籤”和“標籤簡介”）相應的一級標題<h1>，計算樣式時就按原h4大綱的方式處理了。
3、用開發人員工具可以看出，h5演算法會自動為<body>和<nav>、<aside>、<article>、<section>元素新增id，而元素<header>、<footer>和<main>沒有，這說明這三個元素沒有建立獨立的“節”。如圖：
4、預設展現上，“節”的層級越多，其內部的hn字號越小，如圖：
四、思考題
1、跟據h5的新規定，<header>可以出現多次，那麼究竟什麼情況下才適合用多<header>呢？<header>過多會不會引發其他問題，比如被seo遮蔽？面對多個header，讀屏軟體又會怎麼處理呢？
2、對於內容關聯度比較高的模組，我們可以用<section>劃分，比如本文中的“常用標籤”、“標籤簡介”、“h5大綱”、“思考題”幾個模組就是用<section>包裹的，同時，我們也可以用原來的方式——文件標題用<h1>，這幾個模組的標題用<h2>來實現。這兩種方式生成的h5大綱是一樣的，從語義上來說也都是合理的，那麼，究竟什麼時候用<section>劃分模組，什麼時候用hn遞減方式劃分模組合適呢？兩者直接可否找到一個可量化的分界點？
3、本文討論了這麼多，那麼，我們為什麼要錙銖必較地去探討每個標籤怎麼用，用錯了會怎樣？我們又為什麼要遵循h5大綱，大綱不良又會怎樣？如大家所知，良好的結構和大綱會使頁面語義化，這對於無障礙（主要是讀屏軟體）和seo都是很有幫助的，除此之外，還有麼其他更多更深的意義呢？標籤雖易，用好不易，且用且深思……
2014.4.2