# How do you use the HTML label tag to improve your website?

With the HTML `label` tag, you improve your website’s usability and accessibility. `label` can be used for input fields, checkboxes, and radio buttons, among other things. It works with global attributes, event attributes, as well as `for` and `form`.

## What is the HTML `label` tag used for?

For improved clarity and [website accessibility](https://www.ionos.com/en-ie/digitalguide/websites/web-development/website-accessibility/), the HTML `label` tag plays a key role. It is used in forms to provide clear descriptions for elements such as **input fields, radio buttons, and checkboxes**.

This is especially important for two use cases:

- It makes website navigation easier for visitors who have difficulty interacting with small clickable areas. Because the **clickable area is larger**, form elements are easier to select and use.
- For users who rely on a screen reader, the HTML `label` tag ensures that form labels are read aloud correctly. **This improves usability** for all visitors to your website.

## WCAG relevance of the `label` tag

HTML forms should not only be visually easy to understand, but also comply with the current standards for [digital accessibility](https://www.ionos.com/en-ie/digitalguide/websites/web-development/digital-accessibility/). The WCAG (Web Content Accessibility Guidelines) 2.2 require, for example, that all input fields be labelled or provided with clear instructions (Success Criterion 3.3.2 ‘Labels or Instructions’). This ensures that people with cognitive or visual impairments understand what input is expected.

In addition, WCAG Success Criterion 2.5.3 ‘Label in Name’ ensures that the visible label is also included in the program code as an accessible name. This is important for users who rely on assistive technologies or voice control.

Note In the Republic of Ireland, digital accessibility requirements are primarily governed by the [Disability Act 2005](https://www.irishstatutebook.ie/eli/2005/act/14/enacted/en/html "Disability Act 2005") and the [European Union (Accessibility of Websites and Mobile Applications of Public Sector Bodies) Regulations 2020](https://www.irishstatutebook.ie/eli/2020/si/358/made/en/print "European Union Regulations 2020"). Under these regulations, many digital offerings, including online forms, must be designed to be accessible and usable for people with disabilities. In practice, **WCAG guidelines serve as the technical standard** used to assess whether digital content meets these legal accessibility requirements.

## How is the label tag in HTML used?

The `label` tag in HTML can be used in two different ways. Both methods ensure that assistive technologies such as screen readers correctly associate the label with its form control and allow users to click the label to focus the corresponding input field.

### Explicit association (with `for` and `id`)

With the explicit method, you **separate the label and the form field in the HTML**, but link them using the `for` attribute with the input field’s `id` value. This option provides the best support from browsers and assistive technologies. For this reason, it is generally recommended as a best practice.

```html
<p>
    <input type="checkbox" name="read" id="read" value="yes" />
    <label for="read">I have read the terms and conditions</label>
</p>
```

It’s important that the value of the `for` attribute matches the `id` attribute of the input field exactly.

### Implicit association (input inside the `label`)

Alternatively, you can place the input field inside the `<label>` element. In this case, the association is created automatically without needing to set `for` and `id`. This option is also valid HTML, but it is not supported by all devices.

```html
<p>
    <label>
        <input type="checkbox" name="read" value="yes" />
         I have read the terms and conditions
    </label>
</p>
```

## Which elements are associated with the HTML tag for `label`?

To enable accessible access to your page for users with screen readers, for example, you should label the following elements in HTML with an **HTML label** (the **label tag in HTML**) in particular:

- **Input fields**: `<input type="text" />`, `<input type="password" />`, `<textarea>`
- **Checkboxes**: `<input type="checkbox" />`
- **Radio buttons**: `<input type="radio" />`
- **Drop-down lists**: `<select>`
- **Upload fields:** `<input type="file" />`

## Which attributes does the `label` tag in HTML support?

The HTML label supports all global HTML attributes as well as all event attributes. In addition, the following attributes can be associated with the HTML label:

- `for`: The `for` attribute specifies the ID of the input element that the label should be associated with. The value of `for` must exactly match the value of the `id` attribute of another form control in the same document.
- `form`: The `form` attribute can be useful in complex layouts where a label and its associated form control are not located within the same form element. In most accessible forms, however, it is not required. The recommended association is done using `for` / `id` or by nesting the input inside the `label`. The `form` attribute is not part of the standard attributes typically used with the HTML `label` tag in the HTML specification.

```html
<form id="participant">
    <label for="first-name">First name</label>
    <input name="first-name" id="first-name" maxlength="25">
    <label for="last-name">Last name</label>
    <input name="last-name" id="last-name" maxlength="30">
    <button>Confirm details</button>
</form>
```


This is a markdown version of: [https://www.ionos.com/en-ie/digitalguide/websites/web-development/html-label/](https://www.ionos.com/en-ie/digitalguide/websites/web-development/html-label/) for AI/LLM consumption.