<meter>

Description

L’élément <meter> représente une valeur dans une plage connue, contrairement à <progress> qui représente une progression. Il peut afficher des zones “basse”, “haute” et “optimale” qui influencent la couleur de la jauge (vert/jaune/rouge selon les navigateurs). Utilisé pour des indicateurs de mesure statiques.

Syntaxe

<meter value="0.7" min="0" max="1">70 %</meter>

Exemples

Niveau de batterie :

<p>Batterie : <meter value="35" min="0" max="100" low="20" high="80" optimum="100">35 %</meter> 35 %</p>

Note d’un produit :

<p>Note : <meter value="4.2" min="0" max="5" low="2" high="4" optimum="5">4,2/5</meter> 4,2/5</p>

Occupation disque :

<p>Espace utilisé :
  <meter value="82" min="0" max="100" low="60" high="80" optimum="0">82 Go sur 100 Go</meter>
  82 Go / 100 Go
</p>

Attributs spécifiques

Attribut	Type	Description
value	string	Valeur actuelle. Obligatoire.
min	string	Valeur minimale de la plage (défaut : 0).
max	string	Valeur maximale de la plage (défaut : 1).
low	string	Seuil bas — en dessous de cette valeur, la jauge indique un état “bas”.
high	string	Seuil haut — au-dessus de cette valeur, la jauge indique un état “haut”.
optimum	string	Valeur optimale. Influence la couleur : vert si value est proche d’optimum.
form	string	ID du formulaire associé.

Notes

<meter> vs <progress> : <meter> mesure une valeur dans une plage (jauge, note, température) ; <progress> indique l’avancement d’une tâche (upload, installation).

Style variable selon les navigateurs : les couleurs de la jauge (vert/jaune/rouge) sont déterminées par le navigateur selon les valeurs de low, high et optimum. Le style CSS de <meter> est limité et varie selon les navigateurs.