How to use the aside semantic element

The aside semantic element is well used in content that surrounds the main content, do you want to learn how to use it in other ways? And fully understand what it is for? Check out the post!

Optimal use of the semantic aside element

HTML5’s aside element came to solve some problems, obviously related to HTML semantics.

Because the div element doesn’t solve it, it has no semantic value for web pages.

So we use this tag when we want to add content related to the main one, but these two don’t have the same purpose.

A great example would be a blog with the author’s posts in the main content, main element, and a short biography about the author in a sidebar inside the aside element.

But it doesn’t stop there, the aside element can still be used to house a text of curiosity.

In the same style explained above, the aside content is indirectly linked to the main content.

Example of using the aside element

Check out an example of using the aside:

<main>
     <h1>The Importance of Semantic HTML</h1>
     <p>Semantic HTML was created to make sense of tags, making it more readable for both programmers and search engines like Google.</p>
     <aside>
         Matheus is 28 years old and is a full stack developer at a company that produces high quality dietary supplements.
     </aside>
     <p>More about semantic HTML...</p>
</main>

Here we are simulating a post and in the middle of it is a short introduction about the author.

The main subject is the post, but whoever wrote it is directly linked to it, but it is not part of the main content.

So we linked each other through the aside tag, cool right? 😀

Conclusion

In this post, we saw that the aside element should be used when there is a need to insert content separate from the main subject of the page.

That’s because the aside tag may be related to it, but it doesn’t necessarily represent the same line of reasoning, but a connection to the main content.

And that’s it for today, until the next post!

Also check our YouTube channel by clicking here.