15. Grouping Text

Introduction

Grouping text content is essential for creating well-organized, readable HTML documents. HTML provides various elements and techniques for grouping related text, making content easier to understand, style, and maintain. Understanding how to group text properly improves both structure and accessibility.

Grouping Elements

Paragraphs

Group sentences into paragraphs:

<p>First paragraph with related content.</p>
<p>Second paragraph with different but related content.</p>

Sections

Group related content with sections:

<section>
    <h2>Introduction</h2>
    <p>Content...</p>
</section>
<section>
    <h2>Main Content</h2>
    <p>Content...</p>
</section>

Articles

Group independent content:

<article>
    <h1>Article Title</h1>
    <p>Article content...</p>
</article>

Best Practices

Logical Grouping

Group related content together:

<!-- Good: Logical grouping -->
<section>
    <h2>About Us</h2>
    <p>Company history...</p>
    <p>Our mission...</p>
</section>

Semantic Structure

Use semantic elements:

<article>
    <header>
        <h1>Title</h1>
    </header>
    <section>
        <h2>Section</h2>
        <p>Content</p>
    </section>
</article>

References

• MDN Web Docs - HTML Sections