HTML 5与CSS 3权威指南：section元素

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轮廓工具的网址为"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元素。