思洋互动网站建设学前班

使用HTML 5大纲（5）

为什么不把两个<section>写成<article>呢？因为在这个例子中，每个<section>都是独立的实体的一个集合，其中每个实体都可以聚合，但你通常不会想把集合聚合成一个单独的实体。

注意，一个<section>不需要包含太多的<article>，它可能是说明你的创新共用许可、作者简介或版权提示的段落的一个集合。在我们的例子中，每篇文章都包含一篇子文章或节，或者二者都包含，正如我们在前面所介绍的那样。

Estelle Weyl在www.standardista.com/html5-section-v-article给出了一个很好的类比：“想想一份报纸。报纸分成版块。有体育版块、房地产版块、家政服务版块，等等。每一个版块都包含文章，而这些文章又被划分成小节”。

换句话说，我们可以有父<section>，它带有嵌套的<article>，而<article>反过来又拥有一个或多个<section>。并非所有的页面文档都需要这些，但是以这种方式嵌套完全是可接受的并且是正确的。

案例学习：www.guardian.co.uk

让我们继续报纸的主题，来看看一个真正的站点，并且搞清楚为应该在哪里使用新的结构。图2.12给出了我最喜欢的报纸“The Guardian”（《卫报》）的站点www.guardian.co.uk。我们看看HTML 5如何来表示它。
广州网站建设,网站建设,广州网页设计,广州网站设计

注意，下面介绍如何标记这个页面，你可能会选择不同的结构，这也没问题。做这件事的时候，不一定“自古华山一条路”。一定程度上这取决于你打算如何使用内容，是想要聚合它，还是从一个数据库中提取出来，以不同的标题层级显示在几个不同的页面模板中？

很容易看到，品牌性和介绍性内容构成了<header>，它还包含两个<nav>结构，用于全站导航（如图2.13所示）。

在页眉之下，就是标题为“breaking news（重大新闻）”的区域，以及一个文本“播报器”。每一条摘要都是打开详细报道的一个链接（如图2.14所示）。

除了JavaScript控制的播报器效果，这个“breaking news”只不过是到其他页面的链接的一个列表。因此，它匹配于<nav>元素。它是水平的、标题也在同一行，但不要被这些现象欺骗了，CSS会识别出这点：

1. <nav> 
2. <h2>Breaking news</h2> 
3. <ul> 
4.  <li><a href=#>Four schoolchildren injured...</a></li> 
5.  <li><a href=#>Terrible thing happens to someone</a></li> 
6.  ...  
7. </ul> 
8. </nav> 

尽管这个区域看上去与页眉很接近，但是它不是介绍性内容或全站导航。差别是细微的，但是在我看来，到评论、TV和体育页面的链接是全站导航的一部分，到一个新闻站点的新闻报道的导航，只是指向深入内容的“快捷导航”。因此，这是位于<header>元素之后的一个<nav>，而不是位于其内的<nav>。

在主内容区域的右边，还有更多的导航（如图2.15所示）。