你如何理解 HTML5 的 section？會在什麼場景使用？為什麼這些場景使用 section 而不是 div？

01-14

HTML標準是這樣寫的：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site"s home page could be split into sections for an introduction, news items, and contact information.

Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element"s contents would be listed explicitly in the document"s outline.

意譯如下（【】裡面是我的註解）：

section元素表示文檔或應用的一個部分。所謂「部分」，這裡是指按照主題分組的內容區域，通常會帶有標題。【也就是每個section對應不同的主題。注意是內容本身的主題，而不是其他人為設定的劃分標準。】

section的例子包括書的章節回目、多tab對話框的每個tab頁、論文以數字編號的小節。網站的主頁可能分成介紹、最新內容、聯繫信息等section。

注意：網頁作者應使用article而不是section元素，如果其內容是用於聚合（syndicate）。【比如blog首頁上的每篇blog。又如論壇帖子的一樓、二樓、三樓……n樓。通常這樣的每部分內容形式上是類似的，但是來源是獨立的。】

注意：section不是通用容器元素。如果僅僅是用於設置樣式或腳本處理，應用div元素。一條簡單的準則是，只有元素內容會被列在文檔大綱中時，才適合用section元素。

規範的說明文檔中有一段非常重要的描述：

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element"s contents would be listed explicitly in the document"s outline.

更詳細的在這裡：http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

至於何時使用，基本上可以這兩點：

section 不是一個專用來做容器的標籤，專用的是 div
section 里應該有標題（h1~6），但文章中推薦用 article 來代替

我們可以理解為一個非文章段落，有明確 id 的一個特殊模塊容器（不是專用以包住塊的容器）。

一個section通常由內容和標題組成，通常不推薦那些沒有標題的內容用section，在HTML 5 Outliner這個網站可以檢測沒有標題的section，section的作用是對頁面上的內容進行分塊，如各個有標題的版塊、功能區或對文章進行分段，不要與有自己完整、獨立內容的article混淆。

拿報紙舉個例子：

一份或一張報紙有很多個版塊，有頭版、國際時事版塊、體育版塊、娛樂版塊、文學版塊等等，像這種有版塊標題的、內容屬於一類的版塊就可以用section包起來。

然後在各個版塊下面，又有很多文章、報道，每篇文章都有自己的文章標題、文章內容。這個時候用article就最好。如果一篇報道太長，分好多段，每段都有自己的小標題，這時候又可以用section把段落包起來。

雖然這些標籤有這個有那個的限制，官方規範建議也是模模糊糊的，但是不要忘記了html5語義化標籤的意義，其中一個就是更方便開發人員閱讀代碼文檔，理清代碼結構。個人覺得，如果能方便自己和他人閱讀理解的標籤，那就大膽用吧。

最後，覺得造成大家標籤選擇困難症的原因其實也跟html5語義化結構標籤太少有關，如果添加更多，更加細分、網頁常用、功能專用的標籤，像評論部分增加comment標籤，友情鏈接增加link標籤，分頁增加paging標籤，作者信息增加author標籤等等，就不會糾結遇到相似功能的標籤到底用那個好了，div就不用思考這個，一棍子打下去全中，呵呵。

section，顧名思義就是一個章節，比如：

&WWF&

The World Wide Fund for Nature (WWF) is....&

至於為什麼要用，是為了語義化，有section、article、dl看這多舒服，人也好理解，計算機也好理解，比滿眼的div好多了。

我更喜歡把section用作區分一個功能塊或者代碼塊的標籤~其實只是為了代碼的結構性好一些

&導航&

&頁面主要區域的頂部&

&文章1&

內容1&

&文章2&

文章2&

&頁面主要區域底部信息&

廣告?

熱點新聞連接?

&頁面底部區域&

section是頁面的主要內容.我認為設計些標籤是為了搜索引擎考慮.因為瀏覽網頁,就是為了獲取頁面的主要內容的.其他的信息都是為主要內容服務的.

語義化標籤我認為用途在於：劃分文檔的大綱。而`div`和`span`之類的無語義化標籤，應當在設置額外樣式或者腳本處理時使用。我的原則是：先書寫文檔大綱標籤，構建整體頁面，而不考慮樣式部分；之後書寫樣式時，在考慮如何設置無語義標籤。

* `section`標籤，應當在有標題和內容的時候使用，這是一個前提；這個標籤的中文翻譯為`區域`，它是為劃分一個個區塊使用的，每個區塊有著不同的功能，這一點很重要；另外，就是如果`header`、`footer`、`asid`e或`article`在語義上更加適合你的內容，則不要使用section。

* `article`標籤，字面翻譯為`文章`，代表它是一個獨立的整體，具有標題和內容，它和`section`標籤不同之處在於僅僅代表文章而不是功能區塊，比如一個評論使用哪個來作為語義化標籤呢？首先它並不是一個功能區塊，評論也可以理解為一個文章，因為有不同的人書寫，各自獨立，應當使用`article`標籤。`article`標籤要比`section`標籤更加語義化，只為`獨立`和`文章`而生。

* `header`、`aside`、`footer`比`section`標籤更加語義化，所以上文說可以使用這些標籤的時候就要用它們去代替`section`標籤。

* `header`標籤，區塊的頂部（最大的區塊就是頁面）。

* `aside`標籤，區塊的側邊欄或者嵌入內容，[RFC](https://www.w3.org/TR/html5/sections.html#the-aside-element)可以幫助更好的理解；[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside)上這樣解釋：

&> `&`元素表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。其通常表現為側邊欄或者嵌入內容。

* `footer`標籤，區塊的底部。

* `h1`到`h6`標題標籤，原先認為是在一個頁面中只能有一個`h1`，現在卻是每個區塊中都可以包含所有標題標籤，它在一個文章中的用法我認為如下：

* 首先有一個`article`標籤表示這個文章。

* 裡面有一個`header`標籤，這時`header`標籤里標題應該代表整個文章，而不是這個`頂部區塊`的內容，為什麼？因為`article`標籤必須要有一個標題，而`header`標籤上方可以放一個標題嗎？我認為不行，`header`應當是一個區塊的第一個標籤。這個標題的級別呢？看[W3C RFC](https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements)發現可以從一級標題開始，那麼是否可以這樣認為：每個區塊是一個各自獨立的部分，所以標題的使用應當按照這個區塊來呢？還是認為整個頁面是一個最大區塊，按照這個最大的區塊來書寫標題標籤呢？我覺得各憑喜好，因為文檔上都有這兩種寫法。

* 這時裡面有一個功能需要區分開來使用`section`標籤，那麼這裡面的標題標籤級別是什麼呢？按照上文分析：

* 把頁面當作整體來看，使用`h3`標籤（因為`header`也會使用`h2`標籤）。

* 從各自獨立的區塊看，使用`h1`標籤。

* 另外，不要兩種情況混用，會越用越亂的！

* 最後有一個`footer`標籤，裡面如果有標題也應當按照`section`標籤的討論一樣書寫。這時有疑問？`header`標籤為什麼沒有這樣做呢？還是上文討論的那樣`article`需要標題，所以對於按照各自獨立的區塊劃分就需要特殊一些。

PS：上面是我的粗淺理解，還是有很多不足的，今天看 `W3C` 的文檔，發現它其實已經寫的很清楚了。

一些補充說明：

不要簡單地將section用作樣式化鉤子。將div和span用作該目的。
如果header、footer、aside或article在語義上更加適合你的內容，則不要使用section
不要使用section，除非它自身有一個標題

引自《HTML5經典實例》by O"REILLy

語義化嘛，怎麼清楚怎麼來。

個人理解(非專業)：

1. html5 的新增標籤，主要是讓html代碼更加規範化語義化。

2. 標籤嵌套本身沒有限制。但是嵌套多了，就又回到以前div那樣無語義的時代。

3. 不是說html5之後就不推薦用div 。 div 照用，只是有些div 可以使用section來替換，使之代碼結構更合理。

3. section 盡量平坦化(控制在一層)，類似p 標籤的使用規則。有章節(正好是section的中文翻譯)和區域的概念。嵌套神嘛的最討厭了。

4. article 標籤是頁面主內容的容器。頁面上可以多 article 。

5. header 可以有多個。如嵌套在article 里作為 article 的header 見這裡：http://www.w3schools.com/html5/tag_header.asp

5. 疑點：是否可以在article 里嵌套 section 作為一篇大文章中的章節部分。(說法正確，但是似乎主流富文本編輯器里還沒有section 標籤插入口。 ) 所以推測 section 在目前html5中。主要將頁面劃分成各個功能主題區塊的作用。

6. 任何一個section ， article 等具有 "沙箱模型" 的容器里都可以包含 h1~ h6。

待完善·

區別與div常常用作容器鉤子，section主要用作一整個區塊分離，每一個section都是一個整體，裡面可以用獨立的header、aside、article、footer

html5希望更多開發者理解html的語義化所以有了section和很多新標籤 section即章節在需要語義的地方用就是了不過現在大部分網頁都用的div 很少有人重視語義