1、經常使用標籤
<header>、<footer>、<nav>、<aside>、<hgroup>、<section>、<article>、<main>算法
2、標籤簡介
<header>
<header>標籤表明頁面或片斷的頭部，一般包含頁面（或片斷）的標題、介紹信息或一組導航。chrome
一個頁面裏能夠有多個<header>標籤。ide
<header>標籤不能包含在<footer>、<address>和其餘<header>標籤中。工具
示例場景：測試
注意事項：
切勿過分使用<header>，<header>包含的是頭部的一組信息，若頭部只有標題，直接將標題「裸」出來就好了，沒必穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq807bg0ruy4yZsdDtoZWFkZXImZ3Q7oaM8YnIgLz5CQUQ6PGJyIC8+PGltZyBzcmM9"http://www.it165.net/uploadfile/files/2014/0627/20140627174851205.jpg" alt="\" />spa
GOOD:.net
<footer>
<footer>標籤表明頁面或片斷的尾部（「腳」），一般包含該頁面（或片斷）的一些基本信息，如做者、版權、相關文檔的連接、聯繫信息等。orm
一個頁面裏能夠有多個<footer>標籤。seo
示例場景：ci
<nav>
<nav>標籤表明頁面的導航區域，一般包含一組導航連接。
一個頁面中能夠有多個nav元素，做爲頁面總體或者不一樣部分的導航。
並不是頁面上全部的連接組都須要包含於<nav>中——只有那些由主要的導航連接組成的部分才適用。好比<footer>中的連接組一般就不需穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq3xdTaJmx0O25hdiZndDvW0KOs1rG909PDJmx0O2Zvb3RlciZndDuw/LqsvLS/yaGjPC9wPgo8cD4mbHQ7bmF2Jmd0O7bUzt7Vz7Ctt8ezo9PQ08OjrL/J0tTWsb3TzPi5/S/M+LW9wbS906OotbHIu6Osx7DM4crHtPOyv7fWstDVz9PDu6fS0b6tyrnTw9ans9ZINbXExsHEu9TEtsHG98HLo6mhozwvcD4KPHA+yr7A/bOhvrCjujwvcD4KPHA+PGltZyBzcmM9"http://www.it165.net/uploadfile/files/2014/0627/20140627174852208.jpg" alt="\" />
<aside>
<aside>標籤表明一個頁面區域，包含和頁面主要內容相關，但又能夠單獨存在的那些內容。一般表現爲側邊欄、廣告等。
示例場景：
<hgroup>
當一個標題有多個層級時，<hgroup>用於將不一樣層級的標題（h3到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>的級別不能低於這些標籤。
示例場景：
3、h5大綱
查看方式
chrome下「工具——>擴展程序——>HTML5 Outliner——>啓用」，啓用後chrome右上角會出現下圖所示的圖標，點擊便可。
本地文件不能用上述工具查看，可將代碼粘至在線工具HTML 5 Outliner中進行查看。
注意事項
一、建議爲每個<nav>、<aside>、<article>、<section>都添加標題，一方面爲了語義化，另外一方面，若沒有標題，h5大綱中會顯示「Untitled XXX」，如圖：
視覺上不須要顯示的標題能夠經過樣式隱藏。
二、h5中<nav>、<aside>、<article>、<section>元素都是獨立的，會建立一個新的「節」，也就是文檔大綱中一個新的節點。在h5中，每一個節均可以有本身的<h3>元素。
上述節點能夠有本身的<h3>元素，並且也應該從<h3>開始，否則默認顯示會有問題，如圖：
此爲chrome下的測試結果，初步猜想多是頁面解析時在獨立節點<section>內找不到其（兩個<h4>標題「經常使用標籤」和「標籤簡介」）相應的一級標題<h3>，計算樣式時就按原h4大綱的方式處理了。
三、用開發人員工具能夠看出，h5算法會自動爲<body>和<nav>、<aside>、<article>、<section>元素添加id，而元素<header>、<footer>和<main>沒有，這說明這三個元素沒有建立獨立的「節」。如圖：
四、默認展示上，「節」的層級越多，其內部的hn字號越小，如圖：
4、思考題
一、跟據h5的新規定，<header>能夠出現屢次，那麼究竟什麼狀況下才適合用多<header>呢？<header>過多會不會引起其餘問題，好比被seo屏蔽？面對多個header，讀屏軟件又會怎麼處理呢？
二、對於內容關聯度比較高的模塊，咱們能夠用<section>劃分，好比本文中的「經常使用標籤」、「標籤簡介」、「h5大綱」、「思考題」幾個模塊就是用<section>包裹的，同時，咱們也能夠用原來的方式——文檔標題用<h3>，這幾個模塊的標題用<h4>來實現。這兩種方式生成的h5大綱是同樣的，從語義上來講也都是合理的，那麼，究竟何時用<section>劃分模塊，何時用hn遞減方式劃分模塊合適呢？二者直接能否找到一個可量化的分界點？
三、本文討論了這麼多，那麼，咱們爲何要錙銖必較地去探討每一個標籤怎麼用，用錯了會怎樣？咱們又爲何要遵循h5大綱，大綱不良又會怎樣？如你們所知，良好的結構和大綱會使頁面語義化，這對於無障礙（主要是讀屏軟件）和seo都是頗有幫助的，除此以外，還有麼其餘更多更深的意義呢？標籤雖易，用好不易，且用且深思……