HTML Aside

« Prev Next »

An <aside> element is a content block related to the main topic of the page, but does not fit naturally within the flow. You might use <aside> for:

  • Sidebars
  • Ads
  • Author bios
  • Related links
  • Tips and notes

html-aside

Syntax

<aside>
  <!-- Tangential content -->
</aside>

Example: Blog Sidebar

<main>
  <article>
    <h2>How to Learn HTML</h2>
    <p>HTML is the foundation of web development...</p>
  </article>

  <aside>
    <h3>Related Posts</h3>
    <ul>
      <li><a href="#">HTML Tags Overview</a></li>
      <li><a href="#">HTML vs. XHTML</a></li>
    </ul>
  </aside>
</main>
Run ›

When to Use <aside>

Use Case Should You Use <aside>? Why?
Related blog posts Yes Indirect but relevant to article
Navigation menu No Use <nav> instead
Ad block Yes Not part of main content but still relevant
Important article content No Use <main> or <article> instead
Author bio (in article) Yes Extra info not part of the primary content
notepad
  • Use <aside> outside of <main> for generic sidebars or related content that isn’t associated with a specific article.
  • Use <aside> inside of <article> for tips, notes, references, or author information.
  • Don’t use <aside> for unrelated content, or content which is at the heart of the article.
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.