Writing effective HTML is not simply a matter of adding headings, paragraphs and images to a webpage. It also involves organising information in a way that makes the connection between different sections clear. Two HTML elements that play an important role in this process are <aside> and <figure>.

While they are both used to structure additional content, their roles are not quite the same. The <aside> element is intended for information that has some connection with the main content but is not directly part of its central discussion. By comparison, <figure> is designed to contain independent material, including photographs, illustrations, diagrams and code examples.

Knowing how to work with the HTML aside and figure elements allows developers to build better-organised web pages with clearer semantic meaning. It can also support accessibility and make website maintenance less complicated. In this guide, we will look at the purpose of each element, explore practical ways to use them together with other semantic HTML tags, and highlight mistakes that developers should be aware of.

Adding Supporting Information Through the <aside> Element

The <aside> element is useful when a webpage needs to include information that complements the main discussion without becoming part of its central message. Such content might provide additional explanations, point readers towards related resources or present useful background information.

For instance, a blog article could include a sidebar containing links to relevant tutorials, a short technical explanation or a collection of recommended reading materials.

One advantage of using <aside> instead of a standard <div> is that it gives the content a clearer semantic purpose. Rather than acting as a simple container, it indicates that the enclosed information has a supplementary relationship with the surrounding content. This distinction makes the document structure easier for developers, browsers and assistive technologies to interpret.

Understanding What Counts as Tangential Content

Not every additional section on a webpage needs to be placed inside an <aside> element. The information should have a meaningful connection with the main subject while remaining separate from its primary narrative.

Consider an article discussing semantic HTML. The main section might explain how elements such as <header>, <main> and <article> work. Alongside this discussion, the author could include a small sidebar featuring accessibility guidelines, links to relevant documentation or a brief explanation of another related HTML concept.

These additions provide useful context without changing the direction of the main article. That is precisely the type of situation in which <aside> becomes an appropriate semantic choice.

Consider this example:

<article>
  <h1>Understanding Semantic HTML</h1>

  <p>
    Semantic HTML uses meaningful elements to describe
    the structure and purpose of web content.
  </p>

  <aside>
    <h2>Related Reading</h2>
    <p>
      Explore how semantic elements improve accessibility
      and document organisation.
    </p>
  </aside>
</article>

Here, the <aside> provides additional context without becoming part of the article's main argument.

One simple way to decide whether <aside> is suitable is to consider what would happen if the content were taken out of the page. Would the main discussion still make sense without it? If the answer is yes, and the information offers useful additional context rather than essential details, using <aside> could be a sensible option.

That said, developers should not place every supporting paragraph inside this element. When a particular section contributes directly to the main explanation or helps develop the central argument, it should remain part of the article's normal content structure. The purpose of <aside> is to distinguish supplementary information, not to provide a container for every piece of secondary text.

Page-Level Asides and In-Article Callouts

The position of an <aside> element can vary according to the type of information it contains and how closely that information relates to the surrounding material.

For example, a page-level aside may be used to display recommended articles, details about the author or links to additional learning resources. These sections offer readers further information without becoming part of the main article itself.

An in-article aside, on the other hand, appears within the article's content flow. It might introduce a short explanation of a technical expression, show a small practical example or draw attention to an optional point that readers may find useful.

Both approaches are valid, provided the content has a supplementary relationship with its surrounding material. Choosing the right placement helps maintain a logical document structure and makes the purpose of each section easier to understand.

For example, a website could place a related-content panel beside its main article:

<main>
  <article>
    <h1>Choosing Semantic Elements</h1>
    <p>
      Semantic elements communicate the purpose of
      different parts of an HTML document.
    </p>
  </article>

  <aside aria-labelledby="related-heading">
    <h2 id="related-heading">Related Articles</h2>
    <ul>
      <li><a href="/html-layout">Semantic Page Layouts</a></li>
      <li><a href="/html-sections">Article vs Section</a></li>
    </ul>
  </aside>
</main>

In this example, aria-labelledby is used to connect the complementary section with a heading that readers can see on the page. This provides a clearer label for assistive technologies and helps users understand the purpose of that particular region.

It is also worth considering where the <aside> element is positioned. If it sits inside an <article>, its supplementary role will generally be understood in relation to the article's content. However, when it is placed outside an article, the reference point is usually the wider webpage rather than an individual piece of content.

Advertisements may also be included within an <aside> if they serve as additional material rather than forming part of the main discussion. Nevertheless, developers should avoid choosing this element simply because a particular component is displayed in a sidebar. Its semantic purpose must be considered first, rather than its visual appearance.

Common Mistakes: Treating <aside> as Primary Navigation

One misunderstanding that often occurs when building webpage layouts is the assumption that anything positioned along the side of a page should be marked up using <aside>.

This is not how HTML semantics work. The correct element depends on the function and meaning of the content, not where it happens to appear on the screen.

For example, if a sidebar contains the website's main navigation links, <nav> is generally the more appropriate choice. Navigation remains navigation regardless of whether it is displayed at the top, on the left-hand side or alongside the main article.

In other words, a visually separate section is not automatically supplementary content. Developers should identify what each component is intended to do before deciding which semantic HTML element to use. This helps prevent misleading page structures and makes websites easier to navigate for both users and assistive technologies.

For example:

<nav aria-label="Main navigation">
  <a href="/">Home</a>
  <a href="/articles">Articles</a>
  <a href="/about">About</a>
</nav>

When structuring a webpage, developers should select HTML elements according to the role of each section. Use <aside> when presenting additional information, choose <nav> for important navigation areas, and reserve <main> for the central content of the document. Applying these elements correctly gives a webpage a clearer structure and makes it easier for visitors, including those using assistive technologies, to navigate.

Presenting Independent Visual Content with <figure>

The <figure> element provides a semantic container for content that forms a complete, independent unit. This type of content can be separated from the surrounding text or moved to another position within the document without losing its essential meaning.

It is commonly used for photographs, illustrations, charts, diagrams and code examples. Rather than treating these items as unrelated page elements, developers can group them together to show that they belong to the same piece of content.

Why an Image Sometimes Needs More Than an <img> Element

For a straightforward image, using the <img> element on its own is perfectly acceptable. Not every photograph or graphic needs an additional container.

The situation is slightly different when an image is accompanied by a caption, a source reference or an explanation that provides further context. In these circumstances, placing the image inside <figure> creates a more meaningful structure.

This approach allows the visual material and its accompanying information to be treated as one independent component. It also makes the relationship between the image and its description clearer, both for readers and for technologies that interpret the structure of an HTML document.

<figure>
  <img
    src="/images/semantic-layout.png"
    alt="Diagram showing header, navigation, main content and footer"
  >
  <figcaption>
    Figure 1: A typical semantic HTML page structure.
  </figcaption>
</figure>

By using this structure, developers make it clear that the image and its accompanying caption form part of the same content unit. The entire figure can then be moved to another location, styled independently or referred to elsewhere in the document without losing its original context.

However, wrapping every image in <figure> is unnecessary. For instance, a decorative icon used to support the appearance of a webpage, or a simple image placed alongside a paragraph, may not require this additional structure. In such situations, a standard <img> element is often all that is needed.

How <figcaption> Adds Context to Visual Content

When an image or another visual item needs an accompanying explanation, the <figcaption> element provides a suitable way to include it. This element acts as the caption for its parent <figure> and can be positioned either before or after the main content within that container.

An effective caption should offer readers something more than a simple repetition of the image's alternative text. Although both serve descriptive purposes, they are intended for different situations.

The alt attribute supplies a text alternative that communicates the relevant information conveyed by an image to people who cannot see it, including users of screen readers. A caption, by contrast, is displayed on the webpage and gives visitors additional information about the visual content.

For example, the alternative text might briefly describe what a photograph shows, while its caption could explain where it was taken, why it is relevant or what particular detail readers should notice. Keeping these purposes separate helps improve accessibility while making the surrounding content more informative.

For example:

<figure>
  <img
    src="/images/accessibility-chart.png"
    alt="Bar chart comparing accessibility errors before and after testing"
  >
  <figcaption>
    Figure 2: Accessibility errors decreased after the
    interface was tested and revised.
  </figcaption>
</figure>

The alternative text identifies what the chart communicates, while the caption highlights the finding.

For decorative images, use an empty alt attribute (alt="") when appropriate. Captions should remain concise, relevant and accurate. If an image requires a detailed explanation, provide that information in the surrounding content or link to a longer description.

Using <figure> for Code Snippets, Charts and Quotes

The <figure> element is not limited to photographs. It can represent code examples, charts, diagrams, illustrations and other self-contained material.

For instance, a technical article might present a code example as follows:

<figure>
  <pre><code>&lt;main&gt;
  &lt;h1&gt;Welcome&lt;/h1&gt;
  &lt;p&gt;Explore our latest articles.&lt;/p&gt;
&lt;/main&gt;</code></pre>

  <figcaption>
    Example 1: A simple semantic main-content region.
  </figcaption>
</figure>

The <pre> element preserves whitespace, while <code> identifies the content as code. The surrounding <figure> groups the example with its caption.

This structure is useful for educational websites, documentation and programming tutorials. It can also be applied to data visualisations, diagrams and quotations when they form self-contained units.

Implementing Accessible Pull Quotes and Blockquotes

Quotations require careful semantic treatment because their purpose and source matter.

The <blockquote> element represents an extended quotation from another source. The <q> element is generally more appropriate for a short quotation embedded within a paragraph. A pull quote, meanwhile, is a quotation highlighted visually within an article.

A quotation can be grouped with its attribution using <figure>:

<figure>
  <blockquote>
    <p>
      Good semantic markup makes the purpose of content
      clearer to both people and technology.
    </p>
  </blockquote>

  <figcaption>
    — <cite>Web accessibility principles</cite>
  </figcaption>
</figure>

In this example, <blockquote> identifies the quotation, while <figure> groups the quotation and its attribution. The <cite> element identifies the title of a cited work, not simply the name of the person speaking.

If the source is a named author rather than a publication or work, write the attribution accordingly:

<figcaption>
  Quotation by Jane Smith, from
  <cite>Designing Accessible Websites</cite>
</figcaption>

The names and publication in this example are illustrative.

Avoid using <blockquote> merely to indent ordinary text. Likewise, do not use <figure> solely to achieve a visual pull-quote effect if the content does not form a meaningful, self-contained unit.

CSS Considerations for Self-Contained Contextual Modules

Semantic HTML establishes meaning, while CSS controls presentation. Keeping these responsibilities separate makes components easier to maintain and reuse.

For example, an article might display its supplementary information and figures with the following styles:

article aside {
  margin-block: 1.5rem;
  padding: 1rem;
  border-inline-start: 4px solid #64748b;
  background: #f8fafc;
}

figure {
  margin: 2rem 0;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}

These rules distinguish supplementary content from the main article and prevent images from overflowing their containers.

For more advanced page layouts, developers can take advantage of CSS Grid or Flexbox to arrange an aside alongside the main article on wider screens. When viewed on smaller devices, the same section can be repositioned beneath the primary content to provide a more comfortable browsing experience.

It is generally better to avoid unnecessary fixed widths, as they can cause layout problems across different screen sizes. The page should also remain easy to read when visitors increase the browser's zoom level.

Another important consideration is accessibility. Colour should never be the only way to communicate information or indicate differences between elements. Make sure that text and background colours provide adequate contrast, maintain a sensible reading sequence, and style interactive links so that visitors can easily recognise them.

Readers who want to explore these subjects further may also find Structuring Complex Typography and Designing Semantic Design Systems useful. Both topics offer additional insight into how meaningful HTML structures can work alongside well-organised typography and reusable interface components to create more consistent web experiences.

The <aside> and <figure> elements serve complementary roles in semantic HTML. The former identifies supplementary information, while the latter groups self-contained material with its associated context or caption.

Making proper use of the HTML aside and figure elements allows developers to organise webpage content more effectively, support accessibility and simplify future website maintenance. What matters most is choosing each HTML element based on the information it represents and the role it plays within the document. Once the semantic structure is in place, CSS can be used to control its appearance and achieve the intended layout without compromising the meaning of the content.