Back to course

Lesson 28: Sectioning Content (`<section>`, `<article>`, `<aside>`)

The HTML Masterclass: From Zero to Web Developer

28. Sectioning Content

These elements break the main content into logical, self-contained units.

28.1 The <section> Element

Used to group related content. It should always be associated with a heading (h1 - h6) that describes the section's topic.

html

<main> <section> <h2>Course Outline</h2> <p>Details about the modules...</p> </section> 
<section>
    <h2>Prerequisites</h2>
    <p>What you need to know before starting...</p>
</section>
</main>

28.2 The <article> Element

Used for self-contained content that is independently distributable or reusable, such as a blog post, a newspaper article, a forum post, or a user-submitted comment.

html

<main> <article> <h3>My First Blog Post</h3> <p>Posted on 10/01/2024</p> <p>The content of the post...</p> </article> 
<article>
    <h3>Another Blog Post</h3>
    <p>Posted on 10/05/2024</p>
    <p>More content here...</p>
</article>
</main>

28.3 The <aside> Element

Content that is tangentially related to the content around it (e.g., sidebars, pull quotes, advertising blocks).

html

<main> <article>...</article> <aside> <h4>Related Articles</h4> <ul><li>...</li></ul> </aside> </main>