Using labels in a nice semantic fashion
It is fairly easy to distinguish a developer’s knowledge level by their usage of label elements. To see how much they care about accessibility, usability and semantics.
If this is something new to you, I’d recommend that you first read Label - the secret element. What I wanted to touch on here is the semantic value on how you use the label element together with form elements (e.g. input elements, textarea elements).
Ways to use label
The most common is like this:
<label for="user-name">Name</label>
<input id="user-name" type="text">
Another way which has become fairly popular is to wrap the corresponding form element within the label element, e.g:
<label>
Name
<input id="user-name" type="text">
</label>
With this approach you don’t need to specify the for attribute to know which element should get focus when you click on the text name. That is, for most web browsers but Internet Explorer; there you still have to specify the id of element you want to connect to the label.
However, looking at this last approach I’d say that it’s less good from a semantic standpoint. Just looking at the word label, tasting it, it is exactly what it is: a label. Putting any form element within the label takes away the value of the label, and instead becomes some sort of block element (fieldset or div), like a container, but with label functionality thrown in for good measure.
In my mind the form element isn’t a part of the label; it has a connection to it. I’m sure some people would like to argue that it is nice for the structure to put the connected form element within its label, but for such relations we have the for attribute.
My recommendation is: no form elements within labels.
