思洋互动网站建设学前班

使用HTML 5大纲（4）

“Vital caveat about the information above”（以上信息是重要警告），指的是整个文章，即介绍性的<h1>以下的所有内容；还是说它只是指打头的<h2>（“Fan Club uniforms”）以下的信息？在HTML 4中，该段落会是<h2>下面的内容，要从语义上改变这点很不容易。在HTML 5中，<section>元素可以使其含义明确（这也是作为Web开发者的我们使用单词“语义”时所表示的真正的意思）：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. <article> 
2. <h1>Rules for Munchkins</h1> 
3.  
4.  <section> 
5.   <h2>Yellow Brick Road</h2> 
6.   <p>It is vital that Dorothy follows it-so no selling  
7.    bricks as "souvenirs"</p> 
8.  </section> 
9.  
10. <section> 
11.  <h2>Fan Club uniforms</h2> 
12.   <p>All Munchkins are obliged to wear their "I'm a friend  
13.   of Dorothy!" t-shirt when representing the club</p> 
14.  </section> 
15.  
16.  <p><strong>Vital caveat about the information above:  
17.   does not apply on the first Thursday of the month.  
18.   </strong></p> 
19. </article> 

图2.10形象地说明了这一点。

1. <article> 
2. ...  
3. <section> 
4.   <h2>Fan Club uniforms</h2> 
5.   <p>All Munchkins are obliged to wear their "I'm a friend  
6.    of Dorothy!" t-shirt when representing the club</p> 
7.   <p><strong>Vital caveat about the information above:  
8.    does not apply on the first Thursday of the month  
9.    </strong></p> 
10.   </section> 
11. </article> 

它明确地只是引用该节，如图2.11所示。
广州网站建设,网站建设,广州网页设计,广州网站设计

使用嵌套的article元素，无法像这样正确地划分这篇文章，因为它们不是独立的、离散的实体。

现在我们看到了可以让<article>位于<article>之中，让<section>位于<section>之中。但是也可以让<article>位于<section>之中。这究竟是什么呢？

位于<section>中的<article>

假想你的内容区域划分为两个部分，一部分是关于骆驼的文章，其他是关于根茎类蔬菜的文章。这是我喜欢的内容。

你不想分别标记骆驼的文章和根茎类蔬菜的文章，但是你想要表现出它们是不同的话题。当然由于它们是不同的话题，你希望它们位于不同的栏中，或者你将使用CSS和JavaScript来制作一个标签页界面。

在HTML 4中，你将使用无含义的朋友<div>。在HTML 5中，将使用<section>，它像<article>一样，调用HTML 5大纲算法（而<div>则不会，因为它没有特殊的结构化含义）。

1. <section> 
2. <h1>Articles about llamas</h1> 
3.  
4. <article> 
5. <h2>The daily llama: buddhism and South American camelids  
6.  </h2> 
7. <p>blah blah</p> 
8. </article> 
9.  
10. <article> 
11. <h2>Shh! Do not alarm a llama</h2> 
12. <p>blah blah</p> 
13. </article> 
14.  
15. </section> 
16.  
17. <section> 
18. <h1>Articles about root vegetables</h1> 
19.  
20. <article> 
21. <h2>Carrots: the orange miracle</h2> 
22. <p>blah blah</p> 
23. </article> 
24.  
25. <article> 
26. <h2>Eat more Swedes (the vegetables, not the people)</h2> 
27. <p>blah blah</p> 
28. </article> 
29.  
30. </section>