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創造出來的新元素都是爲了是網絡結構更加語義化。如何正確的應用這些元素在網絡開發者和設計者之間，仍存有爭論。