A useful note can interrupt an article if it sits in the middle of the explanation. The HTML aside element gives that note a distinct place in the document while keeping its connection to the surrounding subject clear.
Choose it for material a reader can skip without losing the central argument: background, a related resource, or a short explanation of a term. The HTML Standard describes this content as tangentially related to the content around it. That relationship, rather than the box’s position on screen, should drive the choice.
Aside in HTML: A Document Example
The following page explains a cache policy and places a related definition inside the article. Save it as an HTML file and open it in a browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cache policy</title>
</head>
<body>
<main>
<article>
<h1>Setting a cache policy</h1>
<p>Choose how long a response can be reused before it becomes stale.</p>
<aside aria-labelledby="ttl-heading">
<h2 id="ttl-heading">What is TTL?</h2>
<p>Time to live is the period for which a cached response remains fresh.</p>
</aside>
<p>Set an appropriate lifetime for the resource and its update frequency.</p>
</article>
</main>
</body>
</html>
Read the structure from the outside in. The document’s main contains its primary content. The article contains the cache-policy explanation, including the related note. The note’s heading labels the complementary region through aria-labelledby; the reference points to the heading’s unique ID. The two surrounding paragraphs remain part of the article’s central explanation. The example uses a complete document so the relationship is visible in context. In a larger application, the same pattern can be placed in a template that renders the article and its related note.
The aside in HTML is close to the passage that benefits from the definition. Its contents add context, but the instruction still makes sense without them. A heading in the complementary note also makes the note easier to identify when a reader navigates the page by headings or landmarks. An accessible name is particularly helpful when a page has multiple complementary regions.
Placement and Meaning
Place an article-specific note inside its article, near the relevant passage in source order. A set of links related to the site more broadly can sit outside the article, still within the document body. In either case, check the relationship to its surrounding content. A crucial step in the cache policy belongs in the main explanation, even if a design puts it in a shaded box.
The complementary element communicates a complementary region; it does not create a sidebar layout. Browsers may display its contents as ordinary block content. Use CSS to place or style the region, and check the reading order at narrow widths as well as on a wider screen. A visual position beside an article alone does not establish semantic relevance.
A neutral div groups content for styling or scripting without assigning that relationship. Use it for a wrapper around layout components when no more specific element fits. Use aside HTML markup when the content itself warrants a complementary region. Conversely, wrapping essential instructions in that element would give readers and assistive technology a misleading signal about their role.
The MDN element reference describes common uses and links to the specification. It also identifies the implicit complementary role exposed by the element. That role helps navigation, but it does not replace a clear heading or meaningful link text.
Does Every Note Need One?
No. A brief clarification that is integral to a sentence can stay in the paragraph. Use a separate region when the material is related but distinct enough for a reader to skip or revisit independently.