La semantica del tag meter

HTML5 offre diversi nuovi elementi utili per aggiungere ulteriore ...

HTML5 offre diversi nuovi elementi utili per aggiungere ulteriore significato al markup HTML di una pagina. Tra questi nuovi elementi abbiamo il tempo e nel nostro caso il metro ( meter ). Si tratta di un elemento in linea che quindi possiamo utilizzare all’interno di altri elementi; tra cui un’intestazione o un paragrafo.

L’elemento meter rappresenta una misurazione scalare all’interno di un intervallo noto o un valore frazionario; ma  non rappresenta un valore scalare di intervallo arbitrario – ad esempio, sarebbe sbagliato utilizzarlo per riportare un peso o un’altezza, a meno che non ci sia un valore massimo noto.

Esaminiamo gli attributi dell’elemento e qualche esempio.

Gli attributi disponibili sono sei: value, min, max, high, low e optimum.

Value
Questo è ciò che verrà analizzato – il valore reale.  Se non viene utilizzato un numero reale, il valore è zero.
Min
Il valore minimo consentito. Se non è specificato, il valore è 0.
Max
Il valore massimo consentito.  Se non è specificato, il valore è 1. Tuttavia, se è possibile specificare il valore di questo nel contenuto, ad esempio un segno di percentuale, il valore massimo sarà 100%
Basso
Questa è considerata la parte bassa dell’intervallo di valori.
Alto
Questa è considerata la parte alta dell’intervallo di valori.
Ottimale
Questo è considerato il valore ottimale e deve essere compreso tra min e max.

Diamo un’occhiata ad un esempio come strumento di valutazione:

Il tuo punteggio è : <meter>2 out of 10</meter>

Il tuo punteggio è: 2 out of 10

Possiamo dare questo ulteriore significato aggiungendo gli attributi min e max

Il tuo punteggio è: <meter min=”0″ max=”10″>2 out of 10</meter>

Il tuo punteggio è: <meter value=”91″ min=”0″ max=”100″ low=”40″ high=”90″ optimum=”100″>A+</meter>

Il tuo punteggio è: 2 out of 10

Il tuo punteggio è: A+