HTML <meter> Tag

A tag <meter> é um dos elementos HTML5. Ela define uma medição escalar dentro de um intervalo conhecido — um único valor que se situa em algum ponto entre um mínimo e um máximo. Casos de uso típicos incluem nível de carga da bateria, uso de disco, pontuação em um teste, avaliação de relevância ou quão cheio está um recipiente. Como o medidor precisa de uma escala fixa para ser renderizado, você deve sempre conhecer (e geralmente declarar) o valor máximo.

Esta página aborda a sintaxe e os atributos de <meter>, como os atributos low, high e optimum controlam a cor do medidor, como rotular um medidor para acessibilidade e as limitações do estilo com CSS.

Informação

<meter> vs <progress>: use <meter> para uma medição estática (ex.: "6,7 GB de 8 GB usados"). Use <progress> para o avanço de uma tarefa rumo a 100% (ex.: upload de arquivo ou carregamento de página). Eles parecem semelhantes, mas têm significados diferentes.

Sintaxe

A tag <meter> vem em pares. O conteúdo é escrito entre as tags de abertura (<meter>) e fechamento (</meter>).

Exemplo da tag HTML `<meter>`:

Exemplo da tag 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>

Experimente Você Mesmo »

Resultado

Perigo

A tag <meter> não é usada para indicar progresso. Para esse propósito, use a tag <progress>.

Dica

Use as propriedades CSS background-color, box-shadow, width e height para estilizar o elemento <meter>.

Acessibilidade: Sempre Rotule um Medidor

Um elemento <meter> não possui nome acessível implícito. Por conta própria, um leitor de tela anuncia apenas o valor, sem indicar o que está sendo medido. O texto colocado entre as tags é um fallback visual para navegadores muito antigos — ele não é exposto de forma confiável como nome acessível.

Forneça sempre um rótulo real para cada medidor. A opção mais clara é um elemento <label> associado por id; caso contrário, use aria-label ou aria-labelledby.

Rotulando um 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 Cor: `low`, `high` e `optimum`

O navegador colore o medidor automaticamente com base em onde value se encontra em relação aos atributos low, high e optimum. Os limites dividem o intervalo em três faixas — abaixo de low, entre low e high, e acima de high — e optimum informa ao navegador qual faixa é a boa. A partir disso, o navegador escolhe um de três estados:

Verde — o valor está na faixa que contém optimum (ou adjacente a ela). Esta é a zona "boa".
Amarelo — o valor está a uma faixa de distância da faixa ideal (aceitável, mas não ideal).
Vermelho — o valor está na faixa do lado oposto ao optimum no intervalo (a pior zona).

As cores exatas dependem do navegador, mas a lógica verde/amarelo/vermelho é consistente. Note que o significado de alto e baixo não é "grande = bom". Se optimum estiver abaixo de low, então valores pequenos ficam verdes e valores grandes ficam vermelhos.

Três medidores que correspondem aos três estados de cor:

<!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

Como optimum (10) está na faixa baixa aqui, valores baixos são saudáveis (verde) e valores altos são perigosos (vermelho) — exatamente o que se espera para algo como carga de CPU. Inverta optimum para um número alto e as cores se invertem, o que é adequado para um medidor de "nível de bateria" ou "força da senha", onde mais é melhor.

Exibindo um Intervalo de Números

Os atributos min e max definem a escala sobre a qual o medidor é desenhado. O value é interpretado nessa escala: com min="0" e max="70", um value de 15 preenche aproximadamente 21% da barra. Use o atributo optimum para marcar o ponto ideal no intervalo — por exemplo, a nota de aprovação em um teste — que (junto com low e high) controla a cor do medidor descrita acima.

Uma pontuação de teste de até 70, onde maior é melhor:

<!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

Exibindo uma Porcentagem

Se você omitir min e max, eles assumem como padrão 0 e 1. Isso torna o <meter> conveniente para frações: um value de 0.8 é renderizado como 80% da barra. É útil para coisas como uma pontuação de relevância ou um indicador de "completude do perfil".

Sempre forneça um rótulo visível (ou aria-label) e texto de fallback legível por humanos, para que o significado fique claro sem o 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

Estilizando a tag HTML `<meter>`

Primeiro, defina o tamanho com as propriedades width e height.

Exemplo da tag HTML <meter>:

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

Os navegadores modernos não oferecem ganchos de estilo confiáveis e compatíveis entre si para o controle nativo meter. Os pseudo-elementos específicos de fornecedor mostrados abaixo estão obsoletos ou sem suporte nos navegadores atuais, portanto não devem ser usados em estilizações para produção. Se você precisar de um indicador totalmente estilizado e acessível, considere usar um componente personalizado compatível com ARIA ou a tag <progress> quando o valor representar progresso.

Os exemplos abaixo são mantidos como referência, mas devem ser tratados como frágeis: cada navegador expõe seus próprios pseudo-elementos não padronizados, eles não são interoperáveis e alguns foram completamente removidos. Se você precisar de um indicador totalmente estilizado e acessível, construa um componente personalizado com elementos simples usando role="meter", aria-valuenow, aria-valuemin e aria-valuemax, e anime isso. Os motores Webkit/Blink expõem os seguintes pseudo-elementos:

Pseudo-classe	Descrição
-webkit-meter-inner-element	Marcação adicional usada para renderizar o elemento meter como somente leitura.
-webkit-meter-bar	Contém o medidor que exibe o valor.
-webkit-meter-optimum-value	O valor atual do elemento meter, que por padrão fica verde quando o atributo value está dentro do intervalo low-high.
-webkit-meter-suboptimum-value	A tag meter fica amarela quando o valor está fora do intervalo low-high.
-webkit-meter-even-less-good-value	A tag meter fica vermelha quando os atributos value e optimum estão fora do intervalo low-high, mas em zonas opostas. Por exemplo, value alto > low > optimum.

Em seguida, precisaremos definir a appearance padrão do medidor como "none".

Tag meter estilizada com a propriedade appearance

meter {
  -webkit-appearance: none;
}

No nosso exemplo, usaremos os pseudo-classes -webkit-meter-bar e -webkit-meter-optimum-value.

Estilizando a tag 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 cor no gradiente linear de fundo representa o espaço consumido pelas subcategorias.

Estilizando a tag 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%;
}

Exemplo de estilização da tag 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>

Experimente Você Mesmo »

Tanto as propriedades transition quanto animation no elemento <meter> são suportadas por navegadores Webkit. Altere a largura do valor (no :hover) usando transições e anime o background-position do contêiner com keyframes.

Exemplo de estilização da tag HTML `<meter>` com a propriedade 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>

Experimente Você Mesmo »

Os pseudo-elementos no medidor são suportados apenas por navegadores Webkit. Os pseudo-elementos podem ser usados para exibir as metainformações acima do medidor.

Estilizando a tag 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;
}

Exemplo da tag HTML `<meter>` usada com pseudo-elementos:

<!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>

Experimente Você Mesmo »

Agora, vamos usar o fallback do Firefox. Pinte o medidor usando -moz-appearance: meterbar. Se você não precisar do bisel e relevo padrão, defina -moz-appearance como "none".

Estilizando a tag HTML <meter>

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

O Firefox não suporta mais a estilização do medidor por pseudo-elementos CSS.

Aqui, vamos estilizar o fundo do valor do medidor usando o pseudo-elemento ::-moz-meter-bar.

Estilizando a tag 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%;
}

No Firefox, você pode usar o seletor meter para estilizar o fundo do contêiner.

Estilizando a tag HTML <meter>

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

Exemplo da tag 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>

Experimente Você Mesmo »

Os pseudo-elementos ::before e ::after no medidor não são suportados pelo Firefox. O suporte para transições e animações CSS3 também é fraco.

Atributos

Atributo	Valor	Descrição
form	form_id	Indica o formulário (ou formulários) ao qual a tag `<meter>` pertence.
high	number	Indica valores altos (mas não o máximo). Se o valor de high for menor que low, então high = low. Se high for definido maior que max, então high = max.
low	number	Define valores baixos (mas não os mínimos). Este valor deve ser menor que high. Se o valor de low for menor que min, então low = min.
max	number	Define o valor máximo possível. O valor padrão é 1.
min	number	Define o valor mínimo possível. O valor padrão é 0.
optimum	number	Define o número ideal, que deve estar dentro do intervalo definido pelos atributos min e max. Pode ser maior que o valor de high.
value	number	Define o valor atual. Se omitido, o valor padrão é 0.5.

A tag <meter> suporta os Atributos Globais e os Atributos de Evento.

Prática

O que o elemento HTML meter representa?

Uma medição escalar dentro de um intervalo conhecido, como uso de disco ou pontuação em um teste.O progresso de conclusão de uma tarefa que avança em direção a 100%.Um controle de lista suspensa para selecionar uma opção.Um hiperlink para outro documento.

Sintaxe

Exemplo da tag HTML <meter>:

Resultado

Acessibilidade: Sempre Rotule um Medidor

Zonas de Cor: low, high e optimum

Exibindo um Intervalo de Números

Exibindo uma Porcentagem

Estilizando a tag HTML <meter>

Exemplo de estilização da tag HTML <meter>:

Exemplo de estilização da tag HTML <meter> com a propriedade CSS transition:

Exemplo da tag HTML <meter> usada com pseudo-elementos:

Exemplo da tag HTML <meter> para Firefox:

Atributos

Prática

Exemplo da tag HTML `<meter>`:

Zonas de Cor: `low`, `high` e `optimum`

Estilizando a tag HTML `<meter>`

Exemplo de estilização da tag HTML `<meter>`:

Exemplo de estilização da tag HTML `<meter>` com a propriedade CSS transition:

Exemplo da tag HTML `<meter>` usada com pseudo-elementos:

Exemplo da tag HTML `<meter>` para Firefox: