HTML5 Section详解-优快云博客

1.HTML标准中对section的解释

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.

2.注意点：

section 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是 div
section 里应该有标题（h1~6），但文章中推荐用 article 来代替
一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。
section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。

3.比较生动的比喻

拿报纸举个例子：
一份或一张报纸有很多个版块，有头版、国际时事版块、体育版块、娱乐版块、文学版块等等，像这种有版块标题的、内容属于一类的版块就可以用section包起来。
然后在各个版块下面，又有很多文章、报道，每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长，分好多段，每段都有自己的小标题，这时候又可以用section把段落包起来。

4.div\section\article

div充当容器的角色，用来设置某一块的总体属性（一个div里面可能包含多个section）；

section用于强调某一个模块，强调模块本身是作为一个整体的；

article用于强调某一段独立的内容，强调内容的独立性。

--------------------以上内容来自知乎https://www.zhihu.com/question/20227599 由个人整理-------------------------

5.个人理解（待补）

section 是在一个总体内对章节/区域的划分与表示

它可被<article>包围--当作完整文章里的一个章节或区域划分也可以包含<article> 就像前面的报纸举例一样我觉得十分贴切

另外还有就是在网页大纲（outline）里面作为一种层级落差的体现实现

-------------------------------------------------------------------------------------------------------------------------------------------------

阅读补充：

W3C英文版解释：https://www.w3.org/wiki/HTML/Elements/section