在H5新增加的語義元素，本來是幫助人們更好的理解代碼的，但是部分元素卻又引起了選擇困難砰碴，扮授，芳室，
HTML5 提供了新的語義元素來明確一個Web頁面的不同部分:
<header> <nav> <section> <article>? <aside> <figcaption> <figure><footer>
在這里讓人容易產(chǎn)生困惑的是<section>這個標(biāo)簽元素
<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）刹勃。比如章節(jié)堪侯、頁眉、頁腳或文檔中的其他部分荔仁。
注意：
section 不是一個專用來做容器的標(biāo)簽伍宦，如果僅僅是用于設(shè)置樣式或腳本處理，專用的是 div
section 里應(yīng)該有 標(biāo)題（h1~6）乏梁，但文章中推薦用 article 來代替
一條簡單的準(zhǔn)則是次洼，只有元素內(nèi)容會被列在文檔大綱中時，才適合用section元素遇骑。
section的作用是對頁面上的內(nèi)容進行分塊卖毁，如各個有標(biāo)題的版塊、功能區(qū)或?qū)ξ恼逻M行分段质蕉，不要與有自己完整势篡、獨立內(nèi)容的article混淆翩肌。
一個section通常由內(nèi)容和標(biāo)題組成，通常不推薦那些沒有標(biāo)題的內(nèi)容用section禁悠，在HTML 5 Outliner這個網(wǎng)站可以檢測沒有標(biāo)題的section念祭，section的作用是對頁面上的內(nèi)容進行分塊，如各個有標(biāo)題的版塊碍侦、功能區(qū)或?qū)ξ恼逻M行分段粱坤，不要與有自己完整、獨立內(nèi)容的article混淆瓷产。
<section>可以相互嵌套站玄，在頁面中定義了一個特殊的頂級區(qū)塊，于是可以從<h1>開始列提綱而不用擔(dān)心會破壞網(wǎng)頁的綱要濒旦。盡管沒找到明確說明株旷，但我個人認(rèn)為在每一層<section>里還是僅使用一個<h1>為佳。
以Wordpress主題為例尔邓，我認(rèn)為與#sidebar相對的#content部分晾剖，使用<section>包裹一堆<article>作為頁面的主要內(nèi)容并不太合適。而使用<section>用在整體布局是明顯錯誤的了梯嗽。而適合使用<section>標(biāo)簽的地方有：
文章的評論列表齿尽，有著整齊的結(jié)構(gòu)；
文章內(nèi)容的目錄灯节，有著文章內(nèi)部結(jié)構(gòu)綱要循头；
側(cè)欄widget，在WebDesignWall中我看到了這樣的設(shè)計炎疆，因為widget內(nèi)容大都是評論列表卡骂、文章列表，有著清晰的結(jié)構(gòu)且是獨立完整的一部分磷雇；
包裹文章中各個章節(jié)的段落偿警，但要在編輯器完成，目前來看并不易用唯笙。
拿報紙舉個例子：
一份或一張報紙有很多個版塊螟蒸，有頭版、國際時事版塊崩掘、體育版塊七嫌、娛樂版塊、文學(xué)版塊等等苞慢，像這種有版塊標(biāo)題的诵原、內(nèi)容屬于一類的版塊就可以用section包起來。
然后在各個版塊下面，又有很多文章绍赛、報道蔓纠，每篇文章都有自己的文章標(biāo)題、文章內(nèi)容吗蚌。這個時候用article就最好腿倚。如果一篇報道太長，分好多段蚯妇，每段都有自己的小標(biāo)題敷燎，這時候又可以用section把段落包起來。
雖然這些標(biāo)簽有這個有那個的限制箩言，官方規(guī)范建議也是模模糊糊的硬贯，但是不要忘記了html5語義化標(biāo)簽的意義，其中一個就是更方便開發(fā)人員閱讀代碼文檔陨收，理清代碼結(jié)構(gòu)饭豹。個人覺得，如果能方便自己和他人閱讀理解的標(biāo)簽畏吓，那就大膽用吧墨状。
最后卫漫，覺得造成大家標(biāo)簽選擇困難癥的原因其實也跟html5語義化結(jié)構(gòu)標(biāo)簽太少有關(guān)菲饼，如果添加更多，更加細(xì)分列赎、網(wǎng)頁常用宏悦、功能專用的標(biāo)簽，像評論部分增加comment標(biāo)簽包吝，友情鏈接增加link標(biāo)簽饼煞，分頁增加paging標(biāo)簽，作者信息增加author標(biāo)簽等等诗越，就不會糾結(jié)遇到相似功能的標(biāo)簽到底用那個好了砖瞧，div就不用思考這個，一棍子打下去全中嚷狞。
有了語義化块促，有section、article床未、dl看這多舒服竭翠，人也好理解，計算機也好理解薇搁，比滿眼的div好多了斋扰。
例如：
<section>
????????<h1>WWF</h1>
????????<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
div\section\article各自適用場景：
div充當(dāng)容器的角色，用來設(shè)置某一塊的總體屬性（一個div里面可能包含多個section）；
section用于強調(diào)某一個模塊传货，強調(diào)模塊本身是作為一個整體的屎鳍；
article用于強調(diào)某一段獨立的內(nèi)容，強調(diào)內(nèi)容的獨立性问裕。
