08. aside Element

Introduction

The <aside> element represents content that is tangentially related to the content around it, often presented as a sidebar. It’s used for sidebars, pull quotes, advertisements, related links, and other complementary content. The aside element helps identify content that is separate from the main flow.

Basic Usage

<main>
    <article>
        <h1>Article Title</h1>
        <p>Article content...</p>
    </article>
    <aside>
        <h2>Related Articles</h2>
        <ul>...</ul>
    </aside>
</main>

Common Use Cases

Sidebar

<main>
    <article>Main content</article>
    <aside>
        <h2>Sidebar</h2>
        <p>Related information...</p>
    </aside>
</main>

Pull Quotes

<article>
    <p>Article content...</p>
    <aside>
        <blockquote>
            <p>Important quote from the article.</p>
        </blockquote>
    </aside>
    <p>More content...</p>
</article>

Related Links

<article>
    <h1>Article Title</h1>
    <p>Content...</p>
    <aside>
        <h2>Related Links</h2>
        <ul>
            <li><a href="/related1">Related Article 1</a></li>
            <li><a href="/related2">Related Article 2</a></li>
        </ul>
    </aside>
</article>

Best Practices

Complementary Content

Use aside for tangentially related content:

<!-- Good: Related but separate -->
<article>
    <h1>Main Article</h1>
    <aside>
        <h2>Author Bio</h2>
        <p>Author information...</p>
    </aside>
</article>

<!-- Avoid: Main content -->
<aside>
    <h1>Main Article Title</h1>
    <p>Main article content...</p>
</aside>

References

• MDN Web Docs - aside element