New in HTML5.

<aside> HTML Tag

Element of
HTML Document Structure
What does <aside> HTML Tag 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>
This is the mysterious user account for the HTML.com admin.

Browser Support for aside

9434513934