El elemento <meter> se utiliza para representar una cantidad numérica o medida (magnitud escalar) dentro de un rango conocido. Puede ser útil, por ejemplo, para representar el porcentaje de uso de un disco, los resultados electorales o el total de resultados de una búsqueda en una aplicación web.
Este elemento fue introducido en HTML5, por lo que su soporte podría ser incompleto en algunos navegadores web. Por ejemplo, Internet Explorer no le ha dado soporte en ninguna de sus versiones. Como alternativa puede usarse técnicas de diseño de estilos en cascada (CSS).
El contenido de <meter> puede ser cualquier elemento de línea. Sin embargo, debe evitarse introducir otros elementos <meter>, por tanto no es un elemento que se pueda anidar. Tiene dos etiquetas: <meter> (de apertura) y </meter> (de cierre). Entre ellas puede introducirse un texto descriptivo que se representará cuando el navegador no tenga soporte para este elemento.
Los autores de contenido o desarrolladores web no deben confundir el elemento <meter> con el elemento <progress>. Mientras que el primero se utiliza para representar una medida o cantidad numérica, el segundo se utiliza para indicar el progreso de completitud de una tarea determinada.
Un ejemplo de <meter> puede ser el de indicar el porcentaje de uso de un disco de memoria. En este sentido, se usan dos atributos para indicar el máximo (max) y el valor que se quiera representar (value), que en este caso será un 40%.
<p>Uso del disco:
<meter max="100" value="40" title="%">40%</meter>
</p>
Resultado:
Uso del disco:
40%
Se puede observar que aparece una barra horizontal muy similar a la barra de progreso, que también se va llenando de izquierda a derecha. Pero este elemento tiene más atributos que permiten agregar más información.
Los atributos de <meter>
El elemento <meter> tiene un total de seis atributos específicos que permiten agregar información acerca de los valores que representa. Además de estos atributos, también puede hacer uso de todos los atributos globales.
El atributo ‘value’
Mediante el atributo value es posible indicar el nivel actual de la medida en cuestión. Este valor debe estar comprendido entre el 0 y un valor máximo que se especificará mediante el atributo max. Si este atributo está ausente, la barra horizontal aparecerá vacía, es decir, con ausencia de medida.
El atributo ‘max’
Para indicar un valor máximo se usa el atributo max, que por defecto tendrá el valor 1. Por lógica, el valor indicado en max debe ser mayor que el valor indicado en min. Puede contener valores decimales separados por un punto.
El atributo ‘min’
También se puede indicar un valor mínimo mediante el atributo min, que por defecto tendrá el valor 0. En este caso, el valor indicado en min debe ser menor que el valor indicado en max. También puede contener decimales.
El atributo ‘high’
El atributo high permite especificar un valor dentro de un rango que defina una zona alta de valores. Cuando un valor cae dentro de esta zona, es decir, entre el valor high y el valor max, es considerado un valor alto. Los valores altos son representados en color amarillo en vez de verde.
En el siguiente ejemplo se define un porcentaje con una zona de valores altos que comprende entre el 75% y el 100%. Por tanto, si el valor que se quiere representar es 80, éste se considerará un valor alto.
<p>Porcentaje:
<meter max="100" value="80" high="75">80%</meter>
</p>
Resultado:
Porcentaje:
80%
El atributo ‘low’
En cambio, con el atributo low se puede definir un rango de valores que sea considerado una zona baja. Cuando un valor cae dentro de esta zona, es decir, entre el valor min y el valor low, es considerado un valor bajo. Los valores bajos también son representados con color amarillo en vez del verde.
En este ejemplo se representa un porcentaje que queda en la zona de valores bajos. Se considera que por debajo del 25% los valores deben ser bajos. En este caso se va a representar el 20%, quedando por debajo del 25%.
<p>Porcentaje:
<meter max="100" value="80" low="25">20%</meter>
</p>
Resultado:
Porcentaje:
20%
El atributo ‘optimum’
El atributo optimum permite indicar un valor óptimo. Dicho valor debe estar dentro del rango definido por los atributos min y max. Este atributo es útil cuando también se han usado los atributos low (bajo) y high (alto), para dar a entender el valor que será más óptimo. El color verde se mantiene.
Ejemplo de código HTML con una medida óptima al 50%:
<p>Porcentaje:
<meter max="100" value="50" optimum="50">50%</meter>
</p>
Resultado:
Porcentaje:
50%
En este ejemplo se observa que se ha indicado el valor óptimo al 50%, por lo que la barra horizontal ha quedado pintada de verde hasta la mitad.
