HTML <label> Tag
<label> tag represents a caption to a user interface control (usually a form control, however, it could be any phrasing content).
<label> element allows you to attach a caption/label to a control so that the user knows what the control is for. For example, an input field that accepts the user's first name might have a label of "First Name: ".
Some browsers enable users to select a radio button or checkbox option by clicking on its
<label> tag is written as
</label> with the label text inserted between the start and end tags.
You can use the
<label> tag in one of two ways. You can enclose the associated control within the
<label> element's opening and closing tags. Or you can reference the associated element by it's ID using the
Basic tag usage
In this example, the
<label> tag surrounds a radio button form control (
This example has the same result as the above example. The difference is that, in this example, the
<label> element doesn't enclose the form control (the form control is not nested inside the
<label> tag, like in the above example). Instead, it uses the
for attribute to associate the
<label> tag with a control.
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
<label> element accepts the following attributes.
This table shows the attributes that are specific to the
|for||Specifies the input control that this label is for. This value must be the same as the value in the input control's "id" attribute.|
|form||Specifies the ID of a form to which this control belongs.
[The ID of a form element in the element's owner
The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the
<label> tag , as well as with all other HTML tags.
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the
<label> element, as well as any other HTML5 element.
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Differences Between HTML 4 & HTML 5
form attribute is new in HTML5.
Here's a template for the
<label> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
Here are the official specifications for the
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
- HTML 4 (W3C)
What's the Difference?
W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.