3.4 HTML 5的结构元素
在HTML 5之前，网页布局一般都用DIV元素，但语义化并不好。HTML 5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性结构，容易维护，并且对数据挖掘服务更友好。本节将详细介绍HTML 5结构元素。
结构元素，又称为区块型元素，是用来定义区块内容范围的元素。在HTML 5之前，区块型元素只有<div>一个，HTML 5新增了9个语义化结构元素，包括<nav>、<section>、<header>、<footer>、<article>、<aside>、<progress>、<meter>、<main>等，下面将对它们进行逐一介绍。
1．nav
HTML导航栏<nav>描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到且没必要加入<nav>的链接列表。
一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。
2．section
section元素表示文档中的一个区域（或节），是区块级通用元素。比如内容中的一个专题组，一般来说会包含一个标题（heading）。一般通过是否包含一个标题<h1>-<h6> element作为子节点，来辨识每一个<section>。
section元素强调分块，一般用于页面中具有明显独立的内容。
代码如下所示：
运行效果如图3-7所示。
图3-7 section运行效果
3．header
header元素表示页面头部或区块头部，用于将介绍内容和区块的辅助导航分组到一起，所以其有可能包含区块的标题元素以及其他的介绍内容（目录、logo等）。它一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。
代码如下所示：
运行效果如图3-8所示。
图3-8 header运行效果
4．footer
footer元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
footer与header元素基本一致，但是footer元素一般定义网页的底部内容。
代码如下所示：
运行效果如图3-9所示。
图3-9 footer运行效果
5．article
article元素用于定义一个独立的内容区块，可以是一篇博客、一篇文章或者是独立的插件。另外，article元素不仅可以嵌套使用，还可以表示插件，类似于div元素。
代码如下所示：
运行效果如图3-10所示。
图3-10 article运行效果
6．aside
aside元素通常用来设置侧边栏。它可以嵌套在article元素内部使用，作为主要内容的附属信息，如参考资料和名词解释等；也可以定义article元素之外的内容，前提是这些内容与article元素内容相关联。
代码如下所示：
运行效果如图3-11所示。
图3-11 aside运行效果
7．progress和meter元素
progress元素是HTML 5新增的元素，用来建立一个进度条，通常与JavaScript结合使用，来显示任务的进度。
meter元素是HTML 5新增的元素，用来建立一个度量条，表示度量衡的评定，通常与JavaScript结合使用。
代码如下所示：
运行效果如图3-12所示。
图3-12 progress和meter运行效果
8．main
main元素是比较不常用的，最主要的原因是IE浏览器不支持它。<main>呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容。
<main>标签不能是以下元素的继承，包括<article>、<aside>、<footer>、<header>或<nav>。在一个文档中不能出现一个以上的<main>标签。
代码如下所示：
