The Mysterious HTML Label Tag

Can you name all the valid HTML tags? Probably not, because there are a number of tags that are rarely ever used (come on, when was the last time you used the <dfn> tag). But there is one tag that you might not know about (because it is not terribly common), but is quite useful - the <label> tag.

I know when I first ran across it, it was a mystery to me. I was exploring the code for another website, and I ran across the <label> tag and went "huh? what's this doing?". I soon discovered why I had never run across it before - the <label> tag does not actually help with the layout or structure of a web page - it helps with usability. For instance, do you notice any difference between the two examples below:

The first example there is using the <label> tag, and the second example does not. If you paid attention when you checked/unchecked the checkboxes, you may have noticed the difference. In the first example, you can click the text, and the checkbox reacts! That's right, the <label> tag allows you to create a "label" for an input element. Take a look at the code for the example:

The special sauce here is the for attribute on the <label> tag. This lets the browser know what input element the label is for. In this example, the label was for the first checkbox, or "example1".

Using the <label> tag works for most types of input element, as you can see below:

Just like everything else in HTML, the label element can be abused, though. You don't have to put text inside the label - you can put whatever you want there (and while in some situations it might be a good idea, in many it actually may be confusing). You also can very easily confuse a user if the label for a input element are not near the correct input element:

That's right, I put a textbox inside the label for that checkbox:

But apart from that last bit of abuse, you would be surprised how much more usable the <label> tag can make your forms. The checkbox is a really easy example - pull open any Windows or Mac application - the label for a checkbox will almost always trigger the checkbox as well. This is because the checkbox is generally a small hit target - it is easy for the user to miss clicking it. With Windows/Mac apps, developers get that behavior for free - on web pages, we have to remember to code it in. So next time you are building a web form, remember to use the <label> tag!