Definition and Usage

The <aside> tag represents a separate section of content that is indirectly related to the main content of a page.
It is typically used for sidebars or additional information related to the document.

Basic Example

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>aside Tag Example</title>
    </head>
    <body>
        <header>
            <h1>Web Page Title</h1>
        </header>
        <main>
            <article>
                <h2>Main Content Title</h2>
                <p>Main content goes here...</p>
            </article>
        </main>
        <aside>
            <h3>Additional Information</h3>
            <p>This section displays additional information that is separate from the main content.</p>
        </aside>
        <footer>
            <p>© Copyright Web Page</p>
        </footer>
    </body>
</html>

Features

The <aside> tag should be used to provide additional information that is separate from the main content of a document. It is not appropriate for representing content that belongs directly to the main content itself.

The <aside> tag is intended to represent content that is indirectly related to the main content of the page. It is often used for extra details, related notes, or any distinct content that should be kept separate from the main flow. However, it should not be used to represent parts of the main content directly.

Incorrect Usage

The following HTML code shows an incorrect usage of the <aside> tag:

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Incorrect Usage of the aside Tag</title>
    </head>
    <body>
        <header>
            <h1>Web Page Title</h1>
        </header>
        <main>
            <article>
                <h2>Main Content Title</h2>
                <p>Main content goes here...</p>
            </article>
        </main>
        <aside>
            <!-- Do not use the aside tag to represent a part of the main content. -->
            <h3>Subheading</h3>
            <p>This is part of the main content of the page.</p>
        </aside>
        <footer>
            <p>© Copyright Web Page</p>
        </footer>
    </body>
</html>

In this example, the <aside> tag is incorrectly used to represent a section that is part of the main content. This is not the correct way to use the <aside> tag. It should only be used to represent content that is indirectly related to the main content, not content that belongs directly to it.

Practical Examples

Here are some examples of how the <aside> tag can be used.

Blog Sidebar

HTML 
<article>
    <h1>Blog Post Title</h1>
    <p>Blog content goes here...</p>
</article>
<aside>
    <!-- Additional information related to the blog post -->
    <h2>Related Posts</h2>
    <nav>
        <ul>
            <li><a href="#">Post 1</a></li>
            <li><a href="#">Post 2</a></li>
            <li><a href="#">Post 3</a></li>
        </ul>
    </nav>
</aside>

Code Explanation
The <nav> tag represents a section containing links for navigation, either to other pages or within the current page.

Advertisement Banner

HTML 
<main>
    <h1>Product Introduction</h1>
    <p>Detailed information about the product...</p>
</main>
<aside>
    <ins>
        <!-- Product-related advertisement banner -->
        <img src="ad-image.jpg" alt="Product Advertisement">        
    </ins>
</aside>

Code Explanation
The <ins> tag represents inserted content in a document. Here, it is used to mark an advertisement banner as inserted content within the web page.

Quotation

HTML 
<article>
    <h1>Historical Event</h1>
    <p>Description of the event...</p>
</article>
<aside>
    <!-- Quotation related to the historical event -->
    <blockquote>
        <p>History is not experienced, it is interpreted.</p>
    </blockquote>
    <p>Cal Yewers</p>
</aside>

Code Explanation
The <blockquote> tag represents a section that is quoted from another source.

Related Sites Links

HTML 
<nav aria-label="Main Menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</nav>
<aside>
    <!-- Related sites links -->
    <h2>Related Sites</h2>
    <nav aria-label="Related Sites Menu">
        <ul>
            <li><a href="#">Partner 1</a></li>
            <li><a href="#">Partner 2</a></li>
            <li><a href="#">Partner 3</a></li>
        </ul>        
    </nav>
</aside>

In this example, the <aside> tag is used to separate the "Related Sites Menu" from the main menu and main content of the page.

In the examples above, the comments and explanations illustrate how the <aside> tag can be used to provide additional content or extra information independently of the main content.

Accessibility Considerations

In HTML, a landmark refers to an element that helps describe the structure of a web page and improves accessibility. Landmarks assist users in understanding and navigating a page, and they allow assistive technologies, such as screen readers, to effectively convey the layout and structure.

For more details about landmarks, see the ARIA Landmarks Example.

The <aside> tag represents a complementary content area of the main content on a page. It may contain content that does not directly interact with the main content but serves a secondary or supporting role, typically displayed as a sidebar. The semantic role of this element is complementary.

Thus, the <aside> tag plays an important role in conveying the layout and structure of a web page.

Assigning Meaning to <aside> with the role Attribute

If using the <aside> tag is not possible, the same meaning can be assigned using the role attribute.

The following example shows how a <div> tag with no inherent semantic meaning can serve as a complementary landmark by using role="complementary" instead of <aside>:

HTML 
<div role="complementary">
    <h2>Title for complementary area<h2> 
    .... complementary content area .... 
</div>

Except in cases where browser compatibility prevents the use of the <aside> tag, it is recommended to use <aside> rather than relying on role="complementary".

Usage Restrictions for <aside>

The <aside> tag must not be a descendant of the <address> tag.

  • The <address> tag is a special tag used to represent contact information for the document or its ancestor <article> tag.
  • Placing an <aside> tag inside an <address> tag would semantically imply that there is a separate complementary content area within the contact information, which can confuse the semantic structure.
  • Therefore, the specification does not allow the <aside> tag (or other sectioning content tags such as <article>, <nav>, <section>, <header>, <footer>) to be included within an <address> tag.

Related Attributes

The <aside> tag has no tag-specific attributes. All global attributes can be used with this tag.

Technical Syntax Summary

Technical Syntax Summary of the <aside> tag
Permitted parents The <aside> tag must not be a descendant of the <address> tag.
Implicit ARIA role complementary
Permitted ARIA roles feed, none, note, presentation, region, search

Browser compatibility

Browser compatibility for the aside tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<aside> 5 12 4 5

Specifications

Specification for the aside tag
Specification
<aside> HTML Standard
#the-aside-element

References

See also