HTML meter

La etiqueta <meter> en HTML5 es un elemento utilizado para representar un valor numérico dentro de un rango conocido. Es útil para mostrar medidas de progreso, niveles de memoria o espacio libre, porcentajes, entre otros.

El elemento <meter> es similar al elemento <progress>, pero <meter> se utiliza para representar un valor dentro de un rango específico, mientras que <progress> se utiliza para representar un progreso en relación a un total conocido.

Atributos

Los atributos principales que se utilizan en la etiqueta <meter> son:

  • value: Este atributo especifica el valor actual del medidor. Este valor debe ser un número entre el valor mínimo y el valor máximo especificado.
  • min: Este atributo especifica el valor mínimo para el medidor. Este es el límite inferior del rango de valores válidos para el medidor. El valor predeterminado es 0.
  • max: Este atributo especifica el valor máximo para el medidor. Este es el límite superior del rango de valores válidos para el medidor. El valor predeterminado es 1.
  • low: Este atributo especifica el valor de referencia para el límite inferior del rango de “bajo” para el medidor. Si el valor actual es menor que este límite, el medidor se mostrará como “bajo”. El valor predeterminado es el valor mínimo.
  • high: Este atributo especifica el valor de referencia para el límite superior del rango de “alto” para el medidor. Si el valor actual es mayor que este límite, el medidor se mostrará como “alto”. El valor predeterminado es el valor máximo.
  • optimum: Este atributo especifica el valor de referencia para el rango óptimo del medidor. Si el valor actual está dentro de este rango, el medidor se mostrará como “óptimo”. El valor predeterminado es el valor medio entre el valor mínimo y el valor máximo.
  • form: Este atributo especifica la asociación de un formulario con el medidor.
  • labels: Este atributo especifica una lista de etiquetas asociadas al medidor.
  • style: Este atributo especifica un estilo CSS para el medidor.

Es importante mencionar que todos los atributos son opcionales, pero para un uso correcto se recomienda especificar al menos el valor actual y los valores mínimo y máximo.

Además, se pueden utilizar los atributos “id” y “class” para personalizar el aspecto del elemento <meter> mediante CSS y JavaScript.

Ejemplo de uso

Un ejemplo de uso de la etiqueta <meter> podría ser el siguiente:


<meter value="0.6" min="0" max="1" low="0.2" high="0.8" optimum="0.7"></meter>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, el valor actual del elemento <meter> es de 0.6, el rango mínimo es de 0 y el rango máximo es de 1. El rango bajo se considera desde 0.2, el rango alto desde 0.8 y el valor óptimo es 0.7.

Es importante mencionar que algunos navegadores pueden tener dificultades para mostrar correctamente el elemento <meter>, por lo que se recomienda utilizar JavaScript y CSS para personalizar el aspecto y el comportamiento del elemento <meter>.

Más ejemplos

Algunos ejemplos adicionales de cómo utilizar la etiqueta <meter> en HTML5:

Ejemplo 1: Mostrar el porcentaje de memoria libre en un dispositivo:


<label>Memoria libre:</label>
<meter value="0.35" min="0" max="1"></meter> 35%

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <meter> para mostrar el porcentaje de memoria libre en un dispositivo, donde el valor actual es de 0.35 (35%), el valor mínimo es de 0 (0%) y el valor máximo es de 1 (100%).

Ejemplo 2: Mostrar el porcentaje de completitud de una tarea:


<label>Progreso de la tarea:</label>
<meter value="0.8" min="0" max="1"></meter> 80% completado

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <meter> para mostrar el porcentaje de completitud de una tarea, donde el valor actual es de 0.8 (80%), el valor mínimo es de 0 (0%) y el valor máximo es de 1 (100%).

Ejemplo 3: Mostrar el nivel de batería de un dispositivo:


<label>Nivel de batería:</label>
<meter value="0.65" min="0" max="1" low="0.2" high="0.8" optimum="1"></meter>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <meter> para mostrar el nivel de batería de un dispositivo, donde el valor actual es de 0.65 (65%), el valor mínimo es de 0 (0%), el valor máximo es de 1 (100%), el rango bajo se considera desde 0.2 (20%), el rango alto desde 0.8 (80%) y el valor óptimo es 1 (100%).

Es importante mencionar que en estos ejemplos, se recomienda utilizar JavaScript y CSS para personalizar el aspecto y el comportamiento del elemento <meter>.