3.1 结构元素

在之前的HTML页面中，大家基本上都是用了DIV+CSS的布局方式。而搜索引擎去抓取页面内容的时候，它只能猜测某个DIV内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

在介绍这些新标签之前，先看一个普通的页面的布局参考图，如图3-1所示。

图3-1 ＜div＞页面布局

图3-1可以清晰地看到，一个普通的页面，会有头部、导航、文章内容，还有附着的右边栏，还有底部等模块，主要是通过类名（class）进行标签，然后通过不同的CSS样式来处理的。但相对来说类名（class）不是通用的标准规范，搜索引擎只能去猜测某部分的功能，另外就是此页面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而HTML5新标签会带来新的布局规则，通常页面的构成有四个主要组件：带导航的页头、显示在主体内容区域的文章、显示次要信息的辅助栏以及页脚，如图3-2所示。

【例3-1】简单结构的页面，代码如下：

图3-2 页面的基本结构

在浏览器中预览，效果如图3-3所示。

图3-3 页面基本结构

在没有学习CSS的情况下，无法为这样的页面添加样式，浏览器预览效果与期待的效果有所不同。在第6章学习CSS相关内容之后，届时将学习到布局相关知识，页面效果将会进一步提升。首先，HTML要将内容标示清楚。下面将介绍页面结构相关元素。

3.1.1 header元素

header元素是一种具有引导和导航作用的辅助元素，通常，header元素可以包含一个区块的标题，但也可以包含其他的内容。

一个页面可以有任意数量的header元素，它们的含义可以根据其上下文而有所不同。例如，处于页面顶端或接近这个位置的header元素可能代表整个页面的页眉（有时称为页头）。通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。这无疑是header元素最常见的使用形式，不过不要误认为是唯一的形式。

＜header＞标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。通常＜header＞标签至少包含（但不局限于）一个标题标签（＜h1＞～＜h6＞），还可以包括＜hgroup＞标签，也可以包括表格内容、标识、搜索表单、＜nav＞导航等。

创建页眉的步骤如下。

1）将光标放置在需要创建页眉的元素里。

2）输入＜header＞。

3）输入页眉的内容，包括各种类型的内容，它们分别由各自的HTML元素（本书余下部分将会讲到其中的大多数）进行标签。例如，header可以包含h1～h6标题、标识、导航、搜索框，等等。

4）输入＜/header＞。

简单的页眉示例代码如下：

3.1.2 article元素

HTML5的另一个新元素便是article。article元素在页面中用来表示结构完整且独立的内容部分，如论坛的一个帖子，杂志或者报纸的一篇文章。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式，这时用来呈现评论的article元素被包含在文章内容的article里面。

创建文章的步骤如下。

1）输入＜article＞。

2）输入文章的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。

3）输入＜/article＞。

提示：可以将article嵌套在另一个article中，只要里面的article与外面的article是部分与整体的关系。一个页面可以有多个article元素（也可以没有）。例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的article。一个article可以包含一个或多个section元素（下一节会介绍该元素）。在article里包含独立的h1～h6也是常见的用法。

示例代码如下：

3.1.3 aside元素

aside元素用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告、成组的链接、侧边栏等。

在页面设计和规划中会遇到这样的情况，页面中有一部分内容与主体内容相关性没有那么强，可以独立存在，又需要跟主体内容有所区别，在HTML5之前无法直接通过HTML标签来直接区分。在HTML5中，新加入了aside元素，用来表示当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容无关的引用、侧边栏、广告、导航元素组以及其他类似的有别于主要内容的部分。使用＜aside＞标签的例子还包括重要引述、指向相关文章的一组链接（通常针对新闻网站）、nav元素组（如博客的友情链接）、Twitter源、相关产品列表（通常针对电子商务网站）等。

指定附注栏的步骤如下。

1）输入＜aside＞。

2）输入附注栏的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。

3）输入＜/aside＞。

需要注意的是HTML5不允许将aside嵌套在address元素内。

示例代码如下：

3.1.4 footer元素

footer元素定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和＜header＞标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

当你想到页脚的时候，你大概想的是页面底部的页脚（通常包括版权声明，可能还包括指向隐私政策页面的链接以及其他类似的内容）。HTML5的footer元素可以用在这样的地方，但它同header一样，还可以用在其他的地方。footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。只有当它最近的祖先是body时，它才是整个页面的页脚。如果一个footer包着它所在区块（如一个article）的所有内容，它代表的是像附录、索引、版权页、许可协议这样的内容。

创建页脚的步骤如下。

1）将光标放在希望创建页脚的元素里。

2）输入＜footer＞。

3）输入页脚的内容。

4）输入＜/footer＞。

footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容，通常包括其相关区块的附加信息，如文档的作者、文档的创作日期、相关阅读链接以及版权信息等。

【例3-2】footer元素实例，代码如下：

在浏览器中预览，显示效果如图3-4所示。

图3-4 footer元素

3.1.5 figure和figcaption元素

figure元素规定独立的流内容（图像、图表、照片、代码等）。figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。＜figcaption＞标签定义figure元素的标题。figcaption元素应该被置于“figure”元素的第一个或最后一个子元素的位置。其语法格式如下：

假如在figure元素内放置了一段视频，就需要用到＜video＞标签，该元素将在第5章为大家介绍。

也可以在figure元素内放置一张图片，需要用到img元素，如：