HTML <section> Element
The HTML <section> element represents a meaningful section of related content within a webpage or document, usually organized around a particular topic and identified by a heading.
Syntax
<section>
<h2>Section Heading</h2>
<p>Content related to this section.</p>
</section>The <section> element requires both an opening and closing tag. A section should normally include a heading that identifies the subject or purpose of its content.
Attributes
The <section> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses two <section> elements to organize related information into separate topics, with a heading identifying each section.
Usage Notes
Use the <section> element when a group of related content forms a meaningful part of a webpage or document. Examples include chapters, groups of related information, or distinct topics within a larger page.
A <section> element should normally have a heading that describes its content. The heading helps establish the structure of the document and makes the purpose of the section easier to understand.
Do not use <section> simply as a generic container for styling or layout. When a container has no particular semantic meaning, a <div> element is usually more appropriate.
If the content forms a self-contained composition that could reasonably stand on its own or be distributed separately, an <article> element may be more appropriate than <section>.
Sections can be nested when a topic contains meaningful subsections. Use headings to make the relationship between the sections clear.
Accessibility
Clear headings within <section> elements help users understand the organization of a webpage and can make long documents easier to navigate with assistive technology.
Use descriptive headings that accurately identify the content of each section. Maintain a logical heading structure so users can understand how sections and subsections relate to one another.
Do not add unnecessary ARIA roles when native HTML already provides the required semantics. A <section> with an accessible name can be exposed as a region landmark, so landmarks should be used thoughtfully rather than added to every group of content.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <section> Element .
Related Elements
The <section> element is closely related to the <article> element for self-contained content, the <div> element for generic containers, the <aside> element for indirectly related content, and the <h1>–<h6> elements for headings.