Skip to content
html.sh

<section> - Section Element

The <section> Element

Section titled “The <section> Element”
Sectioning Content HTML5

The <section> element represents a thematic grouping of content, typically with a heading. Use it to divide your content into meaningful sections that have a clear theme or purpose. Unlike <article>, a section is not necessarily self-contained or independently distributable.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<section>
  <h2>Section Heading</h2>
  <!-- Thematically related content -->
</section>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <section> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Document Chapters

Section titled “Document Chapters”

Dividing long-form content into logical sections:

Result

Landing Page Sections

Section titled “Landing Page Sections”

Different thematic sections on a landing page:

Result

Blog Post Sections

Section titled “Blog Post Sections”

Organizing different parts of a blog post:

Result

Product Page Sections

Section titled “Product Page Sections”

Different information sections on a product page:

Result

Tabbed Content

Section titled “Tabbed Content”

Sections used with tabs or accordions:

Result

Dashboard Sections

Section titled “Dashboard Sections”

Organizing different widgets or data on a dashboard:

Result

Section vs. Div vs. Article

Section titled “Section vs. Div vs. Article”

Understanding when to use each element:

<!-- Use <section> for thematic content with a heading -->
<section>
  <h2>About Us</h2>
  <p>Thematically related content...</p>
</section>


<!-- Use <div> for non-semantic grouping (styling/scripting) -->
<div class="container">
  <div class="row">
    <!-- Layout structure, no semantic meaning -->
  </div>
</div>


<!-- Use <article> for self-contained, independently distributable content -->
<article>
  <h2>Blog Post Title</h2>
  <p>Complete, standalone content...</p>
</article>


<!-- Common pattern: Article containing sections -->
<article>
  <h1>Main Article</h1>
  <section>
    <h2>Introduction</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Details</h2>
    <p>Content...</p>
  </section>
</article>

Best Practices

Section titled “Best Practices”

Always Include a Heading

Section titled “Always Include a Heading”

Every section should have a heading (h1-h6):

<!-- Good: Section with heading -->
<section>
  <h2>Section Title</h2>
  <p>Content...</p>
</section>


<!-- Avoid: Section without heading -->
<section>
  <p>Content without a clear theme...</p>
</section>


<!-- If no heading needed, use div instead -->
<div class="wrapper">
  <p>Content for styling purposes only...</p>
</div>

Use Semantic Hierarchy

Section titled “Use Semantic Hierarchy”

Maintain proper heading hierarchy within sections:

<!-- Good: Proper hierarchy -->
<article>
  <h1>Main Article Title</h1>
  <section>
    <h2>Section Title</h2>
    <h3>Subsection</h3>
  </section>
  <section>
    <h2>Another Section</h2>
    <h3>Subsection</h3>
  </section>
</article>


<!-- Avoid: Skipping heading levels -->
<section>
  <h2>Section Title</h2>
  <h5>Subsection</h5><!-- Skipped h3 and h4 -->
</section>

Don’t Overuse Sections

Section titled “Don’t Overuse Sections”

Not every group of content needs to be a section:

<!-- Overuse: Too many sections -->
<section>
  <section>
    <section>
      <p>Content</p>
    </section>
  </section>
</section>


<!-- Better: Use sections purposefully -->
<section>
  <h2>Main Topic</h2>
  <div class="content-wrapper">
    <p>Content...</p>
  </div>
</section>

Combine with Other Semantic Elements

Section titled “Combine with Other Semantic Elements”

Sections work well with other semantic elements:

<section>
  <header>
    <h2>Section Title</h2>
    <p class="subtitle">Additional context</p>
  </header>


  <article>
    <!-- Content -->
  </article>


  <aside>
    <!-- Related information -->
  </aside>


  <footer>
    <p>Section metadata</p>
  </footer>
</section>

Accessibility

Section titled “Accessibility”

Implicit ARIA Role

Section titled “Implicit ARIA Role”

The <section> element has an implicit ARIA role of region when it has an accessible name:

<!-- Has region role because of aria-label -->
<section aria-label="User settings">
  <h2>Settings</h2>
  <p>Content...</p>
</section>


<!-- Has region role because of aria-labelledby -->
<section aria-labelledby="settings-heading">
  <h2 id="settings-heading">Settings</h2>
  <p>Content...</p>
</section>


<!-- Generic role if no accessible name -->
<section>
  <h2>Content</h2>
</section>

Labeling Sections

Section titled “Labeling Sections”

For important sections, provide accessible names:

<!-- Using aria-labelledby (preferred when visible heading exists) -->
<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <p>Content...</p>
</section>


<!-- Using aria-label (when heading doesn't fully describe the section) -->
<section aria-label="Product pricing and plans">
  <h2>Choose Your Plan</h2>
  <p>Content...</p>
</section>

Document Outline

Section titled “Document Outline”

Sections contribute to the document outline:

<article>
  <h1>Main Title</h1><!-- Level 1 -->
  <section>
    <h2>Section 1</h2><!-- Level 2 -->
    <h3>Subsection</h3><!-- Level 3 -->
  </section>
  <section>
    <h2>Section 2</h2><!-- Level 2 -->
  </section>
</article>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome5+
Firefox4+
Safari5+
EdgeAll versions
IE9+
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Using Section Instead of Div

Section titled “Using Section Instead of Div”
<!-- Wrong: Section for styling only -->
<section class="clearfix">
  <section class="column-left">Content</section>
  <section class="column-right">Content</section>
</section>


<!-- Correct: Div for non-semantic styling -->
<div class="clearfix">
  <div class="column-left">Content</div>
  <div class="column-right">Content</div>
</div>


<!-- Correct: Section with semantic meaning -->
<section>
  <h2>About Us</h2>
  <p>Thematic content...</p>
</section>

Section Without Heading

Section titled “Section Without Heading”
<!-- Avoid: No heading -->
<section>
  <p>Random content...</p>
</section>


<!-- Better: Include heading -->
<section>
  <h2>Content Theme</h2>
  <p>Related content...</p>
</section>


<!-- Or use div if no heading is appropriate -->
<div>
  <p>Content for styling purposes...</p>
</div>

Confusing Section with Article

Section titled “Confusing Section with Article”
<!-- Wrong: Using section for independent content -->
<section>
  <h2>Blog Post Title</h2>
  <p>Complete standalone article...</p>
</section>


<!-- Correct: Use article for independent content -->
<article>
  <h2>Blog Post Title</h2>
  <p>Complete standalone article...</p>
</article>


<!-- Correct: Sections within article -->
<article>
  <h1>Blog Post Title</h1>
  <section>
    <h2>Introduction</h2>
    <p>Content...</p>
  </section>
</article>

Specifications

Section titled “Specifications”