<label>

[raae]

Hi I'm Sondre 👋


As a relatively young React developer, HTML semantics is like an old-forgotten art to me. Fortunately, this advent calendar has provided a fantastic opportunity to increase my understanding of it and embrace the festive learning spirit! 🎄

<label> is used to associate a label with a form control (such as an <input>). It provides a better user experience and accessibility by giving context about the information the form control requests.

Or as summarized by the MDN Docs:

The <label> HTML element represents a caption for an item in a user interface.

Accessibility

Screen readers will announce the label text when the user has focus on the form control. Using the <label> tag will drastically improve accessibility for users.

Pitfall: if you want to style a label, do not use heading elements. This will alter how the assistive technology navigates the web page. Use CSS styling instead.

Clickable area

Clicking the <label> of a form control will pass down focus and events to the form control, creating a larger clickable area. This is very useful for smaller inputs like radio buttons and checkboxes and even more so when supporting touch screens.

Semantics

Using the <label> tag also contributes to the semantic structure of the HTML document and makes the code more readable and better conveys the purpose of the text (It is a label, and it belongs to this form control).

Usage

Okey, are you convinced yet?

Using <label> is a must-have if you want to level up the usability and accessibility of your web forms. But how do you actually use it properly? There are two ways to link your <label> to the form control:

1. Explicitly: Set the for attribute to the id of the form control you want to associate the label with

<label for="username">Username:</label>
<input type="text" id="username" name="username">

2. Implicitly: Wrap the form control in the <label> tag

<label>
  Password:
  <input type="text" name="password">
</label>

The code above is also on CodePen

[raae]

@skvisli wants this one

[skvisli]

Hi I'm Sondre 👋

As a relatively young React developer, HTML semantics are like an old forgotten art to me. Fortunately, this advent calendar has provided a fantastic opportunity to increase my understanding of it and embrace the festive learning spirit! 🎄

The <label> tag is used to associate a label with a form control (such as an <input> element). It provides a better user experience and accessibility by giving context about what information the form control is requesting.

Accessibility
Screen readers will announce the label text when the user has focus on the form control. Using the <label> tag will therefore drastically improve the accessibility for users with disabilities.
Pitfall: if you want to style a label, do not use heading elements. This will alter how the assistive techonlogy navigates the web page. Use CSS styling instead.

Clickable area
Clicking the <label> of a form control will pass down focus and events to the form control, creating a larger clickable area. This is very useful for smaller inputs like radio buttons and checkboxes and even more so when supporting touch screens.

Semantics
Using the <label> tag also contributes to the semantic structure of the HTML document and makes the code more readable and better conveys the purpose of the text (It is a label and it belongs to this form control).

Okey are you convinced yet? Using <label> is a must have if you want to level up the usability and accessibility of your web forms. But how do you actually use it properly? There are two ways to link your <label> to the form control:

1. Explicitly: Set the for attribute to the id of the form control you want to associate the label with

<label for="username">Username:</label>
<input type="text" id="username" name="username">

2. Implicitly: Wrap the form control in the <label> tag

<label>
  Password:
  <input type="text" name="password">
</label>

Link to CodePen

[raae]

Thank you 🙏

[raae]

I moved it into the description and did some light editing.