Tag HTML <var>
A tag <var> descreve variáveis em expressões matemáticas ou contextos de programação. Veja exemplos.
A tag <var> descreve uma variável em uma expressão matemática ou em um contexto de programação. Seu conteúdo é geralmente apresentado em uma versão em itálico do tipo de fonte atual.
Outros elementos usados para descrever partes técnicas de documentos nos contextos em que <var> é geralmente utilizado incluem:
- a tag
<code>, que define um trecho de código de computador, - a tag
<samp>, que define a saída de amostra de um script ou programa de computador, - a tag
<kbd>, que define a saída do teclado.
Se houver um código em que a tag <var> é usada erroneamente para fins estilísticos e não semânticos, você deve usar um <span> com CSS adequado, ou uma tag semântica apropriada entre as seguintes: <q>, <em>,<i> .
A tag <var> não está obsoleta, mas você pode obter melhores efeitos com CSS.
Sintaxe
A tag <var> vem em pares. O conteúdo é escrito entre as tags de abertura (<var>) e fechamento (</var>).
Exemplo da tag HTML <var>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Example <var>This is a variable</var>
</body>
</html>Quando usar <var>
Use <var> para o nome de uma variável — um espaço reservado que representa um valor. Ela se aplica a dois contextos:
- Expressões matemáticas. As letras que representam quantidades desconhecidas ou variáveis, como
xeyem uma equação. - Programação. O nome de uma variável referenciada em texto, como
countouuserName.
É fácil confundir <var> com tags semânticas vizinhas. Escolha pelo significado, não pela aparência do texto:
| Tag | Use para | Exemplo |
|---|---|---|
<var> | Um nome de variável ou espaço reservado | "Seja n o número de usuários." |
<code> | Um fragmento de código de computador | "Chame getName() para lê-lo." |
<i> | Texto destacado por razões não semânticas (uma expressão estrangeira, um pensamento) | "a sonda Voyager" |
Se você deseja apenas estilização em itálico sem significado especial, use <i> ou um <span> estilizado em vez de <var>.
Exemplo: variáveis em uma equação
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The equation <var>x</var> + <var>y</var> = 10 has many solutions.</p>
<p>If <var>x</var> is 4, then <var>y</var> must equal 6.</p>
</body>
</html>Estilizando a tag <var> com CSS
Os navegadores renderizam <var> em itálico por padrão. Por ser um elemento semântico real, você pode reestilizá-lo livremente sem alterar seu significado — por exemplo, remover o itálico e dar às variáveis uma cor distinta para que se destaquem em textos técnicos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
var {
font-style: normal;
font-family: monospace;
color: #0d6efd;
font-weight: 600;
}
</style>
</head>
<body>
<p>Solve for <var>x</var> when <var>y</var> = 12.</p>
</body>
</html>Acessibilidade
O elemento <var> não possui papel ARIA implícito, portanto, as tecnologias assistivas não anunciam seu conteúdo como uma "variável" — para um leitor de tela, o texto é lido da mesma forma que o texto ao redor. O elemento comunica significado a autores e ferramentas de estilização, não diretamente aos usuários. Certifique-se de que o papel da variável esteja claro pelo texto ao redor, para que a frase ainda faça sentido quando lida em voz alta.
Atributos
A tag <var> suporta os Atributos Globais e os Atributos de Evento.