The **`<label>`** element is used to incorporate a text label with an `<input>` field. The label identifies the `<input>` field and informs users about what to enter in the field. 



It is important to note that the `<label>` element only exists in relation to another element. In this case, it is associated with a form field (usually with some `<input>` element). 

# Syntax

```HTML
<input id="first-name" name="first-name">
  <label for = "first-name"> First Name </label>
```

The **`for`** attribute identifies the `<input>` field to which the label is associated. The value in the `for` attribute should match the `id` of the `<input>` field. 

# Example

In the following example, we create three options using the checkbox type in the `<input>` field. Each label is associated with the `<input>` field through the `for` attribute.

 

<html>
  <p>
    Select the degree program you want to enrol in
  </p><br>

  <input type="checkbox" id="cs" name="program" value = "CS" >
  <label for="cs">Computer Science</label>

  <input type="checkbox" id="ee" name="program" value="EE">
  <label for="ee">Electrical Engineering</label>

  <input type="checkbox" id="phy" name="program" value="PHY">
  <label for="phy">Physics</label><br><br>

  <input type="submit" value="Submit">
</html>

codemirror

Although it is possible to put unmarked text beside a form field to label it without the `<label>` element, having an associated label provides better usability. With a properly marked-up label, a user can easily select the option or zoom into it. This might not be noticeable in desktops or laptops, but it is an important feature in smartphones. 

What is label element in HTML?

The `<label>` element associates text labels with `<input>` fields, enhancing usability, especially on smartphones.