HTML <section> 元素

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

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

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

尝试一下 »

截图

使用 <section> 展示一篇文章

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

特性

内容类别 流式内容章节内容可触知内容
允许的内容 流式内容
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何接受流式内容的元素。请注意,<section> 元素不能是 <address> 元素的后代。
允许的 ARIA 角色 alertalertdialogapplicationbannercomplementarycontentinfodialogdocumentfeedlogmainmarqueenavigationsearchstatustabpanel
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

相关链接