Superdéréférenceur est de retour avec ce titre magnifique pour expliquer aux robots que le sujet de cet article est la balise meter d'HTML5.

Balaise l'expert SEO dans le contenu textuel. Balaise dans la balise aussi en réussissant à faire changer de sexe au Sergent Poivre qui s'appelle dorénavant Rita.

Dans la famille des balises HTML5 il y en avait une sur laquelle j'avais fais l'impasse car je n'en avais pas l'emploi. Et puis j'ai mis en place mon système de votes, celui des sondages ensuite, et oublié de coller dedans la balise meter qui doit ceindre le pourcentage ou le nombre de votes. C'est corrigé depuis ce week-end.

Tout d'abord, c'est quoi la balise meter ?

Je vous fais un confidence : HTML5 c'est encore le W3C qui en parle le mieux. Tenez, pour la balise meter :

The meter element represents a scalar gauge providing a measurement within a known range, or a fractional value.

C'est limpide. meter c'est pour une jauge, le compteur d'un sondage, d'un vote.
« within a known range », c'est important. On ne pourra pas l'utiliser pour une mesure isolée. Dans un tel contexte par exemple :

• Quelle est la couleur du panache blanc d'Henri IV ?
• 1,63 mètre

avec tel code :

<p><meter>1,63</meter> mètre</p>

Eh oui : si on ne connaît pas le nombre de panaches ainsi que leurs longueurs on ne peut évidement pas en déduire la couleur. C'est évident.

La balise meter appliquée dans un bon contexte

Les attributs de la balise meter sont au nombre de 6 mais ils ne sont pas toujours nécessaires. Si par exemple la valeur indiquée contient explicitement la valeur maxi comme dans les pourcentages :

<meter>54%</meter>

ou les fractions :

<meter>2/3</meter>

c'est en tout cas ce que j'avais cru comprendre. Sauf qu'en passant mon code au banc de validation il me réclamait un attribut, scrogneugneu !
Mais lequel ? Il y en a 6 :

• value
• min
• max
• low
• high
  et, enfin :
• optimum

Les 3 premières sont faciles à comprendre. La valeur présente, la valeur minimum, la valeur maximum comme ici :

Ta note est de : <meter value="4" min="0" max="10">4 sur 10</meter>

Quand on exprime des écarts il faut utiliser les 3 autres attributs : low (la fourchette basse), high (la fourchette haute), et optimum qui, forcément, se situe entre min et max mais peut dépasser la valeur contenue dans l'attribut high.
Comme ceci :

Ta note est : <meter value="40" min="0" max="100" low="40" high="90" optimum="100">D</meter>

Donc, disais-je, pas de validation du code HTML5. J'ai donc collé dans mon code la valeur du vote, la valeur mini et la valeur maxi. Ce qui a donné pour le sondage du Sgt Pepper :

<div class="hreview-aggregate sp_rating">
	<div class="ratings"><span class="item"><span class="fn">Note :</span></span></div>
	<div class="base"><div class="average" style="width: 91%;"><span class="rating"><meter value="91.0" min="0" max="100">91.0%</meter></span></div></div>
<div class="votes"><span class="count">19 votes</span></div>

J'en ai fait de même pour les votes et tout passe au banc.
Comme le banc avait déjà merdé sur le coup de la balise legend je vais retester dans quelques jours sans les attributs.
En attendant je vais rejoindre Rita.