<meter>
Afficher une valeur dans une échelle connue : score, jauge, quota
<meter> — La jauge
La balise <meter> représente une mesure scalaire dans un intervalle connu. Les attributs min, max, low, high et optimum définissent les seuils. Ce n'est pas une barre de progression, c'est un état à un instant T.
Quand l'utiliser
Tu veux afficher un score d'évaluation, un niveau de batterie, un quota d'espace disque utilisé, une note sur 10 ou toute valeur mesurable avec un minimum et un maximum connus.
Ce que tu gagnes
Accessibilité : les lecteurs d'écran annoncent la valeur et ses seuils. Le navigateur colore la jauge en vert, jaune ou rouge selon la position par rapport a optimum.
Exemple de code
<label for="disk">Disk usage:</label>
<meter id="disk" min="0" max="100" low="60" high="85" optimum="30" value="72">
72 GB used out of 100 GB
</meter>
<label for="score">Accessibility score:</label>
<meter id="score" min="0" max="10" low="4" high="7" optimum="10" value="9">
9 out of 10
</meter>Pour aller plus loin
- Les soupes de div — remplacer les
<div>par des balises sémantiques - WHATWG —
<meter> - W3C — HTML spec
- MDN —
<meter>