<section>: The Generic Section element

<section> HTML 元素表示文档的通用独立部分，没有更具体的语义元素来表示它。除极少数例外，各节应始终有一个标题。

¥The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.

Try it

属性

¥Attributes

该元素仅包含 全局属性。

¥This element only includes the global attributes.

使用说明

¥Usage notes

如上所述，<section> 是通用分段元素，仅当没有更具体的元素来表示它时才应使用。例如，导航菜单应包含在 <nav> 元素中，但搜索结果列表或地图显示及其控件没有特定元素，可以放入 <section> 元素中。

¥As mentioned above, <section> is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. As an example, a navigation menu should be wrapped in a <nav> element, but a list of search results or a map display and its controls don't have specific elements, and could be put inside a <section>.

还要考虑这些情况：

¥Also consider these cases:

  • 如果元素的内容代表一个独立的、原子的内容单元，并且作为一个独立的片段联合起来是有意义的（例如博客文章或博客评论，或报纸文章），那么 <article> 元素将是更好的选择。
  • 如果内容代表与主要内容一起使用的有用的切线信息，但不是直接的一部分（例如相关链接或作者简介），请使用 <aside>。
  • 如果内容代表文档的主要内容区域，请使用 <main>。
  • 如果你仅将该元素用作样式封装器，请改用 <div>。

重申一下，每个 <section> 都应该被识别，通常通过包含一个标题（h1 - h6 元素）作为 <section> 元素的子元素（只要可能）。请参阅下面的示例，了解你可能会在哪里看到没有标题的 <section>。

¥To reiterate, each <section> should be identified, typically by including a heading (h1 - h6 element) as a child of the <section> element, wherever possible. See below for examples of where you might see a <section> without a heading.

示例

¥Examples

简单使用示例

¥Simple usage example

前

¥Before

html
<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>

结果

¥Result

之后

¥After

html
<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

结果

¥Result

使用没有标题的部分

¥Using a section without a heading

你可能会看到不带标题使用 <section> 的情况通常出现在 Web 应用/UI 部分，而不是传统的文档结构中。在文档中，如果没有标题来描述其内容，那么拥有单独的内容部分实际上没有任何意义。此类标题对所有读者都很有用，但对于屏幕阅读器等辅助技术的用户尤其有用，而且它们也有利于搜索引擎优化。

¥Circumstances where you might see <section> used without a heading are typically found in web application/UI sections rather than in traditional document structures. In a document, it doesn't really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screen readers, and they are also good for SEO.

然而，请考虑辅助导航机制。如果全局导航已经封装在 <nav> 元素中，你可以想象将上一个/下一个菜单封装在 <section> 中：

¥Consider however a secondary navigation mechanism. If the global navigation is already wrapped in a <nav> element, you could conceivably wrap a previous/next menu in a <section>:

html
<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

或者某种用于控制你的应用的按钮栏怎么样？这可能不一定需要标题，但它仍然是文档的一个不同部分：

¥Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:

html
<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

结果

¥Result

根据内容的不同，包含标题也可能有利于搜索引擎优化，因此这是一个值得考虑的选项。

¥Depending on the content, including a heading could also be good for SEO, so it is an option to consider.

技术总结

¥Technical summary

内容类别 流量内容, 切片内容, 可触知的内容.
允许的内容 流量内容.
标签遗漏 无，开始和结束标记都是强制性的。
允许的父级 任何接受 流动内容 的元素。请注意， <section> 元素不得是 <address> 元素的后代。
隐式 ARIA 角色 如果元素有 可访问的名称，则为 region，否则为 generic
允许的 ARIA 角色 alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, none, note, presentation, search, status, tabpanel
DOM 接口 HTMLElement

规范

Specification
HTML Standard
# the-section-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also