<meter>: Elemento METER
Última atualização: 2026-10-13
<meter>Elemento METER
Mostra uma medida conhecida dentro de um intervalo (min–max), ex.: uso de disco, avaliação, temperatura. Não é para progresso indeterminado — use <progress>.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </meter> tag |
| Status | Padrão |
📝 Sintaxe
<meter value="0.6" min="0" max="1">60%</meter>⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
value | The current measured value (required). | |
min | Lower bound of the range, default 0. | |
max | Upper bound of the range, default 1. | |
low | The 'low' threshold. | |
high | The 'high' threshold. | |
optimum | The optimal value, affecting color hints. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <meter> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： meter é para medidas de intervalo fixo; para progresso desconhecido use <progress>.
❓ Perguntas Frequentes
QQual é a diferença entre meter e progress?
A
<meter> mostra a posição de um «valor estático» num intervalo conhecido (disco 65% ocupado, nota 4.2/5), com os intervalos semânticos min/max/low/high/optimum; <progress> mostra o «andar de uma tarefa», só faz sentido terminar ou não. Notas e proporções usam meter; carregamento e upload usam progress.QComo usar os atributos low, high e optimum de meter?
ADentro do intervalo min-max, dividem faixas de qualidade:
low/high definem as zonas de alerta «muito baixo/muito alto» e optimum aponta a faixa ideal. O navegador colore a régua (verde/amarelo/vermelho) — por exemplo, temperatura 36-37 como optimum e desvios em alerta.QPode-se escrever conteúdo dentro de meter?
ASim, o texto entre as tags é a mensagem de fallback quando o navegador não renderiza meter, como
<meter value='0.65'>65%</meter>. Recomenda-se ainda complementar com aria-valuenow e afins, pois o suporte dos leitores de tela a meter é irregular.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
