It’s been 33 years since HTML was founded. As time has passed, it has undergone significant changes. We have witnessed numerous transformations in HTML.

However, the major update was HTML5, which was introduced in October 2014. This update brought forth the idea of using semantic tags in your web development code. However, it was often denied during the construction of web apps/websites.

Today, in this article, we are going to explain why you should use semantic HTML tags in your code instead of using <div>

So without wasting time, let's get started:

What is a HTML5?

Before we delve into learning about semantic tags, let's gain a quick understanding of HTML5 because the concept of semantic tags was introduced in this update.

HTML5 is the major update of the Hypertext Markup Language (HTML), the standard language for creating content on the World Wide Web. Introduced in October 2014, HTML5 brought about significant advancements in web development, offering a more versatile and feature-rich platform for building modern and interactive websites.

Some key features and improvements introduced with HTML5 include:

• Semantic Tags

• Multimedia Support

Canvas and SVG, and much more.

If you want to learn more about HTML and HTML5, you can take a look at my previous article on the subject : Difference between HTML and HTML5

What is a Semantic Tags?

Semantic tags in HTML are designed to add meaning and structure to the content of a web page, making it more understandable for both browsers and developers. Instead of using generic

elements, semantic tags provide specific information about the type of content they enclose. This not only enhances the clarity of the HTML code but also contributes to improved accessibility and search engine optimization. Some commonly used semantic tags in HTML5 include:

• <header>: Represents the header of a section or a page, typically containing introductory content or navigation links.

• <nav> : Defines a navigation menu, helping to organize links related to site navigation.

• <main> : Signifies the main content of a document, excluding headers, footers, and sidebars.

• <article> : Mainly use for news article or blog post

• <footer> : Denotes the footer of a section or a page, typically containing copyright information, contact details, or links to related documents.

and so on.

Why you should use it ?

There are plenty of benefits to using semantic tags in your website. Some of the key features are:

• Clear Website Structure : Using semantic tags provides a clear structure to your website, making it easier for both developers and visitors to understand the content organization.

• Improved Search Engine Ranking :Semantic tags contribute to better rankings on search engines such as Google and Bing. When you use semantic tags, it informs search crawlers, also known as bots, to quickly distinguish different sections of your website. This enhanced clarity in structure can positively impact your website's search engine optimization (SEO).

Bonus Tip :

As a web developer, you can't ignore the power of semantic tags. Also, this is one of the most favorite interview questions that is often asked. Even when I got my first job, I faced this question too.

Here is the complete list of Semantic Tags : W3 List

I hope you found my article about Semantic Tags useful. If so, please hit the like button below and share it with your friends.

If you still want more information about any other topics related to front-end development, just drop a comment, and we'll definitely try to quickly publish it.