HTML 5 <label> Tag

The HTML <label> tag is used for adding a label to a user interface control (often a form control, but it could be any phrasing content).

You can use the <label> element in one of two ways. You can nest 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 for attribute.

If you use the <label> tag, in some browsers, users can select a radio button or checkbox option by clicking on its label.

Demo

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

AttributeDescription
forSpecifies the input control that this label is for. This value must be the same as the value in the input control's "id" attribute.
formSpecifies the ID of a form to which this control belongs.

Possible values:

[The ID of a form element in the element's owner Document]

Global Attributes

The following attributes are standard across all HTML 5 tags (although the tabindex attribute does not apply to dialog elements).

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.

For a full list of event handlers, see HTML 5 event handler content attributes.