HTML <section> 元素

HTML <section> 元素表示 HTML 文档中的一个独立部分 - 没有更具体的语义元素来表示它。通常，章节有一个标题，但也不总是这样的。

使用 <section> 展示一篇文章：

<section>
  <h1>这是一个标题</h1>
  <p>这是一些内容</p>
</section>

尝试一下 »

截图

使用 <section> 展示一篇文章

例如，导航菜单应该包含在 <nav> 元素中，但搜索结果列表和地图及其控件没有特定的元素，可以放在 <section> 中。

特性

内容类别 流式内容，章节内容，可触知内容。
允许的内容 流式内容。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。请注意，<section> 元素不能是 <address> 元素的后代。
允许的 ARIA 角色 alert，alertdialog，application，banner，complementary，contentinfo，dialog，document，feed，log，main，marquee，navigation，search，status，tabpanel
DOM 接口 HTMLElement

属性

该元素只包含全局属性。

使用注意

  • 每个 <section> 应该是有独立标识的，通常包括一个标题（<h1> - <h6>）作为 <section> 元素的子元素。
  • 不要使用 <section> 作为通用容器；这是 <div> 的作用，特别是当该章节仅用于样式目的时。一个经验法则是，一个章节应该是按逻辑出现在文档的大纲中。

实例

使用 <section> 代替 <div> 来展示文章

<div>
  <h1>标题</h1>
  <p>一些很棒的内容</p>
</div>

变为

<section>
  <h1>标题</h1>
  <p>一些很棒的内容</p>
</section>

尝试一下 »

截图

使用 <section> 代替 <div> 来展示文章

使用 <section> 代替 <div> 来展示图文

<div>
  <h2>标题</h2>
  图文<img src="/images/chrome-64x64.png" alt="Chrome">
</div>

变为

<section>
  <h2>标题</h2>
  图文<img src="/images/chrome-64x64.png" alt="Chrome">
</section>

尝试一下 »

截图

使用 <section> 代替 <div> 来展示图文

规范

规范 状态 备注
HTML Living Standard
<section> 的定义		 现行的标准 -
HTML 5.1
<section> 的定义		 推荐 -
HTML5
<section> 的定义		 推荐 -

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 5 支持 4 9 11.1 4.1

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 4 9 11 4.2

相关链接