Why do we need to use semantics HTML?

Importance of semantics and its use

3 min readAug 5, 2019

Most of the noob web developers often use <div> to structure their websites. Even most of the linters won't throw errors too. But in HTML5 all tags have its own meaning like <h1> for main headings, <p> for paragraph text. Through these semantic tags, the web browser can understand the content and its unique nature. That's what we call Semantics of HTML.

Why meaning matters?

We know browser doesn’t throw any error and also doesn’t affect the look, then why we need to follow semantic standards.

Every tag has its meaning and default unique properties with it. So, web browser knows how to display it even without CSS.

If you want to add an inline element to your website. You can use <div> tags and change the display property to inline. But it is not a good practice to do, because <div> is a general element, with block as its default display property. So, the web browser has to check the CSS file or its style properties to display an inline element. Instead, we have to use <span> which is an inline element by default.

This is not a huge difference and it is good practice to do so.

Semantics role in SEO

Nowadays, search engines are the major website discovery platform. So if you are building a website then you can consider the search engine optimization (SEO) of your website.

How Search engine index your pages?

They crawl your website and index your pages.

Crawling is the process performed by search engine crawler when searching for relevant websites on the index. For instance, Google is constantly sending out “spiders” or “bots” which is a search engine’s automatic navigator to discover which websites contain the most relevant information related to certain keywords.

Semantics play a huge role in SEO. For example, when you are building a news website and using <div> as your only structuring element, you can use CSS to make the website look good as you like want. But search engine bot can’t understand the contents of your website as it is structured only with <div>. So, they can’t differentiate the importance of contents.

So inorder increase your search engine ranking you have to follow semantic HTML standards. like <nav> for navbar ,<aside> for sidebar, for <footer> footer section,<main> for main section of page, inside <main> tag you can have <section> for sections, <article> for articles and so on.

Conclusion

Using semantic HTML standard on your website is not only a good practice but also a good way to improve your website’s SEO.