<section>: The Generic Section element #
::: section-content
The <section>
HTML element represents a generic standalone
section of a document, which doesn't have a more specific semantic
element to represent it. Sections should always have a heading, with
very few exceptions.
:::
Try it #
::: section-content ::: iframe ::: {.output-header .border-rounded-top}
HTML Demo: <section> #
Reset :::
::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::
::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::
::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML
CSS
JavaScript :::
::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}
Choosing an Apple
Introduction
This document provides a guide to help with the important task of choosing the correct Apple.
<section>
<h2>Criteria</h2>
<p>
There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness,
tartness...
</p>
</section>
::: :::
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} h1, h2 { margin: 0; } ::: :::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::
::: {#output .output-container}
Output #
::: :::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output #
![] clear console
::: {#console .console} ::: :::
::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::
Attributes #
::: section-content This element only includes the global attributes. :::
Usage notes #
::: section-content
As mentioned above, <section>
is a generic sectioning element, and
should only be used if there isn't a more specific element to represent
it. As an example, a navigation menu should be wrapped in a
<nav>
element, but a list of search results or a map display
and its controls don't have specific elements, and could be put inside
a <section>
.
Also consider these cases:
- If the contents of the element represent a standalone, atomic unit
of content that makes sense syndicated as a standalone piece (e.g. a
blog post or blog comment, or a newspaper article), the
<article>
element would be a better choice. - If the contents represent useful tangential information that works
alongside the main content, but is not directly part of it (like
related links, or an author bio), use an
<aside>
. - If the contents represent the main content area of a document, use
<main>
. - If you are only using the element as a styling wrapper, use a `` instead.
To reiterate, each <section>
should be identified, typically by
including a heading (
h1 -
h6
element) as a child of the <section>
element, wherever possible. See
below for examples of where you might see a <section>
without a
heading.
:::
Examples #
Simple usage example #
::: section-content
Before #
::: code-example [html]{.language-name}
<h2>Heading</h2>
<p>Bunch of awesome content</p>
:::
Result #
::: {#sect1 .code-example} ::: iframe ::: :::
After #
::: code-example [html]{.language-name}
<section>
<h2>Heading</h2>
<p>Bunch of awesome content</p>
</section>
:::
Result #
::: {#sect2 .code-example} ::: iframe ::: ::: :::
Using a section without a heading #
::: section-content
Circumstances where you might see <section>
used without a heading are
typically found in web application/UI sections rather than in
traditional document structures. In a document, it doesn't really make
any sense to have a separate section of content without a heading to
describe its contents. Such headings are useful for all readers, but
particularly useful for users of assistive technologies like screen
readers, and they are also good for SEO.
Consider however a secondary navigation mechanism. If the global
navigation is already wrapped in a <nav>
element, you could
conceivably wrap a previous/next menu in a <section>
:
::: code-example [html]{.language-name}
<section>
<a href="#">Previous article</a>
<a href="#">Next article</a>
</section>
:::
Or what about some kind of button bar for controlling your app? This might not necessarily want a heading, but it is still a distinct section of the document:
::: code-example [html]{.language-name}
<section>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>
</section>
:::
Result #
::: {#sect3 .code-example} ::: iframe ::: :::
Depending on the content, including a heading could also be good for SEO, so it is an option to consider. :::
Technical summary #
::: section-content
Content categories | Flow content, Sectioning content, palpable content. |
---|---|
Permitted content | Flow 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> element. |
Implicit ARIA role | region
if the element has an accessible name, otherwise generic |
Permitted ARIA roles | alert ,
alertdialog ,
application ,
banner ,
complementary ,
contentinfo ,
dialog ,
document ,
feed ,
log ,
main ,
marquee ,
navigation ,
none ,
note ,
presentation ,
search ,
status ,
tabpanel |
DOM interface | HTMLElement |
Specifications #
::: _table #
Specification #
HTML Standard
[#
the-section-element]{.small}
:::
Browser compatibility #
::: _table Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
section
5 12 4 9 11.1 5 4.4 18 4 11.1 4.2 1.0
:::
See also #
::: section-content
- Other section-related elements:
<body>
,<nav>
,<article>
,<aside>
, h1, h2, h3, h4, h5, h6,<hgroup>
,<header>
,<footer>
,<address>
- Using HTML sections and outlines
- ARIA: Region role
- Why You Should Choose HTML5 article Over section{target="_blank"}, by Bruce Lawson :::
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section{._attribution-link}
:::