本节书摘来自华章出版社《HTML 5与CSS 3 权威指南（第3版·上册）》一 书中的第3章，第3.1节，作者：陆凌牛，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
3.1 新增的主体结构元素
在HTML 5中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的结构元素。需要说明的是，本章所讲的内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍来说，章、节都可以称为内容区块；对博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
接下来将详细讲解HTML 5在页面的主体结构方面新增加的结构元素。
3.1.1 article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。
除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。
现在，以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。
代码清单3-1 article元素示例
<article>
<header>
<h1>苹果</h1>
<p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>
</header>
<p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p>
<footer>
<p><small>著作权归***公司所有。</small></p>
</footer>
</article>这个示例展示的是一篇讲述苹果的博客文章，在header元素中嵌入文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入一大段该博客文章的正文，在结尾处的footer元素中，嵌入文章的著作权作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用article元素。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。
接下来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。
代码清单3-2 article元素嵌套示例
<article>
<header>
<h1>苹果</h1>
<p>发表日期:
<time pubdate datetime="2010/10/09">2010/10/09</time>
</p>
</header>
<p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p>
<section>
<h2>评论</h2>
<article>
<header>
<h3>发表者：陆凌牛</h3>
<p>
<time pubdate datetime="2010-10-10T19:10-08:00">
1小时前
</time>
</p>
</header>
<p>我喜欢苹果,我最喜爱的品种是红富士。</p>
</article>
<article>
<header>
<h3>发表者：张玉</h3>
<p>
<time pubdate datetime="2010-10-10T19:15-08:00">
1小时前
</time>
</p>
</header>
<p>苹果？我不喜欢,我喜欢吃橘子。</p>
</article>
</section>
</article>这个示例中的内容比代码清单3-1中的内容更加完整，它添加了文章读者的评论内容，整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，该部分内容又分为几部分，把文章标题放在header元素中，把文章正文放在header元素后面的p元素中，然后用section元素把正文与评论部分进行区分。后面马上会介绍section元素，它是一个分块元素，用来对页面中的内容进行分块，在section元素中嵌入评论的内容，评论中有几个人的评论，每个人的评论部分相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。
关于示例中提到的time元素与pubdate属性，可查看本节结尾处关于time元素与pubdate属性的说明。
另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。以下为它的一个示例，如代码清单3-3所示。
代码清单3-3 用article元素表示插件
<article>
<h1>My Fruit Spinner</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width="600" height="395"></embed>
</object>
</article>3.1.2 section元素
section元素用来对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。
我们可以这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中。以下为它的一个示例（注意，标题部分位于它的内部，而不是它的前面），如代码清单3-4所示。
代码清单3-4 section元素示例
<section>
<h1>苹果</h1>
<p><b>苹果</b> ,植物类水果,多次花果...("苹果"文章正文)</p>
</section>通常不推荐为那些没有标题的内容使用section，可以使用HTML 5轮廓工具来检查页面中是否有不包含标题部分的section，HTML 5轮廓工具的网址为gsnedders.html5.org/outliner/”，如果使用该工具进行检查后，会看见对于某个section的说明中有“untitiled section”（没有标题的section）文字，这个section就有可能使用不当（但是nav元素或aside元素没有标题是合理的）。
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，不要将它与表示“有着自己的完整的、独立的内容”的article元素混淆。
下面来看两个article元素与section元素结合使用的示例，希望能够帮助你更好地理解article元素与section元素的区别。
首先来看一个带有section元素的article元素的示例，如代码清单3-5所示。
代码清单3-5 带有section元素的article元素示例
<article>
<h1>苹果</h1>
<p><b>苹果</b> ,植物类水果,多次花果...</p>
<section>
<h2>红富士</h2>
<p>红富士是从普通富士的芽(枝)变中选育出的着色系富的统称...</p>
</section>
<section>
<h2>国光</h2>
<p>国光苹果品,又名小国光、万寿。原产美国,1600年发现的偶然实生苗...</p>
</section>
</article>代码清单3-5中的内容首先是一段独立的、完整的内容，因此使用article元素。该内容是一篇关于苹果的文章，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素。记住，对文章分段的工作也是使用section元素完成的。这里有人会问，为什么没有对第一段使用section元素，其实是可以使用section元素的，但是由于这里的结构比较清晰，分析器是可以识别第一段内容在一个section元素里的，所以也可以将第一个section元素略去不写，但是如果第一个section元素里还要包含子section元素或子article元素，那么必须写明第一个section元素。
接下来看一个包含article元素的section元素的示例，如代码清单3-6所示。
代码清单3-6 包含article元素的section元素示例
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>苹果,植物类水果,多次花果...</p>
</article>
<article>
<h2>橘子</h2>
<p>橘子,是芸香科柑橘属的一种水果...</p>
</article>
<article>
<h2>香蕉</h2>
<p>香蕉,属于芭蕉科芭蕉属植物,又指其果实,热带地区广泛栽培食用...</p>
</article>
</section>这个示例比前面的示例复杂了一些，首先，它是一篇文章中的一段，因此没有使用article元素。但是，在这一段中，可以分为几块独立的内容，因此嵌入了几个独立的article元素。
看到这里，你可能又糊涂了，这两个元素可以互换使用吗？它们的区别到底是什么呢？事实上，在HTML 5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性。section元素强调分段或分块，而article强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article元素，但是如果想将一块内容分成几段的时候，应该使用section元素进行分段。另外，在HTML 5中，div元素变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。
另外再补充一点，在HTML 5中，可以将所有页面的从属部分，譬如导航条、菜单、版权说明等包含在一个统一的页面中，以便统一使用CSS样式进行装饰。
最后，关于section元素的使用禁忌总结如下：
不要将section元素用作设置样式的页面容器，因为那是div元素的工作。
如果article元素、aside元素或nav元素更符合状况，不要使用section元素。
不要为没有标题的内容区块使用section元素。
3.1.3 nav元素
nav元素是一个可以用来作为页面导航的链接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav元素，只需要将主要的、基本的链接组放进nav元素即可。例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等，这时使用footer元素是最恰当的。一个页面中可以拥有多个nav元素，作为页面整体或不同部分的导航。
接着让我们来看一个nav元素的使用示例，在这个示例中，一个页面由几个部分组成，每个部分都带有链接，但只将最主要的链接放入nav元素中，如代码清单3-7所示。
代码清单3-7 nav元素示例
<body>
<h1>技术资料</h1>
<nav>
<ul>
<li><a href="/">主页</a></li>
<li><a href="/events">开发文档</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>HTML 5与CSS 3的历史</h1>
<nav>
<ul>
<li><a href="#HTML5">HTML 5的历史</a></li>
<li><a href="#CSS3">CSS 3的历史</a></li>
...more...
</ul>
</nav>
</header>
<section id="HTML 5">
<h1>HTML 5的历史</h1>
<p>讲述HTML 5的历史的正文</p>
</section>
<section id="CSS 3">
<h1>CSS 3的历史</h1>
<p>讲述CSS 3的历史的正文</p>
</section>
...more...
<footer>
<p>
<a href="?edit">编辑</a> |
<a href="?delete">删除</a> |
<a href="?rename">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版权所有：陆凌牛</small></p>
</footer>
</body>在这个例子中，第一个nav元素用于页面导航，将页面跳转到其他页面上（跳转到网站主页或开发文档目录页面）；第二个nav元素被放置在article元素中，用来实现在这篇文章中的两个组成部分的页内导航。
具体来说，nav元素可以用在以下场合：
传统导航条
现在主流网站上都有不同层级的导航条，用来将当前画面跳转到网站的其他主要页面。可以用nav元素实现导航条。
侧边栏导航
现在主流博客网站及商品网站上都有侧边栏导航，用来将页面从当前文章或当前商品跳转到其他文章或其他商品页面。可以用nav元素实现侧边栏导航。
页内导航
可以用nav元素实现页内导航，用来在本页面几个主要组成部分之间跳转。
翻页操作
nav元素可以用在多个页面的前后页或博客网站的前后篇文章的滚动中。
除此之外，nav元素也可以用在其他所有你觉得重要的、基本的导航链接组中。
注意，在HTML 5中不要用menu元素代替nav元素。过去很多Web应用程序的开发人员喜欢用menu元素进行导航，有必要再次强调的是，menu元素是被用在一系列发出命令的菜单上的，是一种交互性的元素，或者更确切地说是使用在Web应用程序中的。
3.1.4 aside元素
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside元素主要有以下两种使用方法。
1）包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
这部分代码如代码清单3-8所示。
代码清单3-8 文章内部的aside元素示例
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>aside元素示例</title>
</head>
<body>
<header>
<h1>F#入门</h1>
</header>
<article>
<h1>第四节 词法闭包</h1>
<p>lambda表达式可以创建词法闭包...(文章正文)</p>
<aside>
<!-- 因为这个aside元素被放置在一个article元素内部,
所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->
<h1>名词解释</h1>
<dl>
<dt>F#</dt>
<dd>F#为.Net2010中引入的新型函数型编程语言</dd>
</dl>
<dl>
<dt>词法闭包</dt>
<dd>词法闭包是指,将创建lambda表达式时的环境保存起来...(详细解释)</dd>
</dl>
</aside>
</article>
</body>程序运行结果如图3-1所示。
这是笔者博客网页中的一篇文章，网页的标题放在header元素中，在header元素的后面将所有关于文章的部分放在一个article元素中，将文章的正文部分放在一个p元素中，但是该文章还有一个名词解释的附属部分，用来解释该文章中的一些名词，因此，在p元素的下部又放置了一个aside元素，用来存放名词解释部分的内容。
2）在article之外元素使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。
下面这个示例为标准博客网页中一个侧边栏的示例，示例中的“IT新技术”为博客的名称，如代码清单3-9所示。
代码清单3-9 侧边栏示例
<aside>
<nav>
<h2>评论</h2>
<ul>
<li>
<a href="http:// blog.sina.com.cn/1683">erway</a> 10-24 14:25
</li>
<li>
<a href="http:// blog.sina.com.cn/u/1345">太阳雨</a> 10-22 23:48<br/>
<a href="http:// blog.sina.com.cn/s/blog_6a9kv8f.html#comment">
顶,拜读一下老牛的文章
</a>
</li>
<li>
<a href="http:// blog.sina.com.cn/u/1259295385">新浪官博</a>
08-12 08:50<br/>
<a href="#">恭喜！您已经成功开通了博客</a>
</li>
</ul>
</nav>
</aside>如果对这部分也加上CSS样式，在浏览器中的显示效果如
图3-2所示。
该示例为一个典型的博客网站中的侧边栏部分，因此被放在aside元素中，但是该侧边栏又具有导航的作用，因此被放置在nav元素中，该侧边栏的标题是“评论”，被放在h2元素中，在标题之后使用一个ul列表，用来存放具体的导航链接。
3.1.5 time元素与微格式
首先来说一下微格式，它是一种利用HTML的class属性来对网页添加诸如新闻事件发生的日期和时间、个人电话号码、企业邮箱之类的附加信息的方法。
微格式并不是在HTML 5之后才有的，在HTML 5之前它就和HTML结合使用了，但是使用过程中在日期和时间的机器编码上出现了一些问题，编码过程中会产生一些歧义。HTML 5增加了一种新的元素来无歧义地、明确地对机器编码日期和时间，并且以让人易读的方式来展现。这个元素就是time元素。
time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间，如下所示。
<time datetime="2010-11-13">2010年11月13日</time>
<time datetime="2010-11-13">11月13日</time>
<time datetime="2010-11-13">我的生日</time>
<time datetime="2010-11-13T20:00">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00Z">我生日的晚上8点</time>
<time datetime="2010-11-13T20:00+09:00">我生日的晚上8点的美国时间</time>在编码时机器读到的部分在datetime属性里，而元素的开始标记与结束标记中间的部分显示在网页上。datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间。注意倒数第二行，时间加上Z字母表示对机器编码时使用UTC标准时间，倒数第一行则加上了时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
3.1.6 pubdate属性
putdate属性是一个可选的boolean值的属性，它可以被应用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的内容）或整个网页的发布日期，putdate属性的具体使用方法如代码清单3-10所示。
代码清单3-10 putdate与time结合使用（一）
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2010-10-29" pubdate>2010年10月29日</time>
</p>
</header>
<p>苹果,植物类水果,多次花果...("苹果"文章正文)</p>
...
</article>你也许会疑惑为什么需要用到pubdate属性，为什么不能认为time元素就直接表示了文章或网页的发布日期呢？来看代码清单3-11。
代码清单3-11 putdate与time结合使用（二）
<article>
<header>
<h1>关于<time datetime=2010-10-29>10月29日</time>的舞会通知</h1>
<p>发布日期:
<time datetime=2010-10-11 pubdate>2010年10月11日</time>
</p>
</header>
<p>大家好:我是法律系3年级学生代表,......(关于舞会的通知)</p>
</article>这个示例中有两个time元素，分别定义了两个日期——一个是舞会日期，另一个是通知发布日期。由于都使用了time元素，所以需要使用pubdate属性表明哪个time元素代表通知的发布日期。
