I still can't believe how many big-name websites neglect to use this wonderful bit of markup! Read this, and make it a habit. It's so easy!
Let's say we're marking up a contact form where visitors enter a bit of personal information, such as their name, sex, and which products they're interested in. I'll keep this stupid simple: when you're creating this form, there is a proper place to put the label
for each input element. It's called the label element. Be sure to use the label
element's for
property, that way the label
knows which input
element it refers to.
The reason for going through this trouble rather than just using a <div>
or a <span>
element, is because the browser knows that if a <label>
element with a for
property is clicked that the corresponding input
element should receive focus. Having the label AND the input element clickable makes for a much larger target to click on, making the human/computer interaction target more usable.
Continue Reading