## What is `<aside>`

?

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

**element is used to represent content that's**

`<aside>`

**not directly related**to

**nearby content**.

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:

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

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:

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.

## Examples of `<aside>`

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.

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:

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.