What is the aside element used for in HTML?

The aside element in HTML5 is used to denote content that is indirectly related to the content around it. This means the content in an <aside> related to the main content but is not important for it and could be considered separate. It can be used for sidebars, pull quotes, advertising, or secondary navigation. The placement of <aside> doesn’t define it; rather, it’s the relationship of its content to the surrounding content.

<aside> ⁣as the HTML5 equal of a newspaper or magazine sidebar. However, it’s critical to understand that the <aside> element is not defined by its position on the page. Just because content appears on the side doesn’t automatically make it an <aside>. As an alternative, it’s the relationship of the content to the main flow that controls whether to use <aside>.

Outside of an <article> element

In this case, the <aside> contains content that is related to the entire page or document. Common examples include:

Sidebars with related links.
Lists of recent posts.
A search box.
Advertisements.
Groups of navigation elements (though <nav> might be more appropriate for major navigation).

This example shows an <aside> element containing two <section> elements, each representing a block within a sidebar. This sidebar content is tangentially related to the main content of the page.

Example

<body>
    <header>
        <h1>Main Content of the Page</h1>
        <nav>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>Main Article Section</h2>
        <p>This is the main content of the page. It contains important information...</p>
    </article>
    <aside id="sidebar">
        <h3>Related Information</h3>
        <ul>
            <li><a href="#">Related Article A</a></li>
            <li><a href="#">Related Article B</a></li>
            <li><a href="#">Archives</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2023 Website Name</p>
    </footer>
</body>

Main Content of the Page

Main Article Section

This is the main content of the page. It contains important information…

Inside of an <article> element

When used within an <article>, the <aside> should contain information is related to that specific article but is not essential to its overall meaning. Examples include:

Pull quotes.
Glossary entries related to the article.
Additional thoughts or background information.
Advertisements relevant to the article’s topic.

Example:

<article>
    <header>
        <h2>The Importance of Semantic HTML</h2>
    </header>
    <p>Semantic HTML is crucial for web accessibility and SEO. It helps search engines and assistive technologies understand the structure and meaning of your content...</p>
    <aside>
        <p><strong>"Semantic markup is all about conveying the meaning of your content."</strong></p>
    </aside>
    <p>By using elements like <code>&lt;article&gt;</code>, <code>&lt;nav&gt;</code>, and <code>&lt;aside&gt;</code>, you provide more context to your content than using generic <code>&lt;div&gt;</code> elements. This leads to a more understandable and maintainable codebase.</p>
    <footer>
        <p>Published on October 26, 2023</p>
    </footer>
</article>

The Importance of Semantic HTML

Semantic HTML is crucial for web accessibility and SEO. It helps search engines and assistive technologies understand the structure and meaning of your content…

By using elements like <article>, <nav>, and <aside>, you provide more context to your content than using generic <div> elements. This leads to a more understandable and maintainable codebase.

Important Considerations

The content within an <aside> should be indirectly related to the surrounding content.
<aside> should not be used for primary content.
The term “sidebar” is associated with <aside>, but the element is defined by its content’s relationship, not its position. A visual sidebar might be implemented using <aside> if its content fits the definition, or with other elements like <section> or <div> if it’s part of the main flow or purely for layout.
There can be multiple <aside> elements on a page.
<aside> is a sectioning content element and can contain headings and other elements.

Page Content

Tutorials