Have you ever used labels on a book, a storage item or food container? Well Semantic HTML is not so different than a label.

Websites have a common structure, such as header, footer, navigation links etc. With the introduction of HTML5 more than a decade ago, we can label the different sections of the website page with a standard name which is also convenient for designers. Semantic HTML is the use of HTML5 tags within a web page to define the different components or web elements to a browser or search engines, and not simply for presentation or looks.



How to use Semantic HTML

Earlier to make a website page header for example, we used the tags like this –

<div id="header">

We can now create the same header like this –


Good thing is we name the item exactly what it is with opening tags and closing tags without calling the div name everytime –

logo and navigation links


List of HTML5 Tags

The common HTML5 semantic-based tags are:

The below image clearly illustrates how semantic HTML5 tags create the different sections and elements in a web page.


semantic HTML5


Benefits of HTML5 Tags

  • We can call these elements multiple times in a page if needed.
  • It makes the code easier to read when making a web page or when editing page content.
  • Such tags make it simpler for the browser, machines and search engines to understand page structure.


Other HTML5 Tags:

To see a complete list of HTML5 based tags, click here. If you would like to know about responsive design click here.



HTML5 Semantic-based tags are more easy and smarter to use. We can use such tags more than once on a web page. It helps the browser to understand the different parts of a page and its not merely for aesthetics. There are many HTML5 tags for different requirements.


Please share and like:

Leave a Reply