HTML5語義化標記Section和Article怎么用

小編給大家分享一下HTML5語義化標記Section和Article怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Section元素

這 是一個最容易產生歧義的元素。它與<p>元素有什么區別？我們一直在用<p>來劃分段落，所以除 了<p>,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據WHATWG文檔，對<section>元素做了以下 描述：

“<section>元素表示了一篇文檔或應用中，通用段落 - WHATWG”

從描述中我們可以看出<section>元素的作用就是分段，或多或少類似于<p>。但是它仍有一個特例。在文檔中，加入了一段特別聲明：

“當一個元素僅用于風格樣式或是為了腳本的方便，我們鼓勵作者使用<p>。<section>元素適用于，當元素的內容需要明確的列出時。- WHATWG”

基于這一點，我們可以總結以下兩點：

第一，盡管section元素在技術上是可以設計樣式的，但是當有復雜的樣式或腳本時，我們仍建議使用p元素。

第二，類似于<li>元素，section元素是用來列舉內容的。

因此在現實例子中，使用<section>元素的原因是結構化的列出博客的內容，代碼如下：

<p class="blog">  
    <section class="post">  
        <h3 class="post-title">Blog Post Title</h3>  
        <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">  
        <h3 class="post-title">Blog Post Title</h3>  
        <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">  
        <h3 class="post-title">Blog Post Title</h3>  
        <p class="post-excerpt">Ice cream tart powder jelly-o.   
        Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>  
    </section>  
</p>

這只是個例子，<section>元素也可以用作其他用途。

Article元素

從名字上，它已經很好的詮釋了自己，但是我們仍要看看官方文檔上是如何描述它的：

“在文檔，頁面，應用或是站點上的一個獨立部分，并且大體上，是可獨立分配，或是重復使用的，例如在發布時。這個可以是論壇帖子，雜志或是新聞，博客條目，用戶提交的評論，互動的小工具或小工具，或任何其他獨立項目的內容。”

從上描述中，我們可以總結出<article>元素專用于結構化文章，特別是我們要發布的，例如博客，頁面內容或是論壇帖子。

以下例子給出了如何使用<article>構建一個博客文章。

<article class="post">  
    <header>  
    <h2>This is Blog Post Title</h2>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.   
        Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oatnbon. Gummies   
        halvah gummies danish biscuit applicak   
        cake tootsie roll sesame snaps lollipop gingerbread boe gingerbread jelly-o pastry.  
    </p>  

</article>

此外，<article>元素還可與section元素結合，需要的時候，可以使用<section>元素將文章分為幾個段落，如下例所示。

<article class="post">  
    <header>  
    <h2>This is Blog Post Title</h2>  
    <p class="post-meta">  
        <ul>  
            <li class="author">Author Name</li>  
            <li class="categories">Save in Categories</li>  
        </ul>  
    </p>  
    </header>  

    <p class="post-content">  
        <section>  
        <h3>This is the Sub-Heading</h3>  
        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>  
        <h4>This is another Sub-Heading</h4>  
        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>  
    </p>  

</article>

以上是“HTML5語義化標記Section和Article怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！