Apprends les éléments HTML sémantiques pour afficher des mesures, des indicateurs de progression et des résultats calculés : meter, progress et output.
L'élément <progress> représente la progression d'une tâche.
<progress value="70" max="100">70%</progress>value — Progression actuelle.max — Valeur maximale (par défaut 1 si omis).Omets l'attribut value pour afficher un indicateur animé indéterminé :
<progress>Chargement...</progress>Les navigateurs affichent ceci comme une animation pulsante ou cyclique, indiquant qu'un travail est en cours mais que le pourcentage de complétion est inconnu.
Ajoute toujours une étiquette textuelle près de la barre de progression pour que tous les utilisateurs (y compris ceux utilisant des lecteurs d'écran) comprennent ce qui est suivi.
L'élément <meter> représente une mesure scalaire dans une plage connue — comme l'utilisation du disque, un score de test ou une note de pertinence. Il n'est pas destiné à la progression ; utilise <progress> pour ça.
| Attribut | Description |
|---|---|
value | Valeur actuelle (requis) |
min | Borne minimale (par défaut : 0) |
max | Borne maximale (par défaut : 1) |
low | En dessous = plage "basse" |
high | Au-dessus = plage "haute" |
optimum | La valeur idéale |
Le navigateur colore la barre du meter différemment selon où value se situe par rapport à low, high et optimum :
<!-- Utilisation du disque : 80% — dans la zone haute/d'avertissement -->
<meter value="0.8" min="0" max="1" low="0.3" high="0.7" optimum="0.2">
80% plein
</meter>L'élément <output> représente le résultat d'un calcul ou d'une action utilisateur. C'est une région live — les lecteurs d'écran annoncent les changements de son contenu.
forL'attribut for liste les IDs des éléments qui ont contribué au résultat, établissant une relation :
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input type="number" id="a" value="10"> +
<input type="number" id="b" value="20"> =
<output name="result" for="a b">30</output>
</form>L'élément <output> :
role="status" ARIA implicite — les changements sont annoncés par les lecteurs d'écran.name pour la soumission de formulaire.<h3>Tableau de bord</h3>
<!-- Progress : téléchargement de fichier -->
<label for="upload">Progression du téléchargement :</label>
<progress id="upload" value="65" max="100">65%</progress>
<span>65%</span>
<!-- Meter : utilisation du disque -->
<label for="disk">Utilisation du disque :</label>
<meter id="disk" value="0.7" min="0" max="1"
low="0.3" high="0.7" optimum="0.2">70%</meter>
<span>70%</span>
<!-- Meter : score de test (bon) -->
<label for="score">Score du test :</label>
<meter id="score" value="85" min="0" max="100"
low="40" high="70" optimum="100">85/100</meter>
<span>85/100</span>
<!-- Output : calcul -->
<form oninput="total.value = parseInt(price.value) * parseInt(qty.value)">
<label>Prix : <input type="number" id="price" value="10"></label>
<label>Qté : <input type="number" id="qty" value="3"></label>
<p>Total : <output name="total" for="price qty">30</output></p>
</form>Quelle est la différence clé entre <progress> et <meter> ?