本節書摘來自異步社群《html5 開發執行個體大全》一書中的第1章，第1.30節,作者： 張明星 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
執行個體說明
在html 5 中， < section >表示一段專題性的内容，一般會帶有标題。< section >應用的典型場景有文章的章節、标簽對話框中的标簽頁、或者論文中有編号的部分。一個網站的首頁可以分成簡介、新聞和聯系資訊等幾部分。< section >不僅僅是一個普通的容器标簽。當一個标簽隻是為了樣式化或者友善腳本使用時，應該使用 div 。一般來說，當元素内容明确地出現在文檔大綱中時，< section >就是适用的。
< article >是一個特殊的< section >标簽，它比< section >具有更明确的語義，它代表一個獨立的、完整的相關内容塊。一般來說，< article >會有标題部分(通常包含在 header 内)，有時也會包含 footer 。雖然< section >也是帶有主題性的一塊内容，但是無論從結構上還是内容上來說，< article >本身就是獨立的、完整的。當< article >内嵌< article >時，原則上來說，内部的< article >的内容是和外層的< article >内容是相關的。例如，在一篇部落格文章中，包含使用者送出的評論的< article >就應該嵌套在包含部落格文章< article >之中。問題是怎麼才算“完整的獨立内容”？有一個最簡單的判斷方法是，看這段内容在 rss feed 中是不是完整的；看這段内容脫離了所在的語境，是否還是完整的、獨立的。
具體實作
使用dreamweaver建立一個名為“030.html”的檔案，具體代碼如下所示：
執行之後的效果如圖1-51所示。
由上述執行效果可知，在html 5中，< div >、< section >、< article >，語義是從無到有，逐漸增強的。< div >無任何語義，僅僅用作樣式化或者腳本化的鈎子(hook)，對于一段主題性的内容，則就适用< section >，而假如這段内容可以脫離上下文，作為完整的獨立存在的一段内容，則就适用< article >。原則上來說，能使用< article > 的時候，也是可以使用< section >的，但是實際上，假如使用< article >更合适，那麼就不要使用< section >。< nav >和< aside >的使用也是如此，這兩個标簽也是特殊的< section >，在使用< nav >和< aside >更合适的情況下，也不要使用< section >了。
< div >和< section >、< article >以及其他标簽的區分比較簡單。< section >和< article >的區分初看比較難，其實重點就是看看這段内容脫離了整體是不是還能作為一個完整的、獨立的内容而存在，這裡面的重點就在完整上。因為< section >包含的内容也能算作獨立的一塊，但是，它隻能算是組成整體的一部分，< article >才是一個完整的整體。