How many web developers have HTML skills in their CVs? I’d say 90%.
How many of them really know how to use it properly? I’d say 40%.
The other 50% just don’t care about it. The most common case that I encounter during the projects I work on – is using any HTML tag just to make the layout look similar to the design. If something doesn’t function as expected, it is wrapped into divs, tables, spans and so on, until it fits the design. And, finally, we get something like this:
<table> <td> <div> <span>Some text</span> </div> </td> <td> <div> <span>Some text</span> </div> </td> </table>
Instead of simple:
<div> <span>Some text</span> <span>Some text</span> </div>
If you’re a frontend developer, I bet you’ve encountered a lot of cases like this:
<div class="btn" onclick="doSomething()"> Click me </div>
<div class="link" onclick="goSomewhere()"> Click me </div>
While there are specific tags for buttons and links, people prefer to use anything but not the appropriate tags. Because it is easier. There is no need to care about tens of tags if you have a universal one.
Or another example:
<p class="title">This is a title</p> <p class="subtitle">This is a subtitle</p> <p>This is the article content</p>
Or this one:
<p>This is a list of: <br> Element 1, <br> Element 2, <br> Element 3... </p>
And there are tons of such examples.
Technically, such solutions will work. You can style them using CSS and make them look and perform exactly as your designer wanted. And, an average user will never have any incommodities related to this layout.
But, any developer who will start setting up the cross-browser compatibility, responsiveness, SEO, or accessibility on your website, will never thank you for these solutions.
Moreover, I had some situations when in code reviews I pointed out that a part of HTML code is not semantically correct or can be optimized and got an answer like: “It works. So, it’s not a big deal! Let’s keep it as it is.”
I can’t keep quiet in this case.
If you want to ensure good SEO, you need to have a semantic markup. What is that?
A semantic HTML tag is the one that speaks for itself. For example, the <nav> says that inside it is navigation and only navigation. The <header> contains what?…suddenly – a header, <p> – paragraph, <form> – form and so on. My point is that whenever you see the semantic tag, you definitely know what it has inside and how it should be treated.
There are non-semantic tags like <span> or <div>, which are of course very useful, but they don’t say anything about their content, and they should be used only when there are no semantic options for the markup.
Semantic HTML is very useful for the developer who reads the code, but it is much more useful for the search engine, because Google (for example), no matter how smart it is, can see only the markup of the page without any styling. Moreover, for the search engine <div class=”title”></div> and <div class=”paragraph”></div> look absolutely the same and it cannot define which one is more important. As a result, the best-case scenario is that your website will have a random title in the search results, but most likely it will not even appear in the list as Google bans websites without semantic markup.
Not only the search engine optimization depends on semantic markup. Any screen reader is very sensitive to the markup. According to WHO – 15% of the world’s population has some sort of disability. And, the majority of them use the keyboard for navigation. So, theoretically, you lose 10-15% of your visitors if your website is not accessible. Pretty much, huh?
Besides, 70% of good accessibility is the semantic markup. Make your conclusions.
Somebody can say that 10% is not too much, but there are real examples when website owners got sued because of lack of accessibility and it was considered as discrimination of people with disabilities. Of course, almost all of these cases happened in the USA, but let’s be honest, you don’t need to live in the USA in order to work for the USA, right? So, better to get a good habit now not to waste time on it when you get a nice American project.
While you’re developing a component or page you know each corner of it. You can say for sure what each tag is responsible for. Today. But tomorrow when you open the same file you need to recall something, what about the day after tomorrow? Let’s assume that you have several tasks and you need to switch between them. You get my point, right? The cleaner and more semantic your code is – the easier it is for you to continue developing or maintaining the code. Furthermore, of course, clean and semantic html is some sort of respect for your colleagues who come to the project and need to edit the code they see for the first time.
Simple But Important
I totally understand that HTML is very simple, and because of that simplicity it is not treated as something important. Which is completely wrong.
It is the alphabet of web development. Moreover, starting writing a poem using just 30% of letters is possible, but it limits you to express what you want to say as you you waste way more time and effort on finding proper words.