3.10　定义区块

3.10　定义区块

article元素有一个语义性弱一些的“近亲”元素——section，它也是HTML5的新元素。

HTML5对该元素的定义如下。

section元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题，如图3.10.1所示。

section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。

article和section元素极为相似。如果对如何区分这两个元素仍存疑惑，参见“如何在article和section中作出选择”。

定义区块的步骤

输入
。
输入区块的内容。内容可以包含任意数量的元素。元素类型包括段落、列表、音频、视频、图像、图形等。
输入。

提示　正如你在3.4节中学到的，section是四个分块内容元素中的一个，另外三个是nav、article和aside。

提示　默认情况下，你在查看页面时无法看到应用section后的变化（article也是这样），不过重要的是在文档中使用这些元素可以增强语义性，参见图3.10.2。当然，你可以使用CSS对section和article元素添加样式。

...
<body>
<header>
     <nav role="navigation">
        ... [包含链接的ul] ...
     </nav>
</header>
 
<article>
     <h1 id="gaudi">Barcelona's Architect</h1>
 
     <p>Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p>
 
     ... [另一个介绍性段落] ...
 
     <section>
       <h2 id="sagrada-familia" lang="es">La Sagrada Família</h2>
 
       <p><img src="img/towers.jpg" width="75" height="100" alt= "Sagrada Família Towers" /> The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. The Sagrada Família attracts even the non-religious to its doors in large part due to its tragic story and its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders.</p>
     </section>
 
     <section>
       <h2 id="park-guell">Park Guell</h2>
 
       ... [另一个图像和段落] ...
     </section>
</article>
</body>
</html>

图3.10.1　这段代码与前面的代码相比，只是对article中介绍文字后面两个部分分别用了一个section包起来，其他部分完全相同。为了简洁，我再次对代码进行了缩写

提示　记住，section不是一个像div一样的通用容器，因为section表达一定的含义，而div则没有任何语义上的含义（参见3.13节）。

提示　本章有好几个例子可以帮助你理解如何（以不同的方式）使用article和section。

提示　要了解在哪种情况下可对section使用role="main"，参见3.14节。

3.10　定义区块 - 图1

图3.10.2　现在，页面有了header、nav、article和section元素，以及它们各自的内容。添加section元素之后，默认的显示效果不会发生改变

如何在article和section中作出选择

我特意引用了HTML5对section和article的定义（参见3.9节）帮助你理解它们的区别，因为它们的区别有时很细微。不妨这样考虑：你的内容是适合用做聚合的一块独立的内容或一个小组件吗？如果是，就使用article（否则，在大多数情况下，使用section；另参见3.13节了解什么时候用div代替）。这并不意味着你必须聚合或分发article内容，只是其内容适合这样做。

如果你仍然觉得article和section有时看起来很相似，另担心，不只你自己有这种感觉，即便是经验丰富的开发人员有时也会将这两个元素用错。

正如我在第1章提到过的，对内容进行标记时，并非总能分出对和错，只是大多数时候有正确的选择。而其他时候，就只能依靠个人对最适合描述内容的HTML元素的感觉了。

在article和section之间作选择时，一定要仔细考虑，不过也不必每次都对是否用对感到担心。有时，些许主观并不会影响页面正常工作。而且，也不会有人半夜来敲你的门。

哦，我可能会，不过这只是因为外面很黑，很吓人。

没有article的section示例

目前你已见过几个嵌套在article里面的section的例子，参见图3.10.1。但那只是该元素的一种用法。

下面的例子来自HTML5的规范（略有改动）。在这个例子中，你会看到没有article的section的应用。（你还会提前看到有序列表的应用。第15章会讲到ol和其他的列表元素。）
…
<body>
 <h1>graduation program</h1>
 
 <section>
    <h2>Ceremony</h2>
    <ol>
       <li>Opening Procession</li>
       <li>Speech by Valedictorian</li>
       <li>Speech by Class President</li>
       <li>Presentation of Diplomas</li>
       <li>Closing Speech by Headmaster</li>
    </ol>
 </section>
 
 <section>
    <h2>Graduates (alphabetical)</h2>
    <ol>
       <li>Molly Carpenter</li>
       <li>Anastasia Luccio</li>
       <li>Ebenezar McCoy</li>
       <li>Karrin Murphy</li>
       <li>Thomas Raith</li>
       <li>Susan Rodriguez</li>
    </ol>
 </section>
</body>
</html>

3.10 定义区块