Section标签_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

section

Apples

Tasty, delicious fruit!

Red Delicious

Granny Smith

Graduation

Ceremony

Graduates

집

웹 프론트엔드

HTML 튜토리얼

Section标签_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

섹션 태그

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 id="Apples">Apples</h1> <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section> <h1 id="Red-Delicious">Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p></section><section> <h1 id="Granny-Smith">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 id="Apples">Apples</h1>    <h2 id="Tasty-delicious-fruit">Tasty, delicious fruit!</h2></hgroup><p>The apple is the pomaceous fruit of the apple tree.</p><section>    <h1 id="Red-Delicious">Red Delicious</h1>    <p>These bright red apples are the most common found in many supermarkets.</p></section><section>    <h1 id="Granny-Smith">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 id="Graduation">Graduation</h1>    <section>        <h1 id="Ceremony">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 id="Graduates">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？

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.