HTML入门：07HTML5语义化布局
- 1 header标签
- 2 nav标签
- 3 section标签
- 4 article标签
- 5 aside标签
- 6 footer标签
HTML5提供了新的语义元素来明确一个web页面的不同部分，根据W3C HTML5文档规范，一般认为HTML5中的布局标签有八个：header、nav、section、article、aside、footer、figure、figcaption，其中最后两个figure、figcaption在HTML入门：06HTML5语义化标签 中已经讲过了，其余六个标签一般在页面中的布局位置如图所示。
下面来学习这六个布局标签的使用。
1 header标签
header标签定义文档或者文档的一部分区域的页眉。首先header标签描述了文档的头部区域，主要用于内容的介绍展示。在页面中，我们也可以同时使用多个header标签，例子如下。
示例：先输入一对head标签，在标签的中间和后面都插入内容，效果如下。
<header>
<h1>页面的头部</h1>
</header>
<p>页面的内容</p>
2 nav标签
nav用于定义页面的导航链接部分区域，但并不是所有的链接都必须包含在nav标签中。
示例：先输入nav标签并在中间位置建立几个菜单链接，效果如下。
<nav>
<a href="#">HTML</a>|
<a href="#">CSS</a>|
<a href="#">JavaScript</a>|
<a href="#">JQuery</a>
</nav>
3 section标签
section标签定义文档的节（片段、区段），比如章节、页眉、页脚或文档中的其他分节部分。 根据W3C HTML5文档，section包含了一组内容及其标题。
示例：输入section标签，并通过h1和p标签插入内容，然后再加入一组类似的代码，效果如下。
<section>
<h1>章节一标题</h1>
<p>章节一内容</p>
</section>
<section>
<h1>章节二标题</h1>
<p>章节二内容</p>
</section>
4 article标签
article标签一般用来定义语义上相对独立的内容。通常用在页面中的这几个部分：论坛帖子，报纸文章，博客条目，用户评论等等。
示例：输入article标签并插入内容，同样，再加入一组类似的代码，效果如下。
<article>
<h1>文章标题一</h1>
<p>文章内容</p>
</article>
<article>
<h1>文章标题二</h1>
<p>文章内容</p>
</article>
5 aside标签
aside标签定义页面主区域内容（即article）之外的内容，比如侧边栏。一般来说，aside标签的内容应与主区域的内容相关。
举例：输入aside标签，插入相应内容，效果如下。
<aside>
<h4>侧边栏标题</h4>
<p>侧边栏内容</p>
</aside>
6 footer标签
footer标签定义文档或者文档的一部分区域的页脚，描述了文档的底部区域。一个页脚通常包含文档的作者、著作权信息、链接的使用条款、联系信息等。
示例：输入footer标签，加入部分页面信息，效果如下。
<footer>
<p>文档的作者信息</p>
<p>文档的版权信息</p>
</footer>
通过以上几个标签的演示，大家会发现本文所介绍的标签很难从页面的呈现效果来彼此区分，这是因为这些标签只是从语义上做了区分，并不是header标签就只能放在页面的顶部，而footer标签只能放在页面的底部，之所以做了这样的规范，只是为了让标签的定义与使用在网页结构上更加语义化，使得搜索引擎及开发人员能更加迅速的理解当前网页的整个结构，也使得网络爬虫之类的程序能快速定位到相应的位置。
