HTML
<section>
element
represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.
Typically, but not always, sections have a heading.
As an example, a navigation menu should be wrapped in a
<nav>
element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a
<section>
.
注意:
If the contents of the element would make sense syndicated as a standalone piece, the
<article>
element may be a better choice.
| 内容类别 | 流内容 , Sectioning content ,可触及内容。 |
|---|---|
| 准许内容 | 流内容 . |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
flow content
. Note that a
<section>
element must not be a descendant of an
<address>
元素。
|
| Implicit ARIA role |
region
if the element has an
accessible name
,否则
no corresponding role
|
| Permitted ARIA roles |
alert
,
alertdialog
,
application
,
banner
,
complementary
,
contentinfo
,
dialog
,
document
,
feed
,
log
,
main
,
marquee
,
navigation
,
none
,
note
,
presentation
,
search
,
status
,
tabpanel
|
| DOM 接口 |
HTMLElement
|
此元素只包括 全局属性 .
<section>
should be identified, typically by including a heading (
<h1>
-
<h6>
element) as a child of the
<section>
元素。
<section>
element, use an
<article>
element instead.
<section>
element as a generic container; this is what
<div>
is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.
<div> <h1>Heading</h1> <p>Bunch of awesome content</p> </div>
<section> <h1>Heading</h1> <p>Bunch of awesome content</p> </section>
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
section
|
Chrome 完整支持 5 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 9 | Opera 完整支持 11.1 | Safari 完整支持 5 | WebView Android 完整支持 Yes | Chrome Android 完整支持 Yes | Firefox Android 完整支持 4 | Opera Android 完整支持 11.1 | Safari iOS 完整支持 4.2 | Samsung Internet Android 完整支持 Yes |
完整支持
<body>
,
<nav>
,
<article>
,
<aside>
,
<h1>
,
<h2>
,
<h3>
,
<h4>
,
<h5>
,
<h6>
,
<hgroup>
,
<header>
,
<footer>
,
<address>