HTML5 新标签: <article>

Article和Section区

你设计的页面包含了一个Article区，该区域存放了页面的实际内容。你使用< article>标签来创建这一区域，该标签定义的内容可独立于页面中的其他内容使用。例如，如果想创建一个RSS源(RSS feed)的话，那么你可以使用<article>来唯一标识该内容。<article>标签标识了可被删除、可被放置在另一上下文中，并且是可被完全理解的内容。

Acme United规划中的Article区包含了三个Section区，可使用<setction>标签来创建这几个区域。<section>包含了web内容的相关组件区域，<section>标签——以及<article>标签——可以包含页眉、页脚，或是其他需要用来完成该部分内容的组件。< section>标签用于分组的内容，<section>标签和<article>标签通常以一个<header>为开始并以一个<footer>结束，标签的内容则放在这两者之间。

<section>标签也可以包含<article>标签，就像<article>标签可以包含<section>标签一样。<section>标签应该用来分组相类似的信息，而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。

<article>和<section>标签的用法例子请参见清单4。

继续上期的“HTML5+CSS3 综合实战 I (3) 页面代码”话题，这次来具体了解一下每个页面组件的代码及最终整合。

首先是头部；根据W3C的定义规范：

header元素用来呈现一组具有介绍或导航性质的元素。

根据设计图，在我们的实战页面中，头部包括站点名称，站点描述以及全局导航；所以使用<header>标签完全符合逻辑。另外，我们要在<header>中使用<nav>来做全局导航；根据W3C的定义规范：

nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。

接下来我们结合着局部设计图，来看看<header>部分的详细代码：

根据W3C的最新定义规范：

section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成...但section元素标签并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

下面的代码展示了一个最简单并且典型的section：

HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。

一直以来，我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标签中：