首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

section

HTML Section 元素 表示包含在HTML文件中的功能性的独立的部分,通常具有一个标题,它不必代表它的更具体的语义单元。

举个例子,导航菜单应该包装在一个<nav>元素中,但是一个搜索结果列表和一个地图显示及其控件没有具体的元素,可以放在一个<section>

内容类别

Flow content, Sectioning content, palpable content.

允许的内容

Flow content.

标记遗漏

没有,起始和结束标签都是强制性的。

允许父母

任何接受

Flow content 的元素。请注意,<section>元素不能是<address>元素的后代。

允许ARIA角色

alert, alertdialog, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel

DOM界面

HTML元素

属性

这个元素只包含全局属性。

使用说明

  • 每一个都<section>应该被识别出来,通常包括一个标题(<h1>- <h6>元素)作为元素的一个子<section>元素。
  • 如果单独联合一个<section>元素的内容是有意义的,请改用一个<article>元素。
  • 不要将该<section>元素用作通用容器; 这是为什么<div>,特别是当切片只是为了造型的目的。经验法则是一个部分应逻辑地出现在文档的大纲中。

例1

Before

代码语言:javascript
复制
<div>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</div>

After

代码语言:javascript
复制
<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

例2

Before

代码语言:javascript
复制
<div>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</div>

After

代码语言:javascript
复制
<section>
  <h2>Heading</h2>
  <img src="bird.jpg" alt="bird">
</section>

规范

Specification

Status

Comments

HTML Living StandardThe definition of '<section>' in that specification.

Living Standard

HTML 5.1The definition of '<section>' in that specification.

Recommendation

HTML5The definition of '<section>' in that specification.

Recommendation

浏览器兼容性

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

5

(Yes)

4

9

11.1

4.1

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

(Yes)

4

9

11

4.2

扫码关注腾讯云开发者

领取腾讯云代金券