试一试
<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> 是一个通用分段元素，只有在没有更具体的元素来表示它时才应该使用。例如，导航菜单应该包裹在 <nav> 元素中，但搜索结果列表或地图显示及其控件没有特定的元素，可以放在 <section> 中。
另请考虑以下情况
- 如果元素的内容表示一个独立的、原子化的内容单元，可以作为独立内容发布（例如，一篇博客文章或博客评论，或一篇报纸文章），则
<article>元素是更好的选择。 - 如果内容表示与主要内容相关的有用辅助信息，但不是其直接组成部分（如相关链接或作者简介），请使用
<aside>。 - 如果内容表示文档的主要内容区域，请使用
<main>。 - 如果您仅将元素用作样式包装器，请改用
<div>。
重申一下，每个 <section> 都应该被标识，通常通过在 <section> 元素中包含一个标题（h1 - h6 元素）作为其子元素，尽可能地。请参阅下文，了解您可能会看到没有标题的 <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 章节中，而不是传统的文档结构中。在文档中，如果没有标题来描述其内容，则有一个单独的内容章节是没有意义的。此类标题对所有读者都很有用，但对屏幕阅读器等辅助技术用户尤其有用，它们也对 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 # section-element |
浏览器兼容性
加载中…