HTML5 semantic tags and where to use them

I still remember when I first started using HTML5 new semantic tags a few years ago. I used to read lots of articles about how and where to use them and I was very excited about how they make the document look nicer and more readable.

Tags like article, section, aside, nav, header,footer were my favourite ones and they still are. I want to have a review here about them and renew my knowledge about them.

Article

Article is the best semantic HTML5 tag I suppose that is used in many cases. The most popular one is to use it for the main content as its name suggests. It could hold the main content of the post or page. Also it could be used as the core section of a repeatable content such as big lists or blog posts so you could have more than one article in a page but it is not best practice.

Section

For the last example mentioned above , we could use section as the main wrapper of each article or portion of content.Section is a very useful tag that could be used as a container or wrapper all through the document to help organise and seperate different part of the document. It is best practice to use section as a bigger container inside the page as our old div could be used for smaller sections.

Aside

Perhaps aside is a very interesting tag that could be misused. Some use it as if it is a section tag and use it for big containers. Its best place as its name suggests is the sidebars or side menu container. Even in the header or footer it could be used as the side section for contact details sections. We should be careful not to use it as a section as it is not for this purpose.

Nav

Many developers cheered up when they realised the new tag nav has been introduced at last and they could finally have a real semantic menu. It is no just to be used as header menu but you could use it in the footer and sidebar menus as well.And the best practice is to use it as the ul, your menu list wrapper.

Header

The name speaks for itself again.Header soon became a very popular tag. Obviously you would use it as the main header of the page but also it could be used as the header of each section or as the container of the main heading tag in the page. And if you have sections in the page that have clear definition for header, you could use it there as well.

Footer

And the last one here is the footer tag. A useful and semantic tag that makes life easier. We mostly use it as the container of the footer section which is great. Alongside we could have footer in each section of our page or in repeatable sections like posts loop in the page. The best practice is not to use it in header.

And more …

And there are other HTML5 semantic tags that should be used wisely and carefully as well. This is how you declare and define your DOM so it is better be clean and clear. A well defined DOM is easier to read and analyse. Using tags in the right place increases the readability of the Document for screen readers and improves the SEO which comes after nice indexation of a well defined document model.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.