最近做了項(xiàng)目才知道語(yǔ)義化標(biāo)簽的重要性委可。有語(yǔ)義的標(biāo)簽荆忍，能有助于爬蟲讀懂，有利于SEO優(yōu)化。
如上圖所示刹枉，
header 頭部
hgroup 標(biāo)題（h1-h6）
nav 導(dǎo)航欄
main 主體
article 獨(dú)立、完整的內(nèi)容塊屈呕，比section更有語(yǔ)義
aside 側(cè)邊欄微宝，作為article的附屬。
section 代表文檔中的“節(jié)”或“段”虎眨，“段”可以是指一篇文章里按照主題的分段蟋软；“節(jié)”可以是指一個(gè)頁(yè)面里的分組。
footer 頁(yè)腳
address 代表區(qū)塊容器嗽桩，必須是作為聯(lián)系信息出現(xiàn)，郵編地址湿痢、郵件地址等等,一般出現(xiàn)在footer譬重。
header元素
1臀规、 代表網(wǎng)頁(yè)或section的頁(yè)眉栅隐。
2租悄、通常包含 h1-h6元素或者h(yuǎn)group恰矩，作為整個(gè)頁(yè)面或者一個(gè)內(nèi)容塊的標(biāo)題外傅。
3萎胰、也可包裹一節(jié)的目錄部分、一個(gè)搜索框冰肴、一個(gè)nav、或者任何相關(guān)logo
4联逻、頁(yè)面沒有限制header元素的個(gè)數(shù)检痰。
<header>
<hgroup>
<h1>網(wǎng)站標(biāo)題</h1>
<h1>網(wǎng)站副標(biāo)題</h1>
</hgroup>
</header>
header使用注意：
- 可以是網(wǎng)頁(yè)或者任意section的頭部部分铅歼；
- 沒有個(gè)數(shù)限制
- 如果hgroup或h1-h6能能自己工作的很好，就不用header
hgroup 元素
1厦幅、代表網(wǎng)頁(yè)或者section的標(biāo)題确憨，元素有多個(gè)標(biāo)題時(shí)缚态，可以將h1-h6元素放入其中玫芦。
<hgroup>
<h1>這是一篇介紹HTML 5語(yǔ)義化標(biāo)簽和更簡(jiǎn)潔的結(jié)構(gòu)</h1>
<h2>HTML 5</h2>
</hgroup>
hgroup使用注意：
- 如果使用一個(gè)h1-h6就不用hgroup
- 如果連續(xù)兩個(gè)或多個(gè)h1-h6標(biāo)簽就用hgroup
- 如果有連續(xù)多個(gè)標(biāo)題和其他文章數(shù)據(jù)：h1-h6用hgroup包住桥帆，和其他數(shù)據(jù)一起放入header標(biāo)簽
nav元素
1、用于定義頁(yè)面的主要導(dǎo)航部分
<nav>
<ul>
<li>HTML 5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</nav>
- nav只能用于頁(yè)面主要導(dǎo)航部分祈匙。
- 頁(yè)腳區(qū)域的連接列表天揖，用footer就夠了。
aside元素
1今膊、aside被包含在article元素中：其內(nèi)容可以為當(dāng)前文章有關(guān)的相關(guān)資料些阅、標(biāo)簽斑唬、簽名黎泣、名詞、解釋等抒倚。
2、aside在article元素之外使用：作為頁(yè)面或站點(diǎn)全局的附屬信息部分坷澡。最典型的是側(cè)邊欄衡便，其中的內(nèi)容可以是日志串連洋访，其他組的導(dǎo)航，甚至廣告，這些內(nèi)容相關(guān)的頁(yè)面岂嗓。
<article>
<p>內(nèi)容</p>
<aside>
<h1>作者簡(jiǎn)介</h1>
<p>小北食绿，前端一枚</p>
</aside>
</article>
aside 使用注意：
- aside 在article內(nèi)表示主要內(nèi)容的附屬品
- aside 在article之外可以做側(cè)邊欄公罕。沒有article與之對(duì)應(yīng)最好不用。
- 如果是廣告，其他日志連接或者其他分類導(dǎo)航也可以用
section元素
1罐柳、元素代表文檔中的“節(jié)”或“段”
2掌腰、“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個(gè)頁(yè)面里的分組张吉。
3齿梁、section通常還帶標(biāo)題，雖然html5中section會(huì)自動(dòng)給標(biāo)題h1-h6降級(jí)肮蛹，但是最好手動(dòng)給他們降級(jí)勺择。
<section>
<h1>section是啥？</h1>
<article>
<h2>關(guān)于section</h1>
<p>section的介紹</p>
<section>
<h3>關(guān)于其他</h3>
<p>關(guān)于其他section的介紹</p>
</section>
</article>
</section>
section 使用注意：
- 一張頁(yè)面可以用section劃分為簡(jiǎn)介蔗崎、文章條目和聯(lián)系信息酵幕。
- 文章內(nèi)頁(yè)，最好用article缓苛。section不是一般意義上的容器元素芳撒，如果想作為樣式展示和腳本的便利邓深，可以用div。
- article笔刹、nav芥备、aside可以理解為特殊的section，所以如果可以用article舌菜、nav萌壳、aside就不要用section，沒實(shí)際意義的就用div
article 元素
1日月、article代表一個(gè)在文檔袱瓮，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容，其目的是為了讓開發(fā)者獨(dú)立開發(fā)或重用爱咬。
2尺借、article會(huì)有一個(gè)標(biāo)題（通常會(huì)在header里），會(huì)有一個(gè)footer頁(yè)腳精拟。
<article>
<h1>一篇文章</h1>
<p>文章內(nèi)容..</p>
<footer>
<p><small>版權(quán)：html5jscss網(wǎng)所屬燎斩，作者：小北</small></p>
</footer>
</article>
article使用注意：
- 自身獨(dú)立的情況下：用article
- 是相關(guān)的內(nèi)容，用section
- 沒有語(yǔ)義用div
footer 元素
1蜂绎、元素代表“網(wǎng)頁(yè)”或“section”的頁(yè)腳栅表，通常含有該節(jié)的一些基本信息，譬如：作者师枣，相關(guān)文檔鏈接怪瓶，版權(quán)資料。
2坛吁、元素包含了整個(gè)節(jié)劳殖，那么它們就代表附錄，索引拨脉，提拔哆姻，許可協(xié)議，標(biāo)簽玫膀，類別等一些其他類似信息矛缨。
