Do You Use LABEL?
Have you ever mentioned the existence of the LABEL tag? Have you ever used it? I guess the majority of us don’t. Let’s take a look of the following chunk of code:
<label>username:</label> <input type="text" name="username" /> |
It looks familiar to every web developer, but the most common usage in web forms is:
<div>username:</div> |
or
<span>username:</span> |
How Looks a LABEL Tag?
In fact if you use LABEL for the form instead of DIV or SPAN you’ll get the exactly same result as layout, beside that most common usage is a DIV or SPAN in place of the forgotten LABEL?! Why is that?
For me the usage of DIV has become critically enormous. It may sound strange that there is a debate about the usage of one or another HTML tag, but don’t you think every little text label in a web project is surrounded by a DIV. Actually that makes clear that if you’d like to be semantically correct, than you should use LABEL.
The funny thing is that almost every project is loading its labels in a PHP array or object or whatever and there they are called “Labels”, but when it comes to HTML they are put into a DIVs.
Why Semantics Matters?
In fact this is important because this is really good for web robots. If this is not important for the human eye it is for a machine “eye”. That’s why there are two tags for bold text.
STRONG vs. B
You can see that most of the browsers display both tags exactly the same by default.
Why’s that? Because STRONG is semantically more important than <B>.
So if you want to make a text simply looking bold, wrap it in <B>, but if you want to make it important both for the human eye and for the machines, than use STRONG.
Source: complete demo.