The HTML <aside> element represents content that is related to the main content of a webpage but is not part of its central information. It is commonly used for sidebars, related articles, author information, advertisements, and supplementary notes.

The <aside> element is a semantic HTML element that helps developers organize related information clearly. CSS can be used to display this content beside the main content or in another suitable location.

What Is the HTML Aside Element?

The <aside> element defines supplementary content related to the surrounding content. For example, a programming tutorial may include a sidebar containing related tutorials or additional learning resources.

Here is the basic syntax:

<aside>
    <h2>Related Tutorials</h2>
    <ul>
        <li><a href="/html/">HTML Tutorial</a></li>
        <li><a href="/css/">CSS Tutorial</a></li>
    </ul>
</aside>

In this example, the <aside> element contains links to related learning resources.

HTML Aside Example

The following example demonstrates how to use <aside> with the <main> element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Aside Example</title>

    <style>
        .layout {
            display: flex;
            gap: 20px;
        }

        main {
            flex: 3;
        }

        aside {
            flex: 1;
            padding: 15px;
            background-color: #f0f4f8;
        }

        @media (max-width: 600px) {
            .layout {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <div class="layout">
        <main>
            <h2>Introduction to HTML</h2>
            <p>
                HTML is used to structure content
                on webpages.
            </p>
        </main>

        <aside>
            <h3>Related Topics</h3>
            <p>Explore HTML elements and attributes.</p>
        </aside>
    </div>

</body>
</html>

In this example, the <main> element contains the primary tutorial, while <aside> displays related information. CSS Flexbox places them beside each other on wider screens. A media query stacks them vertically on smaller screens.

Common Uses of the HTML Aside Element

The <aside> element can be used for several types of supplementary content:

• Sidebars: Display additional website navigation or resources.
• Related articles: Recommend relevant posts to readers.
• Author information: Show a short biography of the content creator.
• Supplementary notes: Provide extra explanations related to an article.
• Advertisements: Display advertising content that is separate from the main information.

Use <aside> when the content is related but not central to the page’s primary purpose.

HTML Aside vs Main

<aside>	<main>
Contains supplementary information	Contains the primary page content
Often used for related links or sidebars	Used for the main topic or task
Can appear within an article or outside it	Identifies the page’s main content

Learn more about HTML main content to understand how primary and supplementary content work together.

HTML Aside FAQs

Can a webpage have multiple aside elements?

Yes. A webpage can contain multiple <aside> elements when each represents appropriate supplementary content.

Is aside a semantic HTML element?

Yes. It describes content that is indirectly related to the surrounding content.

Does aside always appear on the right side?

No. The <aside> element does not have a fixed position. CSS determines whether it appears on the left, right, below, or elsewhere in the layout.

Can aside be used inside article?

Yes. An <aside> element can appear inside an <article> when it contains supplementary information related to that article.