首頁 > web前端 > H5教程 > 你如何理解 HTML5 的 section?会在什么场景使用?为什么这些场景使用 section 而不是 div?

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

WBOY
發布: 2016-06-07 08:43:19
原創
2162 人瀏覽過

回复内容:

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
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板