HTML5 新标签: <section>

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。

1.不要使用section作为div的替代品

人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码：

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

而现在在HTML5中，会是这样：

根据W3C的最新定义规范：

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

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