El elemento meter muestra un indicador visual de un valor numérico dentro de un rango conocido, generalmente como parte de un gráfico de barras.

Elemento <meter>

Al igual que su hermano, el elemento <progress>, un elemento meter también debe tener una etiqueta de inicio (<meter>) y una etiqueta de final (</meter>). Esto resulta muy útil cuando diseñamos una técnica robusta de respaldo para los navegadores más antiguos que no admiten el elemento meter.

El elemento meter está configurado con varios atributos, incluido value (el valor mostrado), min (el valor más bajo en el rango) y max (el valor más alto posible en el rango). El siguiente fragmento de código configura la visualización de un informe que muestra el total de visitas y el número de visitas de los usuarios para cada navegador:

<h1>Informe mensual del navegador</h1>
<meter value="14417" min="0" max="14417">14417</meter>14,417 Total
Visitas<br>
<meter value="7000" min="0" max="14417">7000</meter> 7,000 Firefox<br>
<meter value="3800" min="0" max="14417">3800</meter> 3,800 Internet
Explorer<br>
<meter value="2062" min="0" max="14417">2062</meter> 2,062 Chrome<br>
<meter value="1043" min="0" max="14417">1043</meter> 1,043 Safari<br>
<meter value="312" min="0" max="14417">312</meter> &nbsp;&nbsp;
312 Opera<br>
<meter value="200" min="0" max="14417">200</meter> &nbsp;&nbsp; 200
otros<br>

Ejecuta el código anterior y verás como el elemento <meter> proporciona una manera útil de mostrar un gráfico de barras en una página web.

Atributos de <meter>

Aparte de los atributos globales, el elemento meter puede tener 6 atributos más.

  • value– Un número de punto flotante que representa el valor actual del rango medido. Esto debe estar entre el valor min y el max (si se especifica).
  • min– Indica el límite inferior del rango medido. Esto debe ser menor que el valor max (si se especifica). Si no se especifica, el valor mínimo es 0.
  • max– Indica el límite superior del rango medido. Este debe ser mayor que el valor min (si se especifica). Si no se especifica, el valor máximo es 1.0.
  • low– Representa el límite superior del extremo inferior del rango medido. Debe ser mayor que el atributo min, pero menor que el valor high y max (si se especifica). Si no se especifica, o si es menor que el valor mínimo, el valor low es igual al valor min.
  • high– Representa el límite inferior del extremo superior del rango medido. Debe ser menor que el atributo max, pero mayor que el valor low y min (si se especifica). Si no se especifica, o si es mayor que el valor max, el valor high es igual al valor max.
  • optimum– Este atributo indica el valor óptimo y debe estar dentro del rango de los valores min y max. Cuando se usa con el atributo low y high, indica la zona preferida para un rango dado. Por ejemplo:

min ≤ optimum ≤ low– Si el valor óptimo es entre los valores min y low, entonces el rango inferior se considera que es la zona preferida.

high ≤ optimum ≤ max– Si el valor óptimo es entre los valores high y max, entonces el rango superior se considera que es la zona preferida.

Un meter con todo se vería así:

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>
<meter max=1.0 min=0.0 value=0.5 high=.75 low=.25 optimum=0.5></meter>

Reglas de oro

  • Todos los atributos mencionados anteriormente pueden ser números de punto flotante, por ejemplo, 12, -8, 3.25
  • Con base en la definición de cada atributo, las siguientes desigualdades se vuelven verdaderas,
  1. min ≤ value ≤ max
  2. min ≤ low ≤ high ≤ max (si se especifica low/high)
  3. min ≤ optimum ≤ max (si se especifica optimum)
  • No hay una forma explícita de especificar unidades en el elemento <meter>, pero se recomienda a los autores que especifiquen las unidades utilizando el atributo title. Por ejemplo:
<meter max="256" value="120" title="GB">120GB de 256GB ha sido usado</meter>

No uses el elemento <meter> para …

  • Indicar el progreso de la finalización de una tarea (usar la etiqueta progress en su lugar).
  • Representar un valor escalar de un rango arbitrario, por ejemplo, para informar el peso o la altura de una persona.

Ejemplos con la etiqueta <meter>

Este experimento muestra los diversos estados del elemento <meter> bajo una combinación diferente de valores de entrada para cada atributo. Siéntete libre de editar los valores de los atributos del código principal para modificar la salida meter.

<h1>Elemento HTML meter</h1>
<p>Nota: - Edita el código de abajo para divertirte!</p>
Caso 1 - Sin atributos
<meter></meter>
<br>
Caso 2 - value &lt; max (default: min=0, max=1)
<meter value=".5"></meter>
<br>
Case 3 - value = max (default: min=0, max=1)
<meter value="1"></meter>
<br>
Caso 4 - value &gt; max (default: min=0, max=1)  (si value > max entonces value = max)
<meter value="5"></meter>
<br>
Caso 5 - value &lt; min (default: min=0, max=1)  (sif value &lt; min entonces value = min)
<meter value=".5"></meter>
<br>
Caso 6 - value = min (default: min=0, max=1)
<meter value="0"></meter>
<br>
Caso 7 - value > min (default: min=0, max=1)
<meter value=".5"></meter>
<br>
Caso 8 - value &lt; high (default: min=0, max=1)
<meter value=".5" high=".8"></meter>
<br>
Caso 9 - value = high (default: min=0, max=1)
<meter value=".8" high=".8"></meter>
<br>
Caso 10 - value > high (default: min=0, max=1) (si value > high observa cómo cambia el color)
<meter value=".9" high=".8"></meter>
<br>
Caso 11 - value &lt; low (default: min=0, max=1) (si value &lt; low observa cómo cambia el color)
<meter value=".15" low=".25"></meter>
<br>
Caso 12 - value = low (default: min=0, max=1)
<meter value=".25" low=".25"></meter>
<br>
Caso 13 - value > low (default: min=0, max=1)
<meter value=".5" low=".25"></meter>
<br>
Caso 14 - optimum &lt; low &lt; high (default: min=0, max=1) (si optimum &lt; low observa cómo cambia el color)
<meter low=".25" optimum=".15" high=".75" value=".5"></meter>
<br>
Caso 15 - low &lt; optimum &lt; high (default: min=0, max=1)
<meter low=".25" optimum=".5" high=".75" value=".5"></meter>
<br>
Caso 16 - low &lt; high &lt; optimum (default: min=0, max=1) (si optimum > high observa cómo cambia el color)
<meter low=".25" optimum=".85" high=".75" value=".5"></meter>
<br>
Caso 17 - value &lt; low &lt; high &lt; optimum (default: min=0, max=1) (si value &lt; low y optimum > high observa cómo cambia el color)
<meter low=".25" optimum=".8" high=".75" value=".2"></meter>
<br>
Caso 18 - value > high > low > optimum (default: min=0, max=1) (si value > high y optimum &lt; low observa cómo cambia el color)
<meter low=".25" optimum=".2" high=".75" value=".8"></meter>

Visita https://caniuse.com/ para obtener información actualizada sobre la compatibilidad de este elemento con el navegador….

Etiqueta METER
5 (100%) 7 votos