label: The Label element

The <label> HTML element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute.

Attributes

Specific attributes

Recommended attributes

for="[element id]" specifies which form control a label is bound to. The value must be the id of a form control in the same document.

Allowed attributes

form="[form id]" specifies the form element with which the label is associated.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/subscribe" method="post">
  <h2>Newsletter Subscription</h2>
  
  <!-- Method 1: Using the 'for' attribute -->
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="name">Name (optional):</label>
  <input type="text" id="name" name="name">
  
  <!-- Method 2: Wrapping the control inside the label -->
  <label>
    <input type="checkbox" name="agree" value="yes" required>
    I agree to receive updates about IndieWeb events and resources
  </label>
  
  <fieldset>
    <legend>Subscription Type</legend>
    <label for="weekly">
      <input type="radio" id="weekly" name="frequency" value="weekly">
      Weekly digest
    </label>
    
    <label for="monthly">
      <input type="radio" id="monthly" name="frequency" value="monthly">
      Monthly summary
    </label>
    
    <label for="events">
      <input type="radio" id="events" name="frequency" value="events">
      Events only
    </label>
  </fieldset>
  
  <label for="interests">Topics of Interest:</label>
  <select id="interests" name="interests" multiple>
    <option value="personal-sites">Personal Websites</option>
    <option value="static-sites">Static Site Generators</option>
    <option value="webmentions">Webmentions</option>
    <option value="microformats">Microformats</option>
  </select>
  
  <button type="submit">Subscribe</button>
</form>