此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
<section>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTML <section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
尝试一下
<h1>Choosing an Apple</h1><section> <h2>Introduction</h2> <p> This document provides a guide to help with the important task of choosing the correct Apple. </p></section><section> <h2>Criteria</h2> <p> There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness... </p></section>h1,h2 { margin: 0;}| 内容分类 | 流式元素，章节元素，短语元素。 |
|---|---|
| 允许的内容 | 流式元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 接受流式元素的任何元素。请注意，<section> 元素不能是<address> 元素的后代。 |
| 隐含的 ARIA 角色 | 当该元素包含可访问的名称时，认为其是region，否则为No corresponding role。 |
| 允许的 ARIA 角色 | alert,alertdialog,application,banner,complementary,contentinfo,dialog,document,feed,log,main,marquee,navigation,search,status,tabpanel |
| DOM 接口 | HTMLElement |
属性
此元素只包含全局属性。
使用说明
如上所述，<section> 是一个通用的分节元素，只有在没有更具体的元素来代表它的时候才可以使用。举个例子，一个导航菜单应该被包裹在<nav> 元素中，但搜索结果列表或地图显示及其控件并没有特定的元素，可以放在<section> 里面。
注意事项：
- 当该元素的内容可以作为一个独立的作品在多个媒体上发表，使用
<article>是一个更好的选择。 - 当内容包含代表与主要内容一同展示的有用的切入信息，但不是直接的一部分（如相关链接，作者简历等），请使用
<aside>。 - 当内容代表文档中的主要内容区域，请使用
<main>。 - 将该元素作为一个样式包装时，请使用
<div>。一般来说，<section>应该出现在文档大纲中。
再次重申，每个<section> 都应该被标识出来，通常是将标题（<h1>-<h6>元素）作为<section> 元素的一个子元素。请看下面的例子，你可能会看到没有标题的<section>。
示例
简单的使用示例
之前
<div> <h1>Heading</h1> <p>Bunch of awesome content</p></div>之后
<section> <h1>Heading</h1> <p>Bunch of awesome content</p></section>没有标题的使用示例
使用<section>> 元素但不包含标题的情况，通常出现在 web 应用或用户界面的部分，而不是传统的文档结构中。在文档中，有独立的内容部分但没有标题来描述其内容，是没有任何意义的。标题对所有的读者都很有用，尤其是对使用屏幕阅读器等辅助技术的用户，同时标题也有利于搜索引擎优化。
在设置二级导航时，全局导航已经被包裹在<nav> 元素中，此时可以使用<section> 元素包裹一个上一个/下一个菜单作为二级导航。
<section> <a href="#">Previous article</a> <a href="#">Next article</a></section>在设置控制应用程序的按钮栏时，需要将其作为文档中单独存在部分，但此时并不需要设置标题。
<section> <button>Reply</button> <button>Reply to all</button> <button>Forward</button> <button>Delete</button>></section>没有标题的内容不会出现在文档大纲中。但如果文档大纲中需要包含这样一个 HTML 块，又不希望影响页面效果，可以通过设置隐藏标题来实现
<section> <h2>Controls</h2> <button>Reply</button> <button>Reply to all</button> <button>Forward</button> <button>Delete</button>></section>确保使用一些辅助技术和对屏幕阅读器友好的 CSS 来隐藏它，就像这样。
.hidden { position: absolute; top: -9999px; left: -9999px;}根据内容来包含标题也有助于 SEO，因此，这是一个可以考虑的选择。
规范
| Specification |
|---|
| HTML # the-section-element |