1.3.2　课堂案例——使用section元素

section元素用于对网站页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素也并非一个普通的容器元素，当一个容器需要被重新定义样式或者定义脚本行为的时候，还是推荐使用Div控制。

下面是一个带有section元素的例子。

<article>
   <h1>李白</h1> 
   <p>字太白，号青莲居士，唐代伟大的浪漫主义诗人，被后人誉为诗仙。李白存世诗文千余篇，有《李太白集》
传世。</p>
  <section> 
     <h3>望庐山瀑布</h3> 
     <p>日照香炉生紫烟，遥看瀑布挂前川。<br>
     飞流直下三千尺，疑是银河落九天。</p> 
  </section>    
  <section> 
     <h3>早发白帝城</h3>      
     <p>朝辞白帝彩云间，千里江陵一日还。<br>
     两岸猿声啼不住，轻舟已过万重山。</p>
  </section>
</article>

从上面的代码可以看出，网页整体呈现的是一段完整、独立的内容，所以要用article元素包起来，这其中又可分为3段，每一段都有一个独立的标题，使用了两个section元素为其分段，这样可以使文档的结构更清晰。在浏览器中的效果如图1.7所示。

article元素和section元素有什么区别呢？在HTML5中，article元素可以看成是一种特殊种类的section元素，它比section元素更强调独立性，即section元素强调分段或分块，而article元素强调独立性。当一块内容相对来说比较独立、完整的时候，应该使用article元素；但是当想将一块内容分成几段的时候，应该使用section元素。

图1.7 带有section元素的article元素示例