HTML5 ASIDE element with example - Lambros Hatzinikolaou

The <aside> tag, represents content that is indirectly related to, and separated from, the main content.

The <aside> element is usually used in sidebars, pull quotes, or advertisements.

It can benefit search engines by helping them better understand related content’s purpose, which can help in boosting SEO.

It also betters document’s structure by clarifying which content is supplementary, which as a result improves accessibility.

Let’s see an example of the <aside> tag in use:

HTML

CSS

Code example of styling the aside element.

Result:

How the code for the eside elements renders in browser.

Using ASIDE in the main content, not just in a sidebar

Content on the <aside> element can also support or provide additional information to the main content, such as author bios, sections expanding on the main topic.

HTML

Example of using the aside element in the main content.

CSS

Result:

How previous code is rendered in the browser. — Here, aside contains background information on Corfu without interrupting the flow of the main article.

The <aside> is placed within the <main> section, next to the primary content about Greece.

The <aside> defines this section as supplementary.

Readers interested in Corfu can read that content, but skipping it won’t affect their understanding of the main topic.

It is common in blogs, articles, and educational content to include side notes, interesting facts, or related information.

The <aside> element is ideal for that purpose.

Thanks to aside the side note in the example is distinct for screen readers and web crawlers but it is not distinct visually.

To style the <aside> element and make it visually distinct from the main content, you can apply some CSS to create a clean, readable layout.

Although my blog doesn’t support comments, feel free to reply via email or X.