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
Result
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 author bios, sections expanding on the main topic.
HTML
CSS
Result
The <aside> is placed within the section”><main> section, next to the primary content about Greece.
It contains background information on Corfu, providing extra information without interrupting the flow of the main article.
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.