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 the main content on a webpage (e.g. a blog article)? Or ads on the sidebar? In both these cases, we have content that's not directly related to the main content of the webpage.

This is ideal for <aside>.

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 slighly; hence <aside> marks up a block of content that is NOT that much related to nearby content.

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, specifically from the chapter Propositional Logic — Atomic and Compound Propositions:

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 not related to the main content and thus stands perfect to go with the <aside> element.

<aside> could be used for a sidebar, as illustrated below:

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 not directly related to the main content — whatever that is — it must be denoted using <aside>.

Let's consider some code examples now.

We'll start off with, perhaps, the most common usage of <aside>, i.e. to denote promotional sections amid 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>

For compactness, we've replaced the HTML prior to the third paragraph above with ellipsis (...); you'll obviously need to have it in your code.

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 host some styles:

...

<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 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>

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

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 its inner spacing.

Anyways, 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!

Time to move to example number two.