HTML <label> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <label> HTML element represents a caption or description for a form control, such as an <input>, <textarea>, or <select> element. Its primary purpose is to improve the accessibility and usability of forms by providing a clear textual association between the label and its corresponding form control. This association allows users - including those using assistive technologies like screen readers - to understand the purpose of the input and interact with it more effectively.

A <label> can be linked to a form control in two ways:

Explicit Association: By using the for attribute on the <label> element, which references the id of the associated form control. This creates a direct connection, so clicking the label focuses the related input.
Implicit Association: By wrapping the form control element directly inside the <label>. In this case, the label automatically refers to the enclosed control without needing the for attribute.

Using <label> elements improves form accessibility, making it easier for all users to navigate forms. Labels provide meaningful text for screen readers, expand the clickable area for checkboxes and radio buttons, and enhance overall user experience by clearly indicating the purpose of each form input.

Additionally, labels can include text, inline elements, and even HTML formatting to provide more descriptive instructions or context for the user. Proper use of <label> elements is considered a best practice in web development for both usability and accessibility compliance.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<form>

  <label for="male">Male</label>

  <input type="radio" name="sex" id="male" />

  <label for="female">Female</label>

  <input type="radio" name="sex" id="female" />

</form>

Result

Editor

Attributes

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.

Global Attributes

The <label> tag also supports the Global Attributes in HTML5

Event Attributes

The <label> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <label> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.