首页 > 网站 > WEB开发 > 正文

Section标签

2024-04-27 14:28:28
字体:
来源:转载
供稿:网友
Section标签

section

HTML Spec: “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.”

与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。

那么,section 应该什么时候用呢?再接着看:

“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.”

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

要注意,W3C 还警告说:

“The section element is not a generic container element. When an element is needed 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 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。

<article><hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p></section><section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p></section>

HTML5 中 div section article 的区别

section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表introduction, news items和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素。

section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

下面的例子代码来自苹果网站页面的一部分,代码里包含了2个短小的section:

<article><hgroup>    <h1>Apples</h1>    <h2>Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section>    <h1>Red Delicious</h1>    <p>These bright red apples are the most common found in many supermarkets.</p></section><section>    <h1>Granny Smith</h1>    <p>These juicy, green apples make a great filling for apple pies.</p></section></article>

可以看到,在section里可以任意使用h1元素,而不用考虑这个section是顶级的,还是二级或者三级元素。

下面的代码是一个毕业典礼的页面,包含2个section,一个是显示将要毕业人的名单,一个是显示毕业典礼的形式。

   <!DOCTYPE Html>   <html>   <head>    <title>Graduation Ceremony Summer 2022</title>   </head>   <body>    <h1>Graduation</h1>    <section>        <h1>Ceremony</h1>        <p>Opening Procession</p>        <p>Speech by Validactorian</p>        <p>Speech by Class President</p>        <p>Presentation of Diplomas</p>        <p>Closing Speech by Headmaster</p>    </section>    <section>        <h1>Graduates</h1>        <ul>            <li>Molly Carpenter</li>            <li>Anastasia Luccio</li>            <li>Ebenezar McCoy</li>            <li>Karrin Murphy</li>            <li>Thomas Raith</li>            <li>Susan Rodriguez</li>        </ul>    </section>   </body>   </html>

Graduation Ceremony Summer 2022

Graduation

Ceremony

Opening Procession

Speech by Validactorian

Speech by Class President

Presentation of Diplomas

Closing Speech by Headmaster

Graduates
  • Molly Carpenter
  • Anastasia Luccio
  • Ebenezar McCoy
  • Karrin Murphy
  • Thomas Raith
  • Susan Rodriguez

HTML5学习笔记简明版(2):新元素之section,article,aside

section的主要作用是改变heading的上下文,通过它的嵌套,主要用来表示的章节等目录结构和它们的从属关系。

HTML5 里 section article 什么区别?header footer nav 该怎么理解?

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元素。

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表