【HTML】section标签理解

  • Post author:
  • Post category:其他


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 是在一个总体内对章节/区域的划分与表示,主要作用可体现网页大纲,反应页面内容话题的层级关系。它可被

包围–当作完整文章里的一个章节或区域划分,也可以包含

就像前面的报纸举例一样。