Home > Web Front-end > H5 Tutorial > body text

你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?

WBOY
Release: 2016-06-07 08:43:19
Original
2110 people have browsed it

回复内容:

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.
更详细的在这里:whatwg.org/specs/web-ap

至于何时使用,基本上可以这两点:
  • section 不是一个专用来做容器的标签,专用的是 div
  • section 里应该有 标题(h1~6),但文章中推荐用 article 来代替
我们可以理解为一个非文章段落,有明确 id 的一个特殊模块容器(不是专用以包住块的容器)。 section,顾名思义就是一个章节,比如:

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 见这里:w3schools.com/html5/tag

5. 疑点:是否可以在article 里 嵌套 section 作为 一篇大文章中的章节部分。(说法正确,但是似乎主流富文本编辑器里还没有section 标签插入口。 ) 所以推测 section 在目前html5中。主要将页面划分成各个功能主题区块的作用。

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

待完善·


一些补充说明:

  • 不要简单地将section用作样式化钩子。将div和span用作该目的。
  • 如果header、footer、aside或article在语义上更加适合你的内容,则不要使用section
  • 不要使用section,除非它自身有一个标题

引自《HTML5经典实例》by O'REILLy
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!