你如何理解 HTML5 的 section？会在什么场景使用？为什么这些场景使用 section 而不是 div？
程序员文章站
2022-04-08 20:37:32
...
回复内容：
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 来代替
WWF
The World Wide Fund for Nature (WWF) is....
至于为什么要用，是为了语义化，有section、article、dl看这多舒服，人也好理解，计算机也好理解，比满眼的div好多了。 一个section通常由内容和标题组成，通常不推荐那些没有标题的内容用section，在HTML 5 Outliner这个网站可以检测没有标题的section，section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。
拿报纸举个例子：
一份或一张报纸有很多个版块，有头版、国际时事版块、体育版块、娱乐版块、文学版块等等，像这种有版块标题的、内容属于一类的版块就可以用section包起来。
然后在各个版块下面，又有很多文章、报道，每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长，分好多段，每段都有自己的小标题，这时候又可以用section把段落包起来。
虽然这些标签有这个有那个的限制，官方规范建议也是模模糊糊的，但是不要忘记了html5语义化标签的意义，其中一个就是更方便开发人员阅读代码文档，理清代码结构。个人觉得，如果能方便自己和他人阅读理解的标签，那就大胆用吧。
最后，觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关，如果添加更多，更加细分、网页常用、功能专用的标签，像评论部分增加comment标签，友情链接增加link标签，分页增加paging标签，作者信息增加author标签等等，就不会纠结遇到相似功能的标签到底用那个好了，div就不用思考这个，一棍子打下去全中，呵呵。 学习中 在我理解的HTML5规范里，简单来说，
div充当容器的角色，用来设置某一块的总体属性（一个div里面可能包含多个section）；
section用于强调某一个模块，强调模块本身是作为一个整体的；
article用于强调某一段独立的内容，强调内容的独立性。
文章1
内容1
文章2
文章2
section是页面的主要内容.我认为设计些标签是为了搜索引擎考虑.因为浏览网页,就是为了获取页面的主要内容的.其他的信息都是为主要内容服务的. 语义化嘛，怎么清楚怎么来。 个人理解(非专业)：
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。
待完善·
一些补充说明：
- 不要简单地将section用作样式化钩子。将div和span用作该目的。
- 如果header、footer、aside或article在语义上更加适合你的内容，则不要使用section
- 不要使用section，除非它自身有一个标题
引自《HTML5经典实例》by O'REILLy