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

Often times I encounter this jargon word Semantic in HTML, Here I'm gonna explain this Semantic word and also what it's used for in HTML, So first and for many let's understand the meaning of Semantic word, As Wikipedia says, Semantic means syntactically valid string, so we will say that Semantic tags mean syntactically valid tags or in simple words, we will say that Semantic elements are those elements that convey some specific meanings and indicate what sort of content they contain and what role that content plays within 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 will not see any difference within the UI of your webpage. However, remember one thing that you simply aren't just handling humans, there are Web Crawlers and search engines spiders too, they read sites automatically, without prior knowledge of what they could find. These are hooked in to the Semantic clarity of sites they find as they use various techniques and algorithms to read and index many sites each day and supply web users with relevant results and clearly , results in a far better program ranking.

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

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 🙏