HTML <aside> element

The <aside> element represents content that is related to the surrounding content, but not part of its main flow. It is secondary material: useful, connected, but not the central line of the page.

Common examples include background notes, pull quotes, related links, and author biographies. The material should make sense as a separate piece alongside the main explanation. An essential instruction or warning belongs with the content it is needed to understand, even if the design puts it in a box.

The surrounding content gives the aside its context. Inside an article, it relates to that article. Outside the articles, it can relate to the page as a whole, such as a blog's author information or links to other blogs. It does not have to discuss the topic of one particular post.

This makes <aside> different from <main>. The main element contains the dominant content of the page. The aside element contains material that sits beside that dominant content in meaning, whether or not it is visually placed at the side.

The element does not move its content into a sidebar; CSS controls the position. If a container is needed only for layout, styling, or scripting, use <div>. A brief remark in parentheses can remain part of an ordinary paragraph, without an aside of its own.

In the example below, the article introduces Grid and the aside points to a related layout method. The Flexbox note offers another direction to explore; the Grid explanation is still complete without it.

Attributes: GLOBALS.

Typical layout:
<article>
  <h2>CSS Grid</h2>
  <p>Grid arranges items in rows and columns.
    Use display: grid on the container to create a grid layout.</p>

  <aside>
    <h3>Another layout method</h3>
    <p>Flexbox is useful when you want to arrange items
      along one dimension, in a row or a column.</p>
  </aside>
</article>

Visual representation: