<section>：通用章节元素

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中均可用： 2015 年 7 月.

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

试一试

属性

此元素仅包含全局属性。

使用说明

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

另请考虑以下情况

  • 如果元素的内容表示一个独立的、原子的内容单元，该内容单元作为独立的部分进行联合是有意义的（例如，博客文章或博客评论，或报纸文章），则 <article> 元素将是更好的选择。
  • 如果内容表示与主要内容一起使用的有用的切向信息，但不是其直接的一部分（如相关链接或作者简介），则使用 <aside>。
  • 如果内容表示文档的主要内容区域，请使用 <main>。
  • 如果您只是将元素用作样式包装器，请改用 <div>。

重申一遍，每个 <section> 应被识别，通常通过包含标题（h1 - h6 元素）作为 <section> 元素的子元素，在可能的情况下。请参见下面的示例，了解在没有标题的情况下可能看到 <section> 的位置。

示例

简单用法示例

之前

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

之后

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

在没有标题的情况下使用 section

在 Web 应用程序/UI 部分而不是传统文档结构中通常会发现没有标题使用 <section> 的情况。在文档中，没有标题来描述其内容的单独内容部分实际上没有任何意义。此类标题对所有读者都有用，但对使用屏幕阅读器等辅助技术的用户尤其有用，它们也对 SEO 有益。

但是，考虑一下辅助导航机制。如果全局导航已包装在 <nav> 元素中，则可以想象将上一个/下一个菜单包装在 <section> 中

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

或者，如何控制应用程序的某种按钮栏？这可能不一定需要标题，但它仍然是文档的一个独立部分

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>

结果

根据内容，包含标题也可能对 SEO 有益，因此这是一个需要考虑的选项。

技术摘要

内容类别 流内容、分段内容、可感知内容。
允许的内容 流内容.
标签省略 无，开始和结束标签都是必需的。
允许的父元素 任何接受 流内容 的元素。请注意，<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

规范

规范
HTML 标准
# the-section-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅