Etiqueta meter en HTML: mediciones dentro de un rango

La etiqueta <meter> representa una medición escalar dentro de un rango conocido, como espacio usado o una puntuación. Úsala cuando quieras situar una cantidad entre un mínimo y un máximo: por ejemplo, mostrar cuánto disco ocupa un equipo y si conviene liberar espacio. Para el avance de una operación, HTML dispone de <progress>.

Ejemplo mínimo de meter

<label for="disco">Espacio usado: 60 de 100 GB</label>
<meter id="disco" min="0" max="100" value="60">60 de 100 GB</meter>

La medición expresa 60 dentro de un rango de 0 a 100. En un navegador que representa el elemento como barra, ocupa aproximadamente el 60 % del recorrido. La etiqueta mantiene visible el dato y la unidad; el navegador no escribe automáticamente «GB» ni los límites junto a la barra. for="disco" asocia ese nombre con el medidor de id="disco".

Para probarlo, sustituye todo el contenido de <body> del documento completo del ejemplo práctico por este fragmento. Cambia value a 25 y actualiza ambos textos a «25 de 100 GB»: la barra pasa a un cuarto del recorrido. Si retiras las etiquetas de apertura y cierre de <meter>, conserva su texto: desaparecen la barra y la semántica de medición, pero queda el dato escrito.

Sintaxis y contexto válido

<meter> lleva apertura y cierre explícitos; ninguna etiqueta puede omitirse. Puede aparecer donde se acepta contenido de frase, como en un párrafo. Su interior admite texto y otros elementos de frase, pero ningún <meter> descendiente. No coloques una lista o un <div> dentro del medidor. Estas restricciones y su significado se definen en el HTML Living Standard.

No necesita estar dentro de un formulario y no es un campo editable. Tampoco envía por sí mismo un dato al enviar un formulario. Mostrar una temperatura sin límites conocidos no basta para elegir <meter>: primero necesitas una escala que dé contexto a la medición.

Atributos: value, min, max y umbrales

Los seis atributos específicos aceptan números, sin unidades dentro del valor. Para decimales utiliza punto, como value="7.5"; las unidades y la escritura localizada pertenecen al texto.

• value: cantidad medida; es obligatorio al escribir el elemento. Si se omite, el navegador obtiene 0, ajustado al rango; la omisión es un error de autoría.
• min: límite inferior; el predeterminado es 0.
• max: límite superior; el predeterminado es 1.
• low: límite superior de la zona baja; si se omite, coincide con el mínimo.
• high: límite inferior de la zona alta; si se omite, coincide con el máximo.
• optimum: punto que indica la zona preferible; si se omite, se usa el punto medio del rango.

Por tanto, el máximo predeterminado no es 100. Escribe los límites de tu escala: 200 GB, 10 puntos o cualquier otro rango conocido. Para una escala útil, elige min < max y respeta estas relaciones:

• min ≤ value ≤ max.
• min ≤ low ≤ high ≤ max, cuando incluyas ambos umbrales.
• min ≤ optimum ≤ max.

Si solo defines un umbral, también debe quedar dentro del rango. El navegador ajusta valores incoherentes; eso no corrige el error en tu documento ni actualiza su texto. Consulta los atributos de meter en MDN.

id, class y lang son atributos globales. Una propiedad CSS como width cambia el tamaño visual. En JavaScript, las propiedades DOM .value, .min, .max, .low, .high y .optimum permiten consultar o modificar el medidor; .labels consulta sus etiquetas. Son parte de la interfaz HTMLMeterElement. Cambiar .value no cambia por sí solo los textos que escribiste alrededor.

Cómo interpretar low, high y optimum

low y high dividen la escala; no significan automáticamente «bueno» y «malo». optimum indica qué zona resulta deseable:

• Si queda por debajo de low, se prefiere la zona baja: menos espacio ocupado deja más disco libre.
• Si queda por encima de high, se prefiere la zona alta: una puntuación mayor puede ser mejor.
• Si queda entre ambos umbrales, incluidos sus límites, se prefiere la zona intermedia.

optimum no cambia la cantidad medida ni marca una meta que deba alcanzarse mediante una tarea. Los colores dependen de estas zonas y de la presentación del navegador. Explica siempre en palabras la cantidad y su interpretación.

Caso práctico: disco ocupado y puntuación

Guarda este código como mediciones.html, con codificación UTF-8, y ábrelo en el navegador. El ejemplo está completo: no requiere CSS, JavaScript, archivos adicionales ni servidor.

<!doctype html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Estado del equipo y puntuación</title>
</head>
<body>
  <h1>Dos mediciones con criterios distintos</h1>

  <p>
    <label for="uso-disco">Disco: 180 de 200 GB usados</label>
    <meter id="uso-disco" min="0" max="200"
      low="100" high="160" optimum="40" value="180">
      180 de 200 GB usados
    </meter>
  </p>
  <p>Quedan 20 GB libres. Conviene liberar espacio:
    la ocupación está por encima del umbral de 160 GB.</p>

  <p>
    <label for="puntuacion">Puntuación: 9 de 10 puntos</label>
    <meter id="puntuacion" min="0" max="10"
      low="5" high="8" optimum="10" value="9">
      9 de 10 puntos
    </meter>
  </p>
  <p>La puntuación supera el umbral de 8 puntos:
    se encuentra en la zona alta deseable.</p>
</body>
</html>

Ambos medidores ocupan el 90 % del recorrido, pero el resultado se interpreta de forma opuesta. En el disco, 40 < 100: la zona baja es preferible y 180 supera high="160". En la puntuación, 10 > 8: la zona alta es preferible y 9 supera high="8". Son criterios de esta demostración, no reglas universales para discos o evaluaciones.

Prueba estos cambios recargando el archivo después de guardarlo:

1. Cambia el disco a 80 GB y actualiza etiqueta, contenido y explicación: quedan 120 GB libres y la cantidad cae en la zona preferible.
2. Cambia la puntuación a 3 y actualiza sus textos: cae por debajo de 5, lejos de la zona preferible.
3. Vuelve al disco original y cambia solo optimum a 200: la barra conserva el 90 % de recorrido, pero la zona alta pasa a ser preferible. Es una prueba de interpretación; ese criterio contradice la recomendación de liberar espacio del ejemplo.
4. Desactiva JavaScript y recarga: los medidores y las explicaciones funcionan igual. Si sustituyes ambos elementos por su contenido textual, permanecen las cantidades y recomendaciones, aunque desaparece la representación gráfica.

Nombre accesible y valor textual

Usa una <label> asociada y deja el valor visible fuera del medidor. Su contenido textual sirve como alternativa si no se representa el elemento; no confíes en que se muestre junto a la barra en los navegadores que sí lo admiten.

Las etiquetas del ejemplo incluyen cantidades y unidades para dar contexto a los valores numéricos. Las recomendaciones permanecen en párrafos visibles. La guía de medidores de WAI explica la necesidad de un nombre comprensible y que un medidor no necesita interacción por teclado. El elemento nativo ya aporta su semántica: no añadas un role redundante ni una parada de Tab para editarlo.

Comprueba en el panel de accesibilidad del navegador el nombre asociado y los valores mínimo, máximo y actual. El anuncio exacto depende del navegador y del lector de pantalla. Si actualizas la medición mediante un script, mantén sincronizados también los textos.

Errores frecuentes y elección de etiqueta

¿Meter sirve para una carga? Para una descarga, subida o instalación en curso, utiliza <progress>. <meter> expresa el estado de una cantidad dentro de una escala, aunque esa cantidad pueda cambiar con el tiempo.

¿Los colores significan lo mismo siempre? No. Revisa low, high y optimum, y explica el resultado sin depender del color. Una barra llena puede expresar tanto un disco saturado como una excelente puntuación.

Si el medidor aparece lleno inesperadamente, revisa primero max: con el máximo predeterminado de 1, value="60" queda fuera del rango. Comprueba después el orden de los umbrales y que los números no incluyan «GB», comas decimales o porcentajes. Para un nombre ausente, revisa la coincidencia de for e id y evita IDs duplicados.

<output> representa el resultado de un cálculo o de una acción; por ejemplo, los GB libres calculados a partir de dos datos. No sustituye la escala de <meter>. <label> identifica la medición y <progress> describe una tarea: cada uno resuelve una necesidad distinta.

Compatibilidad y fuentes

Consultado el 3 de octubre de 2026: el elemento y sus atributos numéricos tienen soporte amplio en navegadores actuales, según la referencia y compatibilidad de MDN. La forma, dimensiones y colores de la barra pueden variar. Los ejemplos conservan cantidades, unidades y criterios visibles para que el significado no dependa de esa presentación.