aside: The Aside element

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.

Attributes

role="complementary" is the implicit value. You should specify which is the role of the aside according to its content.

Global attributes

role="[semantic-role]"

accesskey="[key]"

autofocus

class="[classname]"

dir="[auto/ltr/rtl]"

hidden

id="[identifier]"

itemid="[global-identifier]"

itemprop="[property-name]"

itemscope itemtype="[url of the vocabulary]"

lang="[language-code]"

tabindex="[num index]"

title="[Title]"

Example

<main>
  <article>
    <h1>Climate is warming</h1>
    <header>
      <p>posted on <time datetime="2024-04-09">Apr. 9</time></p>
    </header>
    <p>How can we stop it...
       ....</p>
    <aside role="note">
       <p>That's not new, we know it for several decades...</p>
    </aside>
  </article>
</main>