La balise Meter en HTML 5

Autre nouveauté dans le monde HTML 5, c'est la balise METER. Fini le temps où des mesures traînaient un peu partout dans les pages sans qu'on puisse deviner par le markup la signification de chacun. La nouvelle balise Meter a été introduite pour corriger la sémantique de l'information de la page lorsqu'on veut indiquer une mesure dans une plage connue. De plus, ça s'affiche joliment.

Essentiellement, vous pourrez indiquer que l'espace disque est utilisé à 35% ou que vous avez obtenu un pointage de 7/10 dans votre code HTML (exemple minimaliste) :

<meter>35%</meter>
<meter>7/10</meter>

Visuellement, ça ne sert pas à grand chose si on n'établit pas les bornes dans laquelle se fait la mesure. Affiché à la manière d'un thermomètre horizontal (à ce jour, seul Chrome a su l'afficher correctement), on peut d'un coup d'oeil avoir un aperçu graphique de la donnée :

<meter min="0" max="10" value="2">2/10</meter>
<meter min="0" max="10" value="5">5/10</meter>
<meter min="0" max="10" value="8">8/10</meter>

Comment ça fonctionne ?

À la base, aucun JavaScript n'est nécessaire. Il suffit de configurer les bonnes valeurs dans les attributs :

Value
Représente la valeur réelle à afficher sur l'échelle. Si elle n'est pas spécifiée, la valeur par défaut sera zéro.

Min
La borne minimum autorisée sur cette échelle de mesure. Zéro par défaut.

Max
La borne maximum. Si elle n'est pas spécifiée, la valeur maximale sera de 1 par défaut, ce qui veut dire que si on veut représenter 50% en omettant les attributs min et max, la valeur entrée devra être 0.5 (qui se situe entre 0 et 1).

<meter value="0.5">50%</meter>

Low
Si la valeur se trouve sous la barre de l'attribut low, la mesure sera considérée comme faible et le code de couleur s'ajustera en conséquence suivant ce qui sera défini dans l'attribut Optimum.

High
Si la valeur se trouve au dessus de la valeur high, la mesure sera considérée comme élevée.

Optimum
La valeur sera considérée comme optimale si elle dépasse cette limite. En étant initialisée supérieure à la valeur high, ça indique que plus la valeur est élevée, mieux c'est, donc l'ordre des couleurs changera dans l'affichage. Dans l'exemple ci-dessous, une valeur élevée sera colorée en vert pour montrer que le résultat est positif. Sinon, si la valeur optimum n'était pas spécifiée dans le même exemple, une valeur élevée serait indiquée en rouge.

Qu'est-ce que ça veut dire concrètement ?

Si on mesure une performance académique, on détermine dans l'ensemble que sur une échelle de 0 à 100, une note au dessus de la note de passage de 60% indique un succès, qu'entre 50% et 60%, ce n'est pas suffisant mais qu'on est près de la réussite (affiché en jaune), et que sous la barre des 50%, c'est désastreux (affiché en rouge).

<meter value="39" min="0" max="100" low="50" high="60" optimum="80">39%</meter>
<meter value="56" min="0" max="100" low="50" high="60" optimum="80">56%</meter>
<meter value="64" min="0" max="100" low="50" high="60" optimum="80">64%</meter>
<meter value="86" min="0" max="100" low="50" high="60" optimum="80">86%</meter>
<meter value="92" min="0" max="100" low="50" high="60" optimum="80">92%</meter>

Jusqu'à maintenant, certaines personnes se sont amusées à transformer le rendu par CSS. Il y a un peu de triche mais ça démontre bien les possibilités. Curieusement, l'auteur dit que les exemples fonctionnent bien sous Firefox et Chrome 5 mais chez moi ça ne marche pas du tout avec Chrome 6.