最近做了项目才知道语义化标签的重要性。有语义的标签，能有助于爬虫读懂，有利于SEO优化。

html5-layout.jpg

如上图所示，

header    头部
hgroup    标题（h1-h6）
nav       导航栏
main      主体
article   独立、完整的内容块，比section更有语义
aside     侧边栏，作为article的附属。
section   代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
footer    页脚
address   代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

header元素

1、代表网页或section的页眉。
2、通常包含 h1-h6元素或者hgroup，作为整个页面或者一个内容块的标题。
3、也可包裹一节的目录部分、一个搜索框、一个nav、或者任何相关logo
4、页面没有限制header元素的个数。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

header使用注意：

可以是网页或者任意section的头部部分；
没有个数限制
如果hgroup或h1-h6能能自己工作的很好，就不用header

hgroup 元素

1、代表网页或者section的标题，元素有多个标题时，可以将h1-h6元素放入其中。

<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
 </hgroup>

hgroup使用注意：

如果使用一个h1-h6就不用hgroup
如果连续两个或多个h1-h6标签就用hgroup
如果有连续多个标题和其他文章数据：h1-h6用hgroup包住，和其他数据一起放入header标签

nav元素

1、用于定义页面的主要导航部分

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

nav只能用于页面主要导航部分。
页脚区域的连接列表，用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、元素代表文档中的“节”或“段”
2、“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
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划分为简介、文章条目和联系信息。
文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。
article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

article 元素

1、article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。
2、article会有一个标题（通常会在header里），会有一个footer页脚。

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权：html5jscss网所属，作者：小北</small></p>
    </footer>
</article>

article使用注意：

自身独立的情况下：用article
是相关的内容，用section
没有语义用div

footer 元素

1、元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
2、元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

语义化标签