La Etiqueta METER

La etiqueta <meter> representa una medición escalar dentro de un rango definido, como:

• Uso de almacenamiento en disco.

• Puntuación de una reseña.

• Nivel de batería.

• Progreso de una meta (no confundir con <progress>).

Características clave:

• Es semántica: describe un valor en contexto.

• Los navegadores la muestran como una barra gráfica.

• Admite atributos para definir rangos y valores óptimos.

Sintaxis básica

<meter value="valor-actual" min="valor-mínimo" max="valor-máximo" low="límite-bajo" 
  high="límite-alto" optimum="valor-ideal">
</meter>

Atributos principales

Atributo	Descripción
value	Obligatorio. Valor actual (ej: 3, 0.5).
min	Valor mínimo del rango (por defecto: 0).
max	Valor máximo del rango (por defecto: 1).
low	Límite inferior para considerar el valor como "bajo".
high	Límite superior para considerar el valor como "alto".
optimum	Valor ideal dentro del rango (afecta el color en algunos navegadores).

Ejemplos prácticos

Uso básico

Almacenamiento en disco:

<p>Espacio usado: 
  <meter value="75" min="0" max="100">75%</meter>
</p>

Resultado:

Espacio usado: 75%

Por Rangos

Indicador de nivel con rangos:

<p>Nivel de batería:
  <meter value="30" min="0" max="100" low="20" high="80">30% (baja)</meter>
</p>

Resultado:

Nivel de batería: 30% (baja)

El navegador puede colorear la barra según el rango (low, high, optimum).

Puntuación de reseñas (escala 1 a 5)

<p>Valoración del producto:
  <meter value="4.5" min="1" max="5">4.5/5</meter>
</p>

Resultado:

Valoración del producto: 4.5/5

Personalización con CSS

Aunque el estilo visual depende del navegador, puedes modificarlo:

meter {
  width: 200px;
  height: 25px;
  margin: 5px;
}

/* Estilo para Chrome/Edge */
meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 5px;
}

meter::-webkit-meter-optimum-value {
  background: #4CAF50; /* Verde si está en rango óptimo */
}

meter::-webkit-meter-suboptimum-value {
  background: #FFC107; /* Amarillo si está fuera del óptimo */
}

meter::-webkit-meter-even-less-good-value {
  background: #F44336; /* Rojo si está lejos del óptimo */
}

Comparación con <progress>

<meter>	<progress>
Mide un valor estático dentro de un rango.	Muestra el avance de una tarea en curso.
Ej: Uso de CPU, puntuación.	Ej: Carga de archivos, instalación.
No implica una tarea en progreso.	Representa una tarea activa.

Errores comunes

Usar <meter> para tareas en curso:

En su lugar, usa <progress>:

<!-- Incorrecto -->
<meter value="50" max="100"></meter>

<!-- Correcto -->
<progress value="50" max="100"></progress>

Valores fuera de rango:

Asegúrate de que value esté entre min y max.

Ignorar la accesibilidad:

Proporciona texto descriptivo dentro de la etiqueta como fallback:

<meter value="75" min="0" max="100">75% de capacidad</meter>

Mejores prácticas

1. Define min y max claramente:
   Aunque son opcionales, ayudan a dar contexto.

2. Usa low, high y optimum para rangos críticos:
   Mejora la semántica y el estilo visual en navegadores.

3. Combina con texto descriptivo:
   Ej: "75% de 100 GB usados".

4. Prueba en múltiples navegadores:
   El estilo varía entre Chrome, Firefox y Safari.

Ejemplo avanzado: Indicador de temperatura

<p>Temperatura del servidor:
  <meter 
    value="40" 
    min="0" 
    max="100" 
    low="10" 
    high="70" 
    optimum="25"
  >40°C</meter>
  (Rango seguro: 10°C - 70°C)
</p>

Resultado:

Temperatura del servidor: 40°C (Rango seguro: 10°C - 70°C)

En algunos navegadores, el color cambiará según si el valor está cerca de optimum.

Accesibilidad

Los lectores de pantalla anuncian el valor y el rango si se usan los atributos correctos.

Usa aria-label o texto dentro de <meter> para claridad:

<meter value="90" max="100" aria-label="90% de almacenamiento usado"></meter>

Conclusión

La etiqueta <meter> es una herramienta poderosa para mostrar mediciones de manera semántica y accesible. Úsala en dashboards, sistemas de calificación o cualquier contexto donde un valor deba entenderse dentro de un rango definido. ¡Experimenta con sus atributos y estilos para crear interfaces más informativas!