What are semantic tags

Let’s start by stating that they are not a new thing. Here is your daily dose of ancient greek. Σῆμᾰ (sêma) means sign. From this derives the verb σημαίνω (sēmaínō) - to indicate. When we say an HTML tag is semantic, it simply means that the characters between the brackets carry meaning. For example take a look at the <ol > tag. Ol stands for Ordered List.

This feature of tags makes the lives of developers easier.

So what’s new

HTML5 brought new tags (back in 2014). Time has passed since then and all major browsers now support them. Now, you can use <footer> instead of <div id=“footer”> and <nav> instead of <div id=“navigation”> .

Okay, but why should I

First of all, most of us don’t like debugging much. If you don’t use divs everywhere with their ids, (because you are aware of an appropriate HTML tag), you reduce the number of possible errors by at least one. You don’t have to go searching between HTML and CSS files to find out whether you used the id “navigation” or “nav” on the div. You can target the tag by the nav selector.

Of course not only the writer benefits from these new (and old) tags. For instance, lets examine two tags: <i> and <em>. I stands for “italic”, while em stands for “emphasized”. The former has a visual impact, the words wrapped are formated. On the other hand, if you used <em> it would serve as an indication to a screen reader that this part is crucial.

Search engines also understand the meanings of these tags, applying to the previous example also. Some of them may also want to find the navigation bar, and they have a much easier job if they find <nav> instead of <div class=“sd-5445sd64-k navigbar”>. Using eg. the <time> tag helps engines indexing better too.

To be continued

I invite you to read more, there’ll be more posts on this topic. In the meanwhile, I recommend, when you see a tag, try to guess what additional information its name carries about the usage of it. And if you can’t, just search the web, there is nothing you can’t learn about programming online.