`HTML5 Aside Element: Here Are The Good (And Not So Good) Uses For It`

In HTML Tags, New

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of: HTML Document Structure Before And After HTML5 – Here’s What Changed
What does HTML5 Aside Element: Here Are The Good (And Not So Good) Uses For It do?: The <aside> element is used to identify content that is related to the primary content of the webpage, but does not constitute the primary content of the page. Author information, related links, related content, and advertisements are exampes of content that may be found in an aside element.
Display: block
Usage: semantic | structural

Using Aside

There is actually some confusion and even disagreement over the exact nature and purpose of <aside>, so let’s look at the HTML5 specification:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

This means that any of the following may be valid uses of the <aside> element:

bibliography or endnotes
comments
pull quotes
editorial sidebars
additional information
website sidebars unrelated to the content

The following are most likely not good uses of the <aside> element:

article post data (byline, publication date, etc.)
post-specific navigation, such as next and previous or related posts

Note that while the above list is somewhat conjectural, there is one potential use of <aside> which is specifically prohibited by the specification: parenthetical information within the flow of an article.

Code Example

<!-- Several potential placements for <aside> -->

<body>
  <main>
    <article>
      <header>
        <h1>Title of Article</h1>
        <!-- Post Data: Byline, dateline -->
      </header>
      <main>
      <!-- Article Content -->
        <aside><!-- Pull Quote --></aside>
      </main>
      <aside>
        <!-- Comment Section -->
      </aside>
      <footer>
        <!-- Post Date: Tags, Categories, Navigation -->
      </footer>
    </article>
  </main>
  <aside>
    <!-- Website sidebar: Advertising, Post Index, Login Forms -->
  </aside>
</body>

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for aside


9	43	45	13	9	34