Semantic HTML - Asides

The <aside> element might not be well-known to a lot of people but its purpose is inherently present on most websites. Let's see how...

Ever noticed a promo section in between a blog article? Or maybe related links on the sidebar?

In both these cases, we have content that is not part of the main content of the webpage but rather only related to it.

And this is exactly what <aside> is meant for.

Quoting from the official HTML standard:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

The word 'tangentially' means to be related very slightly; hence <aside> marks up a block of content that is NOT that much related to nearby content.

Think of <aside> as follows: The content nearby <aside> should make sense even when the <aside> is removed from it.

For instance, as we talked about earlier, <aside> could be a promo section in between long-form text. Shown below is an example from our very own website (an old one):

An <aside> section from Codeguage.

The section highlighted above is meant to ask for feedback from the user.

Clearly, as you can reason, this is something related (but only slightly) to the main content — the user reads some content and then the highlighted section asks for feedback for that reading experience.

Therefore, this feedback section is perfect to go with the <aside> element.

<aside> can also be used to denote a sidebar containing related links for the underlying page, as is typically found on many websites:

Sidebar section on a webpage.

Or it could even be the 'More articles' section that typically comes at the end of a blog article, represented by the rectangle box below:

'More articles' section on a webpage.

Simple put: whenever we have content that's somehow related to the main content, whatever that is, but not an intrinsic part of that main content, it must be denoted using <aside>.

Let's consider one of the most common usages of <aside>, i.e. to denote promotional sections amid the main content on webpages.

In the following code, we have an HTML document with some description of the famous Pythagorean Theorem:

<h1>Pythagorean Theorem</h1>
<h2>A geometric harmony</h2>

<p>The <b><i>Pythagorean Theorem</i></b> is a fundamental principle in geometry. It states that in a right-angled triangle, the square of the length of the <i>hypotenuse</i> (the side opposite the right angle) is equal to the sum of the squares of the lengths of the other two sides. Mathematically, it can be expressed as:</p>

<p><b>c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup></b></p>

<p>Here, <b>c</b> represents the length of the hypotenuse, while <b>a</b> and <b>b</b> are the lengths of the other two sides.</p>

<p>This theorem is named after the ancient Greek mathematician <b>Pythagoras</b>, who made significant contributions to the field of mathematics.</p>

If you notice, this is essentially the same document that we saw in the HTML Foundation — Pythagorean Theorem Exercise.

Let's say we want to add a promo section right after the third paragraph, talking about a third-party website to learn mathematics online for free.

We'll do so using <aside> as shown below:

...

<p>Here, <b>c</b> represents the length of the hypotenuse, while <b>a</b> and <b>b</b> are the lengths of the other two sides.</p>

<aside>
   <h2>Learn mathematics for free!</h2>
   <p>Visit <a href="https://example.com">example.com</a> and browse from a category of hundreds of mathematics courses, all for free.</p>
</aside>

<p>This theorem is named after the ancient Greek mathematician <b>Pythagoras</b>, who made significant contributions to the field of mathematics.</p>

Live Example

To add some spice to this example, let's employ a couple of basic CSS properties to make the promo section pop out from the rest of the content, and actually look like a promo section.

Following, we add a style attribute to the <aside> element to define some styles:

<aside style="background-color: pink; padding: 20px">
   <h2>Learn mathematics for free!</h2>
   <p>Visit <a href="https://example.com">example.com</a> and browse from a category of hundreds of mathematics courses, all for free.</p>
</aside>

We already know what background-color is, however, padding is a new property. To quickly go through it, padding gives inner spacing to an element.

The larger the value applied to padding, in units of px, the larger the inner spacing of the element.

So now, with the styles in place, let's see the output:

Live Example

As you'd agree, the <aside> now looks much more different than the rest of the content, which is exactly how we need to portray it.

Perfect!

Most importantly, notice how the content marked up using <aside> is not part of the main content of the document but slightly related to it.

We were talking about a theorem in maths (the main content) in the document and meanwhile, <aside> gave us the opportunity to present a course for learning maths.

Amazing, isn't that?

<aside> is a sectioning element

<aside> is one of the four elements in HTML which define semantic sections of content in HTML documents, referred to as sectioning elements.

In that way — that is, being a sectioning element — <aside> defines the scope of any <header> or <footer> elements inside of it.

Without a sectioning element, recall from the previous Semantic HTML — Headers and Footers chapter that <header> and <footer> apply to the entire document.

Shown below is an example:

<aside>
   <header> <!-- Applies only to this section -->
      <h2>Learn mathematics for free!</h2>
      <p>Your go-to platform to learn mathematics</p>
   </header>

   <p>Visit <a href="https://example.com">example.com</a> and browse from a category of hundreds of mathematics courses, all for free.</p>
</aside>

Extending the example above, here, the promotional section contains a small introductory sub-section, marked up using <header>. Importantly, this <header> only applies only to the <aside> element, not to the entire document.

Should we replace the <aside> with a non-sectioning element, like a <div>, the <header> would then apply to the entire document:

<div>
   <header> <!-- Applies to the entire document! -->
      <h2>Learn mathematics for free!</h2>
      <p>Your go-to platform to learn mathematics</p>
   </header>

   <p>Visit <a href="https://example.com">example.com</a> and browse from a category of hundreds of mathematics courses, all for free.</p>
</div>

<aside>'s content must be related to its surrounding content

It's important to note that <aside> is only sensible when we have related or complementary content with respect to the main content or, in general, the content surrounding <aside>.

When we have content that is NOT related in any way to the surrounding content, we must refrain from using <aside>. We're better off at using a <section> or a good old <div> instead.