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