07. section Element

Introduction

The <section> element represents a thematic grouping of content, typically with a heading. It’s used to organize content into logical sections when a more specific semantic element isn’t appropriate. Sections help create a clear document structure and improve accessibility.

Basic Usage

<section>
    <h2>Section Title</h2>
    <p>Section content...</p>
</section>

Common Use Cases

Content Sections

<article>
    <h1>Article Title</h1>
    <section>
        <h2>Introduction</h2>
        <p>Introduction content...</p>
    </section>
    <section>
        <h2>Main Content</h2>
        <p>Main content...</p>
    </section>
    <section>
        <h2>Conclusion</h2>
        <p>Conclusion content...</p>
    </section>
</article>

Thematic Grouping

<main>
    <section>
        <h2>Features</h2>
        <ul>
            <li>Feature 1</li>
            <li>Feature 2</li>
        </ul>
    </section>
    <section>
        <h2>Benefits</h2>
        <ul>
            <li>Benefit 1</li>
            <li>Benefit 2</li>
        </ul>
    </section>
</main>

When to Use section

Use section for:

• Thematic content grouping
• Chapters or parts of documents
• Grouped related content
• When no more specific element fits

Best Practices

Include Headings

Sections should typically have headings:

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

<!-- Avoid: Section without heading -->
<section>
    <p>Just content...</p>
</section>

Don’t Use for Generic Containers

Use div for styling containers:

<!-- Good: Thematic grouping -->
<section>
    <h2>Related Content</h2>
    <p>Content...</p>
</section>

<!-- Avoid: Generic container -->
<section class="wrapper">
    <p>Just a container...</p>
</section>

References

• MDN Web Docs - section element