HTML Semantics

Yes. For example, a forum discussion may contain an article for the original post and nested article elements for individual replies when each reply is a self-contained composition.

Use nesting only when the content relationship is meaningful. Do not nest article elements merely to create visual indentation.

9. The section Element

The section element represents a thematic grouping of content, usually with a heading. It is useful for dividing a document into meaningful topics.

Example

<main>
    <h1>HTML5 Mastery</h1>

    <section>
        <h2>Course Overview</h2>
        <p>Learn the foundations of HTML.</p>
    </section>

    <section>
        <h2>What You Will Learn</h2>
        <ul>
            <li>Document structure</li>
            <li>Semantic HTML</li>
            <li>Accessible forms</li>
        </ul>
    </section>
</main>

Each section groups content around a distinct topic.

When to Use section

• Use section when the content forms a meaningful thematic group.
• A section will usually have a heading that identifies its subject.
• Use separate sections when a document has clearly distinct topics.
• Do not use section solely because you need a box for CSS styling.

A heading is not a strict technical requirement in every possible section, but a heading is strongly recommended for ordinary content sections so their purpose is clear.

10. Article vs Section vs Div

Choosing the right container is one of the most important semantic HTML skills.

Use article When

The content is a self-contained composition, such as a blog post, product review or forum contribution.

Use section When

The content forms a distinct thematic group within a larger page or composition.

Use div When

You need a generic container for styling, scripting or layout and no more specific semantic element describes the content appropriately.

Comparison Example

<main>
    <h1>Web Development Blog</h1>

    <section>
        <h2>Latest Articles</h2>

        <article>
            <h3>HTML Basics</h3>
            <p>Learn how HTML structures webpages.</p>
        </article>

        <article>
            <h3>CSS Basics</h3>
            <p>Learn how CSS styles webpages.</p>
        </article>
    </section>

    <div class="loading-indicator">
        Loading additional content...
    </div>
</main>

The section groups the latest articles. Each article represents an independent post. The div is a generic container for a loading indicator because it does not necessarily represent a distinct document section.

Quick Decision Guide

• Is it a standalone post or composition? Consider article.
• Is it a thematic part of a larger document? Consider section.
• Is it a major page navigation region? Consider nav.
• Is it the primary page content? Consider main.
• Is it introductory or footer information? Consider header or footer.
• Is it related supplementary content? Consider aside.
• Is it only a generic wrapper? Use div.

11. The aside Element