此文為前段時間團隊研究會出品，與小伙伴兮兮圓一起研究的成果，意外地上了公司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