《HTML 5与CSS 3 权威指南（第4版·上册）》 —3.1.2　section元素

3.1.2　section元素

section元素用来对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

我们可以这样理解：section元素中的内容可以单独存储到数据库中或输出到word文档中。以下为它的一个示例（注意，标题部分位于它的内部，而不是它的前面），如代码清单3-4所示。

代码清单3-4　section元素示例

通常不推荐为那些没有标题的内容使用section，可以使用HTML 5轮廓工具来检查页面中是否有不包含标题部分的section，HTML 5轮廓工具的网址为“http://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元素示例

代码清单3-5中的内容首先是一段独立的、完整的内容，因此使用article元素。该内容是一篇关于苹果的文章，该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素。记住，对文章分段的工作也是使用section元素完成的。这里有人会问，为什么没有对第一段使用section元素，其实是可以使用section元素的，但是由于这里的结构比较清晰，分析器是可以识别第一段内容在一个section元素里的，所以也可以将第一个section元素略去不写，但是如果第一个section元素里还要包含子section元素或子article元素，那么必须写明第一个section元素。

接下来看一个包含article元素的section元素的示例，如代码清单3-6所示。

代码清单3-6　包含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元素。