<section>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <section> 元素表示 HTML 文档中一个通用独立章节,它没有更具体的语义元素来表示。一般来说会包含一个标题。
尝试一下
内容分类 | 流式元素,章节元素,短语元素。 |
---|---|
允许的内容 | 流式元素。 |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 接受流式元素的任何元素。请注意,<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 class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>>
</section>
没有标题的内容不会出现在文档大纲中。但如果文档大纲中需要包含这样一个 HTML 块,又不希望影响页面效果,可以通过设置隐藏标题来实现
<section>
<h2 class="hidden">Controls</h2>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>>
</section>
确保使用一些辅助技术和对屏幕阅读器友好的 CSS 来隐藏它,就像这样。
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
根据内容来包含标题也有助于 SEO,因此,这是一个可以考虑的选择。
规范
Specification |
---|
HTML Standard # the-section-element |
浏览器兼容性
BCD tables only load in the browser