Etiqueta HTML <meter>

La etiqueta <meter> es uno de los elementos HTML5. Define una medida escalar dentro de un rango conocido — un único valor que se sitúa entre un mínimo y un máximo. Los casos de uso típicos incluyen el nivel de carga de la batería, el uso de disco, la puntuación de un examen, una valoración de relevancia o qué tan lleno está un contenedor. Dado que el indicador necesita una escala fija para dibujarse, siempre debes conocer (y generalmente declarar) el valor máximo.

Esta página cubre la sintaxis y los atributos de <meter>, cómo los atributos low, high y optimum controlan el color del indicador, cómo etiquetar un medidor para la accesibilidad y los límites de su estilo con CSS.

Información

<meter> vs <progress>: usa <meter> para una medida estática (p. ej., "6,7 GB de 8 GB usados"). Usa <progress> para el progreso de una tarea que avanza hacia el 100% (p. ej., la carga de un archivo o el cargado de una página). Se ven similares pero significan cosas distintas.

Sintaxis

La etiqueta <meter> viene en pares. El contenido se escribe entre las etiquetas de apertura (<meter>) y cierre (</meter>).

Ejemplo de la etiqueta HTML `<meter>`:

Ejemplo de la etiqueta HTML <meter> | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <meter value="4" min="0" max="10">4 out of 10</meter> 4 Out of 10<br />
    <meter value="0.75">75%</meter> 75%
  </body>
</html>

Pruébalo tú mismo »

Resultado

Peligro

La etiqueta <meter> no se usa para indicar progreso. Para ese propósito, usa la etiqueta <progress>.

Consejo

Usa las propiedades CSS background-color, box-shadow, width y height para dar estilo al elemento <meter>.

Accesibilidad: Siempre Etiqueta un Medidor

Un elemento <meter> no tiene nombre accesible implícito. Por sí solo, un lector de pantalla anuncia únicamente el valor, sin indicar qué se está midiendo. El texto que coloques entre las etiquetas es un texto alternativo visual para navegadores muy antiguos — no se expone de forma fiable como nombre accesible.

Dale a cada medidor una etiqueta real. La opción más clara es un elemento <label> asociado mediante id; de lo contrario, usa aria-label o aria-labelledby.

Etiquetar un elemento <meter>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- Associated <label> -->
    <label for="disk">Disk usage:</label>
    <meter id="disk" value="6" min="0" max="8">6 GB of 8 GB</meter>

    <!-- aria-label when no visible label is shown -->
    <meter value="0.6" aria-label="Password strength">60%</meter>
  </body>
</html>

Result

Zonas de Color: `low`, `high` y `optimum`

El navegador colorea el medidor automáticamente según dónde cae el value en relación con los atributos low, high y optimum. Los umbrales dividen el rango en tres bandas — por debajo de low, entre low y high, y por encima de high — y optimum le indica al navegador qué banda es la buena. A partir de eso, el navegador elige uno de tres estados:

Verde — el valor está en la banda (o adyacente a ella) que contiene optimum. Esta es la zona "buena".
Amarillo — el valor está a una banda de distancia de la banda óptima (aceptable, pero no ideal).
Rojo — el valor está en la banda en el lado opuesto del rango respecto a optimum (la peor zona).

Los colores exactos dependen del navegador, pero la lógica verde/amarillo/rojo es consistente. Ten en cuenta que el significado de alto y bajo no es "grande = bueno". Si optimum está por debajo de low, entonces los valores pequeños son verdes y los valores grandes se vuelven rojos.

Tres medidores que corresponden a los tres estados de color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <!-- value above high, optimum is low -> red -->
    <label for="m1">Server load (high is bad):</label>
    <meter id="m1" value="90" min="0" max="100" low="33" high="66" optimum="10">90%</meter>
    <br />

    <!-- value in the middle band -> yellow -->
    <label for="m2">Server load (medium):</label>
    <meter id="m2" value="50" min="0" max="100" low="33" high="66" optimum="10">50%</meter>
    <br />

    <!-- value in the optimum band -> green -->
    <label for="m3">Server load (low is good):</label>
    <meter id="m3" value="15" min="0" max="100" low="33" high="66" optimum="10">15%</meter>
  </body>
</html>

Result

Dado que optimum (10) está en la banda baja aquí, los valores bajos son saludables (verde) y los valores altos son peligrosos (rojo) — exactamente lo que deseas para algo como la carga de la CPU. Invierte optimum a un número alto y los colores se invierten, lo que resulta adecuado para un medidor de "nivel de batería" o "solidez de contraseña" donde más es mejor.

Mostrar un Rango Numérico

Los atributos min y max definen la escala sobre la que se dibuja el indicador. El value se interpreta en esa escala: con min="0" y max="70", un value de 15 llena aproximadamente el 21% de la barra. Usa el atributo optimum para marcar el punto ideal del rango — por ejemplo, la nota de aprobado en un examen — que (junto con low y high) controla el color del indicador descrito anteriormente.

Una puntuación de examen sobre 70, donde mayor es mejor:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="score">Test score:</label>
    <meter id="score" value="15" min="0" max="70" low="35" high="55" optimum="65">15 out of 70</meter>
  </body>
</html>

Result

Mostrar un Porcentaje

Si omites min y max, su valor predeterminado es 0 y 1. Esto hace que <meter> sea conveniente para fracciones: un value de 0.8 se representa como el 80% de la barra. Esto es práctico para cosas como una puntuación de relevancia o un indicador de "completitud del perfil".

Siempre proporciona una etiqueta visible (o aria-label) y texto alternativo legible por humanos, para que el significado quede claro sin el estilo.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="complete">Profile completeness:</label>
    <meter id="complete" value="0.8">80%</meter>
  </body>
</html>

Result

Dar Estilo a la Etiqueta HTML `<meter>`

En primer lugar, establece el tamaño con las propiedades width y height.

Ejemplo de la etiqueta HTML <meter>:

meter {
  width: 300px;
  height: 20px;
}

Los navegadores modernos no ofrecen ganchos de estilo fiables y multiplataforma para el control nativo meter. Los pseudoelementos específicos del proveedor que se muestran a continuación están obsoletos o no son compatibles con los navegadores actuales, por lo que no deben usarse en producción. Si necesitas un indicador completamente estilizado y accesible, considera usar un componente personalizado compatible con ARIA o la etiqueta <progress> cuando el valor represente progreso.

Los ejemplos a continuación se mantienen como referencia, pero trátelos como frágiles: cada navegador expone sus propios pseudoelementos no estándar, no son interoperables y algunos se han eliminado por completo. Si necesitas un indicador completamente estilizado y accesible, construye un componente personalizado con elementos simples usando role="meter", aria-valuenow, aria-valuemin y aria-valuemax, y anima eso en su lugar. Los motores Webkit/Blink exponen los siguientes pseudoelementos:

Pseudoclase	Descripción
-webkit-meter-inner-element	Marcado adicional que se usa para renderizar el elemento meter como de solo lectura.
-webkit-meter-bar	Contiene el indicador del medidor que muestra el valor.
-webkit-meter-optimum-value	El valor actual del elemento meter, que de forma predeterminada es verde cuando el atributo value cae dentro del rango low-high.
-webkit-meter-suboptimum-value	La etiqueta meter se vuelve amarilla cuando el valor está fuera del rango low-high.
-webkit-meter-even-less-good-value	La etiqueta meter se vuelve roja cuando los atributos value y optimum están fuera del rango low-high pero en zonas opuestas. Por ejemplo, value high > low > optimum.

A continuación, necesitaremos establecer la apariencia predeterminada appearance del indicador del medidor en "none".

Etiqueta meter con estilo usando la propiedad appearance

meter {
  -webkit-appearance: none;
}

En nuestro ejemplo, usaremos las pseudoclases -webkit-meter-bar y -webkit-meter-optimum-value.

Estilizar la etiqueta HTML <meter>

meter::-webkit-meter-bar {
  background: none;
  background-color: lightgrey;
  box-shadow: 0 3px 3px -3px #333 inset;
}

meter::-webkit-meter-optimum-value {
  box-shadow: 0 3px 3px -3px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

Cada color en el degradado lineal de fondo representa el espacio consumido por las subcategorías.

Estilizar la etiqueta HTML <meter>

meter::-webkit-meter-optimum-value {
  -webkit-transition: width .5s;
}

meter::-webkit-meter-optimum-value:hover {
  background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
  transition: width .5s;
  width: 100%;
}

Ejemplo de estilo de la etiqueta HTML `<meter>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        box-shadow: 0 3px 3px -3px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Pruébalo tú mismo »

Las propiedades transition y animation en el elemento <meter> son compatibles con los navegadores Webkit. Cambia el ancho del valor (en :hover) usando transiciones y anima el background-position del contenedor con keyframes.

Ejemplo de estilo de la etiqueta HTML `<meter>` con la propiedad CSS transition:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 300px;
        height: 20px;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgrey;
        box-shadow: 0 3px 3px -3px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #2286c9 20%, #FF00FF 20%, #FF00FF 40%, #04C319 40%, #04C319 60%, #F1F70D 60%, #F1F70D 80%, #00FFCC 80%, #00FFCC 100%);
        transition: width .5s;
        width: 100% !important;
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Pruébalo tú mismo »

Los pseudoelementos sobre el indicador del medidor son compatibles únicamente con los navegadores Webkit. Los pseudoelementos se pueden usar para mostrar metainformación encima del indicador del medidor.

Estilizar la etiqueta HTML <meter>

meter {
  margin: 2em;
  position: relative;
}

meter::before {
  content: 'Used storage';
  position: absolute;
  top: -100%;
}

meter::after {
  content: 'Free storage';
  position: absolute;
  top: -100%;
  right: 0;
}

Ejemplo de la etiqueta HTML `<meter>` usada con pseudoelementos:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        margin: 2em;
        width: 400px;
        height: 30px;
        position: relative;
      }
      meter::before {
        content: 'Used storage';
        position: absolute;
        top: -100%;
      }
      meter::after {
        content: 'Free storage';
        position: absolute;
        top: -100%;
        right: 0;
      }
      meter::-webkit-meter-bar {
        background: none;
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-webkit-meter-optimum-value {
        -webkit-transition: width .5s;
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #8bcf69 5%, #e6d450 5%, #e6d450 15%, #f28f68 15%, #f28f68 55%, #cf82bf 55%, #cf82bf 95%, #719fd1 95%, #719fd1 100%);
        background-size: 100% 100%;
      }
      meter::-webkit-meter-optimum-value:hover {
        /* Reset each sub-category to 20% */
        background-image: linear-gradient( 90deg, #8bcf69 20%, #e6d450 20%, #e6d450 40%, #f28f68 40%, #f28f68 60%, #cf82bf 60%, #cf82bf 80%, #719fd1 80%, #719fd1 100%);
        transition: width .5s;
        width: 100% !important;
        /* !important required. to override the inline styles in WebKit. */
      }
    </style>
  </head>
  <body>
    <meter value="25" min="0" max="70"></meter>
  </body>
</html>

Pruébalo tú mismo »

Ahora, usemos el alternativo de Firefox. Pinta el indicador del medidor usando -moz-appearance: meterbar. Si no necesitas el bisel y el relieve predeterminados, establece -moz-appearance en "none".

Estilizar la etiqueta HTML <meter>

meter {
  -moz-appearance: none;
  width: 400px;
  height: 30px;
}

Firefox ya no admite el estilo del indicador del medidor mediante pseudoelementos CSS.

Aquí, estilizaremos el fondo del valor del indicador del medidor usando la pseudoclase ::-moz-meter-bar.

Estilizar la etiqueta HTML <meter>

meter::-moz-meter-bar {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
  background-size: 100% 100%;
}

En Firefox, puedes usar el selector meter en sí para dar estilo al fondo del contenedor.

Estilizar la etiqueta HTML <meter>

meter {
  background: none;
  background-color: lightgray;
  box-shadow: 0 5px 5px -5px #333 inset;
}

Ejemplo de la etiqueta HTML `<meter>` para Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      meter {
        width: 400px;
        height: 30px;
        background: none;
        /* Required to get rid of the default background property */
        background-color: lightgray;
        box-shadow: 0 5px 5px -5px #333 inset;
      }
      meter::-moz-meter-bar {
        box-shadow: 0 5px 5px -5px #999 inset;
        background-image: linear-gradient( 90deg, #2286c9 5%, #FF00FF 5%, #FF00FF 15%, #04C319 15%, #04C319 55%, #F1F70D 55%, #F1F70D 95%, #00FFCC 95%, #00FFCC 100%);
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <meter value="30" min="0" max="70"></meter>
  </body>
</html>

Pruébalo tú mismo »

Los pseudoelementos ::before y ::after sobre el indicador del medidor no son compatibles con Firefox. El soporte para transiciones CSS3 y animación también es limitado.

Atributos

Atributo	Valor	Descripción
form	form_id	Indica el formulario (o formularios) al que pertenece la etiqueta `<meter>`.
high	number	Indica valores altos (pero no los máximos). Si el valor high es menor que low, entonces high = low. Si high es mayor que max, entonces high = max.
low	number	Define valores bajos (pero no los mínimos). Este valor debe ser menor que high. Si el valor low es menor que min, entonces low = min.
max	number	Define el valor máximo posible. El valor predeterminado es 1.
min	number	Define el valor mínimo posible. El valor predeterminado es 0.
optimum	number	Define el número óptimo, que debe estar dentro del rango definido por los atributos min y max. Puede ser mayor que el valor high.
value	number	Establece el valor actual. Si se omite, el valor predeterminado es 0,5.

La etiqueta <meter> admite los Atributos Globales y los Atributos de Evento.

Práctica

¿Qué representa el elemento meter de HTML?

Una medida escalar dentro de un rango conocido, como el uso de disco o la puntuación de un examen.El progreso de finalización de una tarea que avanza hacia el 100%.Un control de lista desplegable para seleccionar una opción.Un hipervínculo a otro documento.

Sintaxis

Ejemplo de la etiqueta HTML <meter>:

Resultado

Accesibilidad: Siempre Etiqueta un Medidor

Zonas de Color: low, high y optimum

Mostrar un Rango Numérico

Mostrar un Porcentaje

Dar Estilo a la Etiqueta HTML <meter>

Ejemplo de estilo de la etiqueta HTML <meter>:

Ejemplo de estilo de la etiqueta HTML <meter> con la propiedad CSS transition:

Ejemplo de la etiqueta HTML <meter> usada con pseudoelementos:

Ejemplo de la etiqueta HTML <meter> para Firefox:

Atributos

Práctica

Ejemplo de la etiqueta HTML `<meter>`:

Zonas de Color: `low`, `high` y `optimum`

Dar Estilo a la Etiqueta HTML `<meter>`

Ejemplo de estilo de la etiqueta HTML `<meter>`:

Ejemplo de estilo de la etiqueta HTML `<meter>` con la propiedad CSS transition:

Ejemplo de la etiqueta HTML `<meter>` usada con pseudoelementos:

Ejemplo de la etiqueta HTML `<meter>` para Firefox: