Semantics Tags

Categorizing Your Content in HTML5

If you are a front-end developer you must have heard of semantic tags. Well for many it's a favorite interview question.

Wondering what exactly it is??

Believe me, its a not a big deal, Semantics simply allow you to describe more precisely what your content is.

Let me give you a very basic example if you want to have a header and footer on your website, what you usually do

<div class=” header”>….</div>
<div class =”footer”>….</div>

So now with HTML5, you can write the above one like-

<header>….</header>
<footer>….</footer>

As you can see instead of using a div tag, you can use the proper tag like a header and footer which simply describe what your content is.

There are so many semantic elements that you can find here.

But keep in mind they are just tags, you still have to tell them what position you want them to take and what style they should follow. Yes, you have to.

If you write

<footer>….</footer>
<header>….</header>

You can’t expect the header to be at the top and the footer to be at the bottom, they will simply follow the document flow and you will end up getting a footer at the top and the header following it.

Confusing….thinking how they are useful????

First, it is much easier to read. This is probably the first thing you will notice when looking at the block of code using semantic elements. The easier it is to read and understand that code, the easier it makes your job.

Second, it has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies especially as the number of smart devices keeps growing(like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Semantic HTML5 is an incredibly powerful way to communicate to Search engines like Googlebot and Bingbot the rôle each part of your page plays. And when they have an accurate understanding of that, they can more accurately annotate your content when they store it.

Help Googlebot and Bingbot, and they will help you, and this will improve website SEO which is a big deal.

So next time you are designing your website think of what you want to convey to the search engine, what exactly your element is going to output, and then use the semantic tag which plays the role perfectly.

Although be careful with the semantics like in case you have created three sections( using <section> tag)although the information is related and actually it's one section with the three subsection topics then it might lead to poor SEO.

Explicitly providing misleading information to Googlebot and Bingbot will have a negative impact on their understanding and hinder the richness and accuracy of their annotations, thus making your content harder to find by the ranking algorithms.

You can refer to this for more clear understanding.

Connect with me on Linkedin

Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer