<meter>

Une jauge pour une valeur dans une plage connue : espace utilisé, résultat d’un test, niveau de batterie.

Affichage: inline-block
Balise fermante: Obligatoire
Contenu autorisé: Contenu phrasant sans autres éléments <meter>

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<p>
  <label for="score">Résultat du test CSS</label>
  <meter id="score" min="0" max="100" value="72">72 sur 100</meter>
  72/100
</p>
<p>
  <label for="disk">Espace pour les projets</label>
  <meter id="disk" value="0.8">80%</meter>
  80% utilisé
</p>

Aperçu

Définition et utilisation

L’élément <meter> montre une mesure dans une plage donnée, un peu comme une jauge à carburant dans une voiture. Vous indiquez une valeur (value) et des limites (min et max), et le navigateur dessine une barre remplie proportionnellement au résultat.

Les attributs low, high et optimum découpent la plage en zones et indiquent quelles valeurs sont bonnes. Le navigateur colore alors la barre : généralement en vert quand la valeur est dans la zone optimale, en jaune pour une valeur moyenne, et en rouge quand c’est mauvais.

Ne le confondez pas avec <progress>. <meter> montre un état (combien de place occupent des fichiers), tandis que <progress> montre l’avancement d’une tâche dans le temps (quelle part du fichier est déjà envoyée). Comme une barre de progression, <meter> a besoin d’une étiquette.

Syntaxe

<meter value="0.6">60%</meter>

Attributs

value
nombre
La valeur mesurée. Elle devrait se situer entre min et max ; le navigateur ramène aux limites les valeurs situées hors de la plage.
min / max
nombre (0 et 1 par défaut)
Les limites de la plage. Elles vous permettent d’indiquer des valeurs dans des unités naturelles, par exemple des points de test de 0 à 40, ou des mégaoctets.
low / high
nombre dans la plage
low fixe la limite supérieure de la zone des valeurs basses, et high la limite inférieure de la zone des valeurs hautes. Une valeur entre les deux est moyenne. Dans l’exemple, la même jauge de batterie change de couleur selon la zone.
optimum
nombre dans la plage
La valeur idéale. Si elle se trouve dans la zone haute, ce sont les résultats élevés qui sont bons (comme le niveau de charge d’une batterie), et si elle se trouve dans la zone basse, ce sont les résultats faibles qui sont bons (comme le nombre de bugs dans le code). La couleur de la barre en dépend.

Attribut	Valeurs	Description
value	nombre	La valeur mesurée. Elle devrait se situer entre `min` et `max` ; le navigateur ramène aux limites les valeurs situées hors de la plage.
min / max	nombre (0 et 1 par défaut)	Les limites de la plage. Elles vous permettent d’indiquer des valeurs dans des unités naturelles, par exemple des points de test de 0 à 40, ou des mégaoctets.
low / high	nombre dans la plage	`low` fixe la limite supérieure de la zone des valeurs basses, et `high` la limite inférieure de la zone des valeurs hautes. Une valeur entre les deux est moyenne. Dans l’exemple, la même jauge de batterie change de couleur selon la zone.
optimum	nombre dans la plage	La valeur idéale. Si elle se trouve dans la zone haute, ce sont les résultats élevés qui sont bons (comme le niveau de charge d’une batterie), et si elle se trouve dans la zone basse, ce sont les résultats faibles qui sont bons (comme le nombre de bugs dans le code). La couleur de la barre en dépend.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

value

nombre

La valeur mesurée. Elle devrait se situer entre min et max ; le navigateur ramène aux limites les valeurs situées hors de la plage.

HTML

<p><meter value="0.25">25%</meter> 25%</p>
<p><meter value="0.5">50%</meter> 50%</p>
<p><meter value="0.9">90%</meter> 90%</p>

Aperçu

min / max

nombre (0 et 1 par défaut)

Les limites de la plage. Elles vous permettent d’indiquer des valeurs dans des unités naturelles, par exemple des points de test de 0 à 40, ou des mégaoctets.

HTML

<p>Points du quiz : <meter min="0" max="40" value="31">31 sur 40</meter> 31 sur 40</p>

Aperçu

low / high

nombre dans la plage

low fixe la limite supérieure de la zone des valeurs basses, et high la limite inférieure de la zone des valeurs hautes. Une valeur entre les deux est moyenne. Dans l’exemple, la même jauge de batterie change de couleur selon la zone.

HTML

<p>Batterie 90% <meter min="0" max="100" low="20" high="80" optimum="100" value="90"></meter></p>
<p>Batterie 50% <meter min="0" max="100" low="20" high="80" optimum="100" value="50"></meter></p>
<p>Batterie 10% <meter min="0" max="100" low="20" high="80" optimum="100" value="10"></meter></p>

Aperçu

optimum

nombre dans la plage

La valeur idéale. Si elle se trouve dans la zone haute, ce sont les résultats élevés qui sont bons (comme le niveau de charge d’une batterie), et si elle se trouve dans la zone basse, ce sont les résultats faibles qui sont bons (comme le nombre de bugs dans le code). La couleur de la barre en dépend.

HTML

<p>Bugs dans le code : 2 <meter min="0" max="20" low="5" high="10" optimum="0" value="2"></meter></p>
<p>Bugs dans le code : 15 <meter min="0" max="20" low="5" high="10" optimum="0" value="15"></meter></p>

Aperçu

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

La couleur ne doit pas être la seule information. Affichez aussi un chiffre ou une description à côté de la jauge, car tout le monde ne distingue pas le vert du rouge.
Pour des barres de progression (envoi, installation, avancement d’un cours), utilisez <progress>, pas <meter>.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours