HTML Semantic Tags, Why is it important to use Semantic HTML?

Often times I come across this jargon word Semantic in HTML, Here I am gonna explain this Semantic word and also what it is used for in HTML, So first and for most let's understand the meaning of Semantic word, As Wikipedia says, Semantic means syntactically valid string, so we can say that Semantic tags mean syntactically valid tags or in simple words, we can say that Semantic elements are those elements that convey some specific meanings and indicate what type of content they contain and what role that content plays in the document.

Why do we need to use semantic HTML tags?

But why bother writing Semantic HTML, If you design all the div correctly then you won't see any difference in the UI of your webpage. However, remember one thing that you are not just dealing with humans, there are Web Crawlers and search engines spiders too, they read web pages automatically, without prior knowledge of what they might find. These are dependent on the Semantic clarity of web pages they find as they use various techniques and algorithms to read and index millions of web pages a day and provide web users with relevant results and obviously, leads to a better search engine ranking.

Semantic elements also increase the web accessibility of the web pages and help screen readers and as we know the number of smart devices keeps growing. It also simplifies page navigation for assistive technologies as well.

Semantic elements also improve the code structure and make code more readable.

Some Semantic HTML tags

There is pleather of Semantic tags that exist in HTML but most of them are not that much used on most websites. Some Semantic tags that are mostly used and popular too are :

Header

nav

section

aside

main

figure

figcaption

article

details

footer

You can learn about roughly 100 Semantic tags examples on MDN or HTML Standard, and yeah if you want a detailed article on these tags and how they work internally then let me know and I will surely come up with one more article on that too.

Semantic HTML is not only about using the new Semantic tags but about using the correct tags for each element so that it is easy to navigate for all users.

In the end, I just want to say that learning Semantic markup will make your life easier, your code cleaner, and your website better.

Thanks for reading 🙏