What is Semantic HTML?

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 –

<header>

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

<header>
logo and navigation links
</header>

List of HTML5 Tags

The common HTML5 semantic-based tags are:
<section>
<header>
<nav>
<article>
<aside>
<footer>

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:
<abbr>
<cite>
<progress>
<mark>
<time>

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

CONCLUSION

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: