<section>

Overview

The <section> element organizes content into distinct thematic areas, typically marked by a heading. It is used to group content that doesn't fall under a more specialized semantic tag.

Examples and Usage

In scenarios where content clusters might not fit into a more specific sectioning element like <nav>, <article>, or <aside>, the <section> element can be a fitting choice. An illustrative example can be a webpage displaying search results:

<h1>Search Results for "Digital Cameras"</h1>

<section>
    <h2>Top Matches</h2>
    <p><!-- Brief description or list of the top search result --></p>
</section>

<section>
    <h2>Related Searches</h2>
    <p><!-- List or description of related search queries --></p>
</section>

Shifting our focus to web accessibility, particularly within online articles, the <section> element paired with an aria-label can be invaluable. This aids screen reader users by indicating the start and end of a specific content segment. It's worth noting that most screen readers will only vocalize a <section> when it's equipped with an accessible name, such as provided by aria-label. This gives users clarity on both the beginning and the conclusion of the section, facilitating easier content navigation.

<section aria-label="summary">
    <span>Brief summary of an article or content</span>
</section>

The above example showcases a <section> with an aria-label of "summary", inspired by contexts where a quick summary is provided before delving deeper into the content. While one might think of using a <div>, the <section> element inherently holds a landmark role, making it more semantically aligned for such scenarios. Adopting elements with built-in widgets or landmark roles when adding labels is a more direct and effective approach than retrofitting roles onto generic elements.

Attribute Breakdown

The <section> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

When using the <section> element, accessibility is vital. If the <section> has an accessible name, its role becomes role=region. However, without an accessible name, it assumes role=generic. It's crucial to ensure a proper heading hierarchy within sections to maintain accessibility. The element may also take on various roles, but for most use cases, sticking with its default is recommended. When using ARIA roles, ensure that they are chosen to improve accessibility and that the content within the <section> aligns with the assigned role.

Associated Elements

• <address>
• <article>
• <aside>
• <footer>
• <h1> - <h6>
• <header>
• <hgroup>
• <nav>

Additional Notes

• The <section> element always requires both the opening and closing tags. Omitting either will result in invalid HTML.

• <section> can be nested within any element that typically defines the structure or content of a document (known as flow content). However, it must never be a descendant of an <address> element.

• The debate over the HTML5 Document Outline Algorithm has been ongoing for years. Originally, sectioning elements like <section> were introduced to allow consistent <h1> headings. However, this caused confusion and accessibility issues, especially with screen readers. Despite its inclusion in drafts, no browsers fully adopted the algorithm. By July 2022, it was removed from the WHATWG HTML specification.

A comprehensive discussion on this subject, along with insights on sectioning elements and other related topics, can be found in this article.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: section

The HTML Living Standard Specification: section