Description

The label element is invisible to users (unless it’s styled with CSS, or behavior is attached to it via JavaScript and the DOM). By default, applying a label to a form control’s descriptive text makes no difference to its visual appearance. However, there are other benefits to be gained by explicitly linking the text to the form control using the label:

• It provides a usability improvement for mouse users. In the majority of current web browsers, the text that’s associated with a given form control (by being contained within the <label> and </label> tags) also becomes a clickable area. Thus, if the form control is something small, like a checkbox or radio button, you can massively increase the “hit area” for the mouse user by applying a label to it.
• It improves accessibility. By adding a label to all controls, you make the controls’ purpose clear to users of assistive technology (for example, visually impaired users reading the page through a screen reader). If the form controls aren’t linked to their associated text descriptions in this way, the assistive technology may need to hazard a guess as to which control goes with which description, depending on the layout of the web page and/or the source order of the markup to make its interpretation.

Note that there are two ways in which you can use the label element, both of which are detailed in the section on the for attribute.