By raae for Semantic Advent |

When a piece of content is tangentially related to the content around it, reach for <aside>.

The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
MDN Docs

My rule of thumb here is that if I can remove a piece of content and the remaining content still makes sense, it's a candidate for <aside>.

I believe originally, this was meant to indicate content that would be pull quotes and sidebars in a printed layout. Those use cases are still relevant, but these days, a more common use case is probably in separating ads and other types of calls to action from their surrounding content.

You could argue an ad is often tangentially related to the newspaper article it shows up within. However <aside> is your best choice in indicating that the ad is not to be considered as a part of the article's content.

As with <article>, it has no default styling but quite a powerful semantic meaning and should not be used to simply add a set of styles. I once reviewed a site that had put the title of an article inside <aside>. Essentially letting Google know the title was not related to the rest of the content 😱

Sign up and receive byte-sized emails about Semantic HTML Elements this advent with real-world use cases!