HTML aside and figure – Sidebars, Images with Captions

The aside Element

The <aside> element represents content that is tangentially related to the surrounding content — content that could be considered separate from the main flow yet still connected to it. It is not unrelated content: it relates to the topic but is not essential to understand the main content.

Typical uses of aside:

Sidebars on a page (related links, newsletter signup, author bio)
Pull quotes — a visually highlighted excerpt from the article itself
Related article lists
Glossary term definitions that expand on a term in the body text
Advertising slots contextually relevant to the content

HTML

<!-- Page-level aside: a sidebar alongside main content -->
<div class="page-layout">
  <main>
    <article>
      <h1>What is Semantic HTML?</h1>
      <p>Semantic HTML means using elements that describe their purpose…</p>
    </article>
  </main>

  <aside class="sidebar">
    <section>
      <h2>Related tutorials</h2>
      <ul>
        <li><a href="/html/semantic/header-footer-nav.html">Header, Footer, Nav</a></li>
        <li><a href="/html/semantic/main-article-section.html">Main, Article, Section</a></li>
        <li><a href="/html/semantic/html5-elements.html">HTML5 New Elements</a></li>
      </ul>
    </section>

    <section>
      <h2>Quick tip</h2>
      <p>Use the WAVE accessibility tool to check your semantic HTML structure.</p>
    </section>
  </aside>
</div>

Aside as a Pull Quote

Inside an article, <aside> can be used for a pull quote — a highlighted quotation lifted from the article that is displayed visually in the margin or in a callout box.

HTML

<article>
  <p>Semantic HTML is not about adding more elements — it is about choosing
  the right element for the right job.</p>

  <!-- Pull quote (tangentially related — extracted from article text) -->
  <aside class="pull-quote">
    <blockquote>
      <p>"Choosing the right element for the right job."</p>
    </blockquote>
  </aside>

  <p>When every developer on the team uses the same semantic conventions,
  the code becomes self-documenting…</p>
</article>

Aside as a Glossary Term

HTML

<article>
  <p>Search engines use the <abbr title="Document Object Model">DOM</abbr>
  structure to understand page content.</p>

  <aside>
    <h3>What is the DOM?</h3>
    <p>The Document Object Model (DOM) is a programming interface for HTML
    documents. It represents the page as a tree of nodes that JavaScript
    can read and modify.</p>
  </aside>

  <p>Because of this, using semantic tags…</p>
</article>

The figure Element

The <figure> element wraps self-contained content that is referenced from the main flow but could be moved to a different position (an appendix, a sidebar) without breaking the flow. It is typically used for images, diagrams, charts, code examples, and embedded videos. Its optional child <figcaption> provides the caption.

HTML

<!-- Image with caption -->
<figure>
  <img src="/assets/html-form-anatomy.png"
       alt="Diagram showing a form element with action, method, labels and inputs labelled"
       width="800" height="450">
  <figcaption>Anatomy of an HTML form: the form element wraps labels and inputs,
  with action and method attributes controlling where and how data is sent.</figcaption>
</figure>

<!-- Multiple images in one figure (a gallery figure) -->
<figure>
  <img src="/assets/form-get.png" alt="Browser URL bar showing GET query string">
  <img src="/assets/form-post.png" alt="Browser network tab showing POST request body">
  <figcaption>Left: GET appends data to the URL. Right: POST sends data in the request body.</figcaption>
</figure>

The figcaption Element

<figcaption> is the optional caption for a <figure>. It must be the first or last child of the figure element. It provides a text description or attribution for the media content.

HTML

<!-- figcaption as first child -->
<figure>
  <figcaption>Figure 1: HTML document structure.</figcaption>
  <img src="/assets/html-structure.svg" alt="Tree diagram of HTML document structure">
</figure>

<!-- figcaption as last child (more common) -->
<figure>
  <img src="/assets/html-structure.svg" alt="Tree diagram of HTML document structure">
  <figcaption>Figure 1: The HTML document tree: html contains head and body,
  body contains all visible elements.</figcaption>
</figure>

figure for Code Examples

The <figure> element is not limited to images. It wraps any self-contained media — including code blocks. Using <figure> around a code block lets you provide a caption naming what the code shows.

HTML

<figure>
  <figcaption>A minimal HTML form with GET method and a search input.</figcaption>
  <pre><code class="language-html">&lt;form action="/search" method="GET"&gt;
  &lt;label for="q"&gt;Search&lt;/label&gt;
  &lt;input type="search" id="q" name="q"&gt;
  &lt;button type="submit"&gt;Go&lt;/button&gt;
&lt;/form&gt;</code></pre>
</figure>

aside vs figure – Key Differences

Feature	`<aside>`	`<figure>`
Content type	Text, links, widgets — tangentially related to main content	Images, diagrams, code, charts — referenced from main content
Relationship to main text	Tangential — can be removed without affecting understanding	Self-contained — referenced from but moveable within document
Has a caption element?	No — use heading + paragraph	Yes — `<figcaption>`
Landmark role	Yes — `complementary` ARIA landmark	No landmark role
Typical content	Sidebar, pull quote, related links, glossary term	Photo, SVG chart, code listing, video embed, table of data

📋 Summary

<aside> — tangentially related content: sidebars, pull quotes, related links, glossary terms. It is a ARIA landmark (complementary) — screen readers can navigate directly to it.
<figure> — self-contained media content referenced from main text: images, diagrams, code listings, charts, embedded videos.
<figcaption> — the optional caption for a figure; must be the first or last child of <figure>.
Use <aside> for textual/navigational sidecontent; use <figure> for captioned media.
Both are different from <section> — they are not thematic chapters, they are supplementary or media content.

Frequently Asked Questions

What ARIA role does aside have?

The <aside> element has an implicit ARIA role of complementary. This makes it a landmark region — screen readers can list and navigate to it directly. If you have multiple asides on a page, add aria-label to distinguish them: <aside aria-label="Related tutorials"> and <aside aria-label="Author information">.

Do I always need a figcaption inside figure?

No — <figcaption> is optional. You can use <figure> without a caption when the content is self-explanatory and the alt text on an image (or the code itself) provides sufficient description. However, captions are good practice for anything that needs attribution, a label, or additional context beyond what the alt text provides.

Can I put a table inside figure?

Yes. A data table can be wrapped in <figure> if it needs a caption (Table 1: Monthly visitors by region). The <figcaption> serves as the table's title, which is more semantically appropriate than a plain heading or paragraph above the table. The alternative is using the <caption> element, which is the dedicated caption element for tables and goes inside the <table> as its first child.

Should my ad sidebar be wrapped in aside?

It depends. If the ads are contextually related to the page content (e.g., a book recommendation on a book review page), then <aside> is appropriate. If they are purely commercial with no relation to the content, many developers use a <div> for the ad container and reserve <aside> for genuinely related supplementary content. The HTML spec does not prohibit ads in aside, but using it semantically makes the landmark useful rather than misleading.