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 –
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.
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:
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.