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

Course Outline

Details about the modules...

<section>
    <h2>Prerequisites</h2>
    <p>What you need to know before starting...</p>
</section>

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

My First Blog Post

Posted on 10/01/2024

The content of the post...

<article>
    <h3>Another Blog Post</h3>
    <p>Posted on 10/05/2024</p>
    <p>More content here...</p>
</article>

28.3 The <aside> Element

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

html

...