最近做了項目才知道語義化標簽的重要性。有語義的標簽，能有助于爬蟲讀懂，有利于SEO優(yōu)化。
如上圖所示，
header 頭部
hgroup 標題（h1-h6）
nav 導航欄
main 主體
article 獨立、完整的內容塊，比section更有語義
aside 側邊欄，作為article的附屬。
section 代表文檔中的“節(jié)”或“段”，“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。
footer 頁腳
address 代表區(qū)塊容器，必須是作為聯(lián)系信息出現(xiàn)，郵編地址、郵件地址等等,一般出現(xiàn)在footer。
header元素
1、 代表網(wǎng)頁或section的頁眉。
2、通常包含 h1-h6元素或者hgroup，作為整個頁面或者一個內容塊的標題。
3、也可包裹一節(jié)的目錄部分、一個搜索框、一個nav、或者任何相關logo
4、頁面沒有限制header元素的個數(shù)。
<header>
<hgroup>
<h1>網(wǎng)站標題</h1>
<h1>網(wǎng)站副標題</h1>
</hgroup>
</header>
header使用注意：
- 可以是網(wǎng)頁或者任意section的頭部部分；
- 沒有個數(shù)限制
- 如果hgroup或h1-h6能能自己工作的很好，就不用header
hgroup 元素
1、代表網(wǎng)頁或者section的標題，元素有多個標題時，可以將h1-h6元素放入其中。
<hgroup>
<h1>這是一篇介紹HTML 5語義化標簽和更簡潔的結構</h1>
<h2>HTML 5</h2>
</hgroup>
hgroup使用注意：
- 如果使用一個h1-h6就不用hgroup
- 如果連續(xù)兩個或多個h1-h6標簽就用hgroup
- 如果有連續(xù)多個標題和其他文章數(shù)據(jù)：h1-h6用hgroup包住，和其他數(shù)據(jù)一起放入header標簽
nav元素
1、用于定義頁面的主要導航部分
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
- nav只能用于頁面主要導航部分。
- 頁腳區(qū)域的連接列表，用footer就夠了。
aside元素
1、aside被包含在article元素中：其內容可以為當前文章有關的相關資料、標簽、簽名、名詞、解釋等。
2、aside在article元素之外使用：作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
<article>
<p>內容</p>
<aside>
<h1>作者簡介</h1>
<p>小北，前端一枚</p>
</aside>
</article>
aside 使用注意：
- aside 在article內表示主要內容的附屬品
- aside 在article之外可以做側邊欄。沒有article與之對應最好不用。
- 如果是廣告，其他日志連接或者其他分類導航也可以用
section元素
1、元素代表文檔中的“節(jié)”或“段”
2、“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。
3、section通常還帶標題，雖然html5中section會自動給標題h1-h6降級，但是最好手動給他們降級。
<section>
<h1>section是啥？</h1>
<article>
<h2>關于section</h1>
<p>section的介紹</p>
<section>
<h3>關于其他</h3>
<p>關于其他section的介紹</p>
</section>
</article>
</section>
section 使用注意：
- 一張頁面可以用section劃分為簡介、文章條目和聯(lián)系信息。
- 文章內頁，最好用article。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利，可以用div。
- article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div
article 元素
1、article代表一個在文檔，頁面或者網(wǎng)站中自成一體的內容，其目的是為了讓開發(fā)者獨立開發(fā)或重用。
2、article會有一個標題（通常會在header里），會有一個footer頁腳。
<article>
<h1>一篇文章</h1>
<p>文章內容..</p>
<footer>
<p><small>版權：html5jscss網(wǎng)所屬，作者：小北</small></p>
</footer>
</article>
article使用注意：
- 自身獨立的情況下：用article
- 是相關的內容，用section
- 沒有語義用div
footer 元素
1、元素代表“網(wǎng)頁”或“section”的頁腳，通常含有該節(jié)的一些基本信息，譬如：作者，相關文檔鏈接，版權資料。
2、元素包含了整個節(jié)，那么它們就代表附錄，索引，提拔，許可協(xié)議，標簽，類別等一些其他類似信息。
