<section>

HTML <section>元素表示一个包含在HTML文档中的独立部分,它没有更具体的语义元素来表示,一般来说会有包含一个标题。

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

注意:如果元素的内容作为一个独立的有意义的集合,<article>元素可能是更好的选择。

内容分类 Flow content, Sectioning content, palpable content.
允许的内容 Flow content.
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 Any element that accepts flow content. Note that a <section> element must not be a descendant of an <address> element.
允许的 ARIA roles alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel
DOM 接口 HTMLElement

属性

此元素只包含  全局属性

使用说明

  • 一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section>。
  • 如果元素内容可以分为几个部分的话,应该使用 <article> 而不是 <section>
  • 不要把 <section> 元素作为一个普通的容器来使用,这是本应该是<div>的用法(特别是当片段(the sectioning )仅仅是为了美化样式的时候)。 一般来说,一个 <section> 应该出现在文档大纲中。

范例1:

之前

<div>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</div>

之后

<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

范例2:

之前

<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

之后

<section>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</section>

规范

规范 状态 注释
HTML Living Standard
<section>
Living Standard
HTML 5.1
<section>
Recommendation
HTML5
<section>
Recommendation

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
sectionChrome Full support 5Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support 11.1Safari Full support 4.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.1Safari iOS Full support 4.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

参见