Semantic & Interactive

<aside> Tag

Tangentially related content — sidebars, pull quotes, ads.

1Side Content

<aside> wraps content related to but separate from the main content. Sidebars, pull quotes, and ad blocks are typical examples.

Example Code

css

<article>
  <h2>Why HTML matters</h2>
  <p>Body content...</p>

  <aside>
    <h3>Related</h3>
    <ul>
      <li><a href="/css">Learn CSS</a></li>
      <li><a href="/js">Learn JavaScript</a></li>
    </ul>
  </aside>
</article>

2Put the element in context

An aside contains related supporting information rather than the central argument or task. A sidebar is a visual position; it is not automatically an aside. If a side column contains essential instructions, keep those in the main content relationship instead of treating them as optional.

3Practice with a small page

Add a related-reading aside to an article and inspect the page after moving it below the article on a phone. Check that the article remains coherent without the recommendations. Give the supporting area a clear heading rather than only a decorative box.

Finished reading?

Mark this topic as complete to track progress.

Next Topic