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轮廓工具的网址为“http://gsnedders.html 5.org/outliner/”，如果使用该工具进行检查后，发现某个section的说明中有“untieled 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元素的使用禁忌总结如下：

1）不要将section元素用作设置样式的页面容器，那是div元素的工作。

2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。

3）不要为没有标题的内容区块使用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="#HTML 5">HTML 5的历史</a></li>
                <li><a href="#CSS 3">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元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。

请注意：在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所示。

图3-1 aside元素示例

这是笔者博客网页中的一篇文章，网页的标题放在了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-2 用aside元素实现的侧边栏示例

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属性

pubdate属性是一个可选的、boolean值的属性，它可以用到article元素中的time元素上，意思是time元素代表了文章（artilce元素的内容）或整个网页的发布日期，pubdate属性的具体使用方法如代码清单3-10所示。

代码清单3-10 pubdate与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 pubdate与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元素代表了通知的发布日期。