section元素是對網站或應用程序中頁面上的內容進行分塊，一個section元素通常有標題和內容組成。但section元素並非一個普通的容器元素，當一個容器需要直接定義樣式或通過腳本定義行為時，推薦使用div元素而非section元素。我們可以這樣理解：section元素中的內容可以直單獨存儲到數據庫中或輸出到word文檔中。

section元素的作用是對頁面上的內容進行分塊，或者對文章進行分段，不要將它與表示著"有著自己的完整的、獨立的內容"的article元素混淆。

下面是一個帶有section元素的article元素的代碼事例：

<article>
    <h1>標題</h1>
    <p>蘋果，植物類水果</p>
    <section>
        <h2>紅富士</h2>
        <p>紅富士是從普通富士的芽變中選育出的</p>
    </section>
    <section>
        <h2>國光</h2>
        <p>國光蘋果品，又名小國光、萬壽。</p>
    </section>
</article>

上面的代碼首先是一段獨立的、完整的內容，因此使用article元素。每一段都有一個標題，因此使用了兩個section元素，但有人會問，為什麽第一段沒有使用section呢，其實這裏是可以使用section元素的，但是由於這裏的結構比較清晰，分析器是可以識別第一段內容是在section元素裏的，所以可以將第一個section元素省略。但如果第一個section元素裏要包含子section元素或子article元素，那麽必須寫明第一個section元素。

接下來看一個包含section和article元素的section代碼事例：

<section>
    <h1>水果</h1>
    <article>
        <h2>蘋果</h2>
        <p>蘋果，植物類水果，多次花果</p>
    </article>
    <article>
        <h2>橘子</h2>
        <p>橘子，是蕓香科柑橘屬的一種水果。。。</p>
    </article>
</section>

這個事例比前一個事例復雜了一些，首先他是文章的一段，因此沒有使用article元素，但是在這一段中，每一段都是獨立的內容，所以使用article元素。article元素可以看成一種特殊種類的section元素，他比section元素更強調內容的獨立性。如果將一塊內容分成幾段的時候用section元素。

section元素與div、article元素的區別