# Qu’est-ce que la balise HTML et comment l’utiliser ?

Avec la balise HTML `<label>`, vous améliorez l’ergonomie et l’accessibilité de votre site Web. Ce tag permet d’associer clairement un libellé à un champ de saisie, une case à cocher ou un bouton radio. Ce tag fonctionne avec les attributs globaux et les attributs d’événement, ainsi qu’avec les attributs `for` et `form`, afin d’assurer une liaison correcte entre le libellé et l’élément de formulaire correspondant.

## À quoi sert la balise HTML `<label>` ?

La balise HTML `<label>` joue un rôle central dans la clarté et l’accessibilité d’un site Web. Utilisé dans les formulaires, ce tag ajoute une description explicite à des éléments tels que les **champs de saisie, boutons radio ou cases à cocher**.

Cela est particulièrement important dans deux situations :

- D’une part, la balise HTML `<label>` facilite la [navigation sur un site Web](https://www.ionos.fr/digitalguide/sites-internet/web-design/navigation-sur-site/) pour les visiteurs qui rencontrent des difficultés avec de petites zones cliquables. Comme la **zone cliquable est agrandie**, l’interaction devient plus simple et plus précise.
- D’autre part, pour les personnes qui utilisent un [lecteur d’écran](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/lecteurs-decran-logiciels-pour-malvoyants-et-non-voyants/), la balise HTML `<label>` garantit que le libellé associé puisse être lu à haute voix. **Cela améliore l’UX** et rend votre site Web plus accessible à tous les utilisateurs.

## En quoi la balise HTML `<label>` est-elle pertinente pour les WCAG ?

Les formulaires HTML ne doivent pas seulement être compréhensibles visuellement, mais aussi respecter les normes actuelles en matière d’[accessibilité numérique](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/laccessibilite-numerique/). Les [WCAG](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/accessibilite-sur-le-web-wcag-les-lignes-directrices/) (Web Content Accessibility Guidelines) 2.2 exigent notamment que tous les champs de saisie disposent d’une étiquette ou d’instructions claires (critère de succès 3.3.2 « Labels or Instructions »). Cela permet aux personnes ayant des déficiences cognitives ou visuelles de comprendre précisément quelle saisie est attendue.

Par ailleurs, le critère de succès 2.5.3 des WCAG, « Label in Name », impose que le libellé visible figure également dans le code source comme nom accessible. L’utilisation correcte de la balise HTML `<label>` contribue à satisfaire cette exigence. Cela est particulièrement important pour les personnes qui utilisent des technologies d’assistance ou des systèmes de commande vocale.

Note Depuis le 28 juin 2025, la [loi sur l’accessibilité numérique](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/loi-sur-laccessibilite-numerique/) s’applique en France. De ce fait, de nombreuses offres numériques, y compris les formulaires, doivent être conçues de manière accessible afin d’être utilisables par les personnes en situation de handicap. Cette loi transpose une directive européenne (European Accessibility Act) et renforce l’obligation d’accessibilité numérique au-delà des dispositions en vigueur jusqu’à présent.

## Comment utiliser la balise HTML `<label>` en HTML ?

Il existe deux manières d’utiliser la balise HTML `<label>` en HTML. Les deux variantes garantissent que les technologies d’assistance comme les lecteurs d’écran reconnaissent correctement le libellé et que les utilisateurs puissent accéder directement au champ de saisie correspondant en cliquant sur ce libellé.

### Association explicite (avec `for` et `id`)

Avec la méthode explicite, **vous séparez le libellé et le champ de formulaire dans le code HTML**, puis vous les reliez à l’aide de l’attribut `for`, qui fait référence à la valeur `id` du champ de saisie. Cette approche offre la meilleure compatibilité avec les navigateurs et les technologies d’assistance. Cette première méthode est donc généralement recommandée.

```html
<p>
    <input type="checkbox" name="lu" id="read" value="oui" />
    <label for="read">J’ai lu et j’accepte les conditions.</label>
</p>
```

Il est important que la valeur de l’attribut `for` corresponde exactement à l’attribut `id` du champ de saisie.

### Association implicite (input dans le `label`)

Vous pouvez également placer le champ de saisie à l’intérieur de l’élément `<label>`. Dans ce cas, l’association se fait automatiquement, sans qu’il soit nécessaire de définir `for` et `id`. Cette variante constitue un HTML valide, mais peut présenter des limitations dans certains environnements ou technologies d’assistance plus anciens.

```html
<p>
    <label>
        <input type="checkbox" name="lu" value="oui" />
        J’ai lu et j’accepte les conditions.
    </label>
</p>
```

## Quels éléments sont marqués avec la balise HTML `<label>` ?

Pour permettre par exemple aux utilisateurs de lecteurs d’écran d’accéder de façon accessible à votre page, les éléments suivants, en particulier, devraient être balisés en HTML avec un tag `<label>` :

- **Champs de saisie** : `<input type="text" />`, `<input type="password" />`, `<textarea>`
- **Cases à cocher** : `<input type="checkbox" />`
- **Boutons radio** : `<input type="radio" />`
- **Listes déroulantes** : `<select>`
- **Champs de téléchargement de fichiers** : `<input type="file" />`

## Quels attributs sont pris en charge par la balise HTML `<label>` ?

La balise HTML `<label>` prend en charge tous les [attributs HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/attributs-html/) globaux ainsi que les attributs d’événement. En complément, les attributs suivants peuvent être utilisés :

- `for` : l’attribut `for` indique l’ID de l’élément de formulaire auquel le libellé doit être associé. Sa valeur doit correspondre exactement à celle de l’attribut `id` d’un autre contrôle de formulaire présent dans le même document.
- `form` : l’attribut `form` peut s’avérer utile dans des mises en page complexes, notamment lorsque le champ de formulaire ne se trouve pas dans le même élément `<form>`. Pour les formulaires accessibles classiques avec balise HTML `<label>` et champ associé, il n’est généralement pas nécessaire. L’association doit alors se faire via `for` et `id` ou par imbrication. L’attribut `form` est toutefois défini dans la spécification HTML pour `<label>`, même s’il est rarement utilisé en pratique.

```html
<form id="participant">
    <label for="prenom">Prénom</label>
    <input name="prenom" id="prenom" maxlength="25">
    <label for="nom">Nom</label>
    <input name="nom" id="nom" maxlength="30">
    <button>Confirmer les informations</button>
</form>
```


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-label-en-html/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-label-en-html/) for AI/LLM consumption.