HTML5新元素section和article的区别详解

HTML5带出了一系列新元素，而且将在将来被普遍应用。然而，有一些元素在使用时易被混淆，包括如下两个新元素：<article>和<section>。

在问答网站常常能够看到别人问：在什么状况下咱们应该使用这些元素？咱们应该如何正确的使用这些元素？<article>和<section>有什么区别？

鉴于以上的这些问题，E良师益友网为你们讲解一下<article>和<section>的区别：

1、Article元素

从名字上，它已经很好的诠释了本身，可是咱们仍要看看官方文档上是如何描述它的：

“在文档，页面，应用或是站点上的一个独立部分，而且大致上，是可独立分配，或是重复使用的，例如在发布时。这个能够是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其余独立项目的内容。”

从上描述中，咱们能够总结出<article>元素专用于结构化文章，特别是咱们要发布的，例如博客，页面内容或是论坛帖子。

如下例子给出了如何使用<article>构建一个博客文章。

<article class="post"> 
    <header> 
    <h1>This is Blog Post Title</h1> 
    <div class="post-meta"> 
        <ul> 
            <li class="author">Author Name</li> 
            <li class="categories">Save in Categories</li> 
        </ul> 
    </div> 
    </header> 
 
    <div class="post-content"> 
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.  
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat  
        cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies  
        halvah gummies danish biscuit applicake gingerbread jelly-o pastry. 
    </div> 
 
</article>

此外，<article>元素还可与section元素结合，须要的时候，可使用<section>元素将文章分为几个段落，以下例所示。

<article class="post"> 
    <header> 
    <h1>This is Blog Post Title</h1> 
    <div class="post-meta"> 
        <ul> 
            <li class="author">Author Name</li> 
            <li class="categories">Save in Categories</li> 
        </ul> 
    </div> 
    </header> 
 
    <div class="post-content"> 
        <section> 
        <h2>This is the Sub-Heading</h2> 
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.  
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake  
        tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah  
        gummies danish biscuit applicake gingerbread jelly-o pastry. 
        </section> 
 
        <section> 
        <h3>This is another Sub-Heading</h3> 
        Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops 
        toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate 
        cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.  
        Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry. 
        </section> 
    </div> 
 
</article>

2、Section元素

这是一个最容易产生歧义的元素。它与<div>元素有什么区别？咱们一直在用<div>来划分段落，因此除了<div>,咱们何时使用这个元素。咱们引用官方文档来阐述它。根据WHATWG文档，对<section>元素作了如下描述：

“<section>元素表示了一篇文档或应用中，通用段落 – WHATWG”

从描述中咱们能够看出<section>元素的做用就是分段，或多或少相似于<div>。可是它仍有一个特例。在文档中，加入了一段特别声明：

“当一个元素仅用于风格样式或是为了脚本的方便，咱们鼓励做者使用<div>。<section>元素适用于，当元素的内容须要明确的列出时。- WHATWG”

基于这一点，咱们能够总结如下两点：

尽管section元素在技术上是能够设计样式的，可是当有复杂的样式或脚本时，咱们仍建议使用div元素。

相似于<li>元素，section元素是用来列举内容的。

所以在现实例子中，使用<section>元素的缘由是结构化的列出博客的内容，代码以下：

<div class="blog"> 
    <section class="post"> 
        <h2 class="post-title">Blog Post Title</h2> 
        <p class="post-excerpt">Ice cream tart powder jelly-o.  
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 
    </section> 
    <section class="post"> 
        <h2 class="post-title">Blog Post Title</h2> 
        <p class="post-excerpt">Ice cream tart powder jelly-o.  
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 
    </section> 
    <section class="post"> 
        <h2 class="post-title">Blog Post Title</h2> 
        <p class="post-excerpt">Ice cream tart powder jelly-o.  
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> 
    </section> 
</div>

这只是个例子，<section>元素也能够用做其余用途。

总结

如万维网的创始人和W3C的董事所预测的那般，全部HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间，仍存有争论。