Importance and Benefits of using Semantic tags in Web Development

Wants to know what are semantic HTML tags? and what are the benefits of using these tags? then you came across right blog.

The HTML tags which clearly gives an idea about its content to the browser and the developer are known as Semantic tags. Let's take an example -

<div> is a HTML tag and it defines nothing about its content so it is a non-semantic tag. On other hand,<nav> is a HTML tag and it gives idea about its content so it is a semantic tag.

Now you think what is the importance of using Semantic tags? So answer is given below -

Specific Purpose and Easy to Understand-

Semantic tags have their own purpose, it’s easier for both people and browsers to read and understand it. Let's understand this with an example. If your brother handed you two lists and told you to buy all the fruits from any one of the list. That two lists are as given below :
Fruits list one -
1) A fruit which is green outside, red inside, watery, and sweet to taste.
2) A fruit which is yellow outside, white inside, and sweet to taste.
Fruits list two -
1) Watermelon
2) Banana

Above two lists are same but second one is easy to understand. Similarly for non-semantic tags you need to refer its styling to understand it, while one can easily understand meaning of semantic tags without CSS.
Code with non semantic tags -

 <div class="container-nav"></div>
  <div class="article">
   <div class="article-image"></div>
   <div class="article-content></div>
  </div>
 <div class="footer"></div>

Code with semantic tags -

 <nav></nav>
  <article>
   <img>
   <p></p>
  </article>
 <footer></footer>

Among above code snippets the one with semantic tags gives clear idea about its components.

Search Engine Optimization -

Also using semantic tags helps you in SEO of your website so it will reach to your target audience. Search engines set keyword importance by their placement in the HTML document. For example, keywords enclosed in an <h1> tag are given more importance than those enclosed in an <div>.

Responsiveness -

Using Semantic tags makes your website responsive without using @ media queries.

Advantage in Coding Round-

Big companies like Microsoft looks at this good coding practices in their machine coding round of hiring process.

These are some benefits of using Semantic HTML tags. Let me know your thoughts on this in comment section.

Rushikesh Chaudhari