El elemento mete> HTML5: guía de atributos, estilos CSS y cuándo NO usarlo para progress bars

Ejemplos prácticos del uso de <meter> (casos reales y usos comunes)

Ejemplo 1 — Medidor básico con animación

Este ejemplo muestra el uso de los atributos fundamentales: value, max y min. Además, usamos un pequeño script JavaScript para variar el valor del elemento meter en intervalos de tiempo y así apreciar su comportamiento dinámico.

Value: 1

Para ver el código completo del experimento, haz clic aquí.

Ejemplo 2 — Medidor con rangos low, high y optimum

Este ejemplo combina todos los atributos vistos: value, max, min, low, high y optimum. Cada sub-ejemplo aplica una de las pseudo-clases CSS explicadas en la sección anterior, para que puedas ver el cambio de color en tiempo real según la zona del rango en que se encuentre el valor.

Con ayuda del script anterior, veremos cómo:

• Cambiar el color del fondo (contenedor) de la barra del medidor con ::-webkit-meter-bar:

      #meter2::-webkit-meter-bar {
          background: blue;
      }
  

  
  

  Value: 1

• Cambiar el color del relleno cuando el valor está dentro del rango óptimo (low <= value <= high) usando ::-webkit-meter-optimum-value:

      #meter3::-webkit-meter-bar {
          background: blue;
      }
      #meter3::-webkit-meter-optimum-value {
          background: green;
      }

  
  

  Value: 1

• Cambiar el color cuando el valor está fuera del rango óptimo usando ::-webkit-meter-suboptimum-value:

      #meter4::-webkit-meter-bar {
          background: blue;
      }
      #meter4::-webkit-meter-suboptimum-value {
          background: yellow;
      }

  
  

  Value: 1

Para ver el código completo del experimento, haz clic aquí.

Ejemplo 3 — Barra de progreso CSS con gradientes

También podemos aplicar gradientes al elemento meter en lugar de colores sólidos, logrando un efecto visual más rico y personalizado:

    #meter5 {
        width: 60%;
        height: 60px;
    }
    #meter5::-webkit-meter-bar {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #eee), color-stop(0.45, #eee), color-stop(0.55, #ccc));
        border-radius: 5px;
    }
    #meter5::-webkit-meter-optimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
        border-radius: 5px;
    }
    #meter5::-webkit-meter-suboptimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
        border-radius: 5px;
    }

Value: 1

Para ver el código completo del experimento, haz clic aquí.

Ejemplo básico con <label>

Un buen punto de partida para entender la sintaxis completa. Nota el uso del elemento <label> asociado, que es esencial para la accesibilidad:

<label for="nivel">Nivel:</label>
<meter id="nivel" value="50" min="0" max="100">50 de 100</meter>

Ejemplo simulando progreso de tareas (basado en mi experiencia)

Una vez tuve que mostrar cuánto había completado un usuario en una tarea. Aunque al principio usé <meter>, terminé cambiándolo por <progress> porque la tarea podía extenderse sin un límite fijo. Aquí te muestro cómo habría quedado con <meter> si el rango fuese conocido de antemano:

<label for="m1">Progreso de la tarea</label>
<meter id="m1" value="30" min="0" max="100">30%</meter>

Y para actualizar el valor dinámicamente con JavaScript:

let m = document.getElementById("m1");
let v = 0;
setInterval(() => {
  if (v <= 100) {
    m.value = v;
    v++;
  }
}, 100);

Ejemplo con rangos y estados (temperatura)

Este es uno de los casos de uso más claros para <meter>: un sensor de temperatura con zonas baja, normal y alta bien delimitadas.

<label for="temp">Nivel de temperatura</label>
<meter id="temp" value="65" min="0" max="100" low="30" high="70" optimum="60">65°C</meter>

En este caso, como optimum es 60 y el valor actual (65) está entre high y max, el navegador lo interpretará como un estado subóptimo y pintará la barra en amarillo por defecto.

Personalización y estilos CSS: cómo cambiar el diseño del <meter>

Los navegadores basados en WebKit (Chrome, Safari, Edge) permiten personalizar la apariencia de la progress bar HTML mediante pseudo-elementos específicos. Tuve que modificar estos estilos cuando quise que mi medidor combinara con la paleta de colores del proyecto, y fue más sencillo de lo que esperaba.

Pseudo-elementos CSS específicos del elemento meter:

meter::-webkit-meter-optimum-value {
    background: green;
}
meter::-webkit-meter-suboptimum-value {
    background: yellow;
}
meter::-webkit-meter-even-less-good-value {
    background: red;
}

Estilos avanzados con gradientes CSS:

meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #fff, #ccc);
}

Ten en cuenta que Firefox no soporta los pseudo-elementos -webkit-. Para lograr una apariencia personalizada de forma consistente en todos los navegadores, la estrategia más robusta es ocultar el <meter> nativo con appearance: none y reconstruir la barra usando <div> con CSS puro.

Accesibilidad del elemento <meter> en HTML5

La accesibilidad es un aspecto frecuentemente olvidado al usar este elemento. Para que un <meter> sea verdaderamente útil para usuarios que dependen de tecnologías asistivas (como lectores de pantalla):

• Asocia siempre un <label> mediante el atributo for apuntando al id del <meter>. Esto permite que los lectores de pantalla anuncien el propósito del medidor.
• Incluye texto alternativo descriptivo entre las etiquetas de apertura y cierre, por ejemplo: <meter value="70" min="0" max="100">70 de 100</meter>. Este texto solo se muestra en navegadores que no soporten el elemento.
• Cuando personalices demasiado el estilo del elemento nativo (especialmente si usas appearance: none), añade los atributos ARIA correspondientes para no perder la semántica: aria-valuenow, aria-valuemin y aria-valuemax.

Errores comunes y buenas prácticas al usar <meter>

• ❌ Error: Usarlo para progreso indefinido.
  • Justo lo que me pasó la primera vez. Si el total de la tarea no es conocido, usa <progress> sin atributo max para activar el modo indeterminado.
• ❌ Error: No definir min y max explícitamente.
  • Aunque tienen valores por defecto (0 y 1), omitirlos hace que el componente pierda semántica y puede confundir a otros desarrolladores.
• ❌ Error: Pasar valores fuera del rango definido.
  • Algunos navegadores ignoran el medidor o muestran comportamientos inesperados cuando value cae fuera de [min, max].
• ✔ Buena práctica: Mostrar contexto textual junto al medidor.
  • No te limites a la barra visual. Acompáñala siempre con un texto descriptivo, por ejemplo: "65% (temperatura alta)". Esto es especialmente útil para usuarios que no puedan distinguir el color de la barra.

Preguntas frecuentes sobre el elemento <meter>

• ❓ ¿Puedo usar <meter> para mostrar el progreso de una tarea?
  • Solo si el valor final es conocido y fijo. Si el total puede variar o es desconocido en tiempo de ejecución, usa <progress>. Esa es la distinción semántica clave entre ambos elementos.
• ❓ ¿Puedo personalizar el color y el estilo CSS del <meter>?
  • Sí, pero la personalización nativa está limitada a los pseudo-elementos -webkit- y no funciona de forma uniforme en Firefox. Para un control total del CSS, usa appearance: none y reconstruye la barra con <div>.
• ❓ ¿Qué pasa si no defino min o max?
  • Los valores por defecto del navegador serán 0 para min y 1 para max. Si tu value es, por ejemplo, 50, el medidor aparecerá completamente lleno porque excede el máximo por defecto.
• ❓ ¿Cuál es la diferencia entre <meter> y <progress>?
  • <meter> representa una medición estática dentro de un rango conocido (cuánto espacio de disco usas). <progress> representa el avance de una tarea que está sucediendo (cuánto de una descarga se ha completado). Confundirlos es el error semántico más común en barras de progreso HTML.

Conclusión

El elemento <meter> es semántico, potente y muy útil cuando necesitas representar valores dentro de un rango acotado. Entender sus atributos (value, min, max, low, high, optimum) y sus estados visuales no solo mejora la accesibilidad de tu interfaz, sino que te permite construir componentes más honestos y comunicativos. Y como comprobé al intentar mostrar el progreso de una tarea con él, elegir correctamente entre <meter> y <progress> marca la diferencia entre una interfaz semánticamente correcta y una que confunde tanto al usuario como a las tecnologías asistivas.

Aprende ahora sobre la etiqueta progress bar HTML5