Etiqueta HTML <var>
La etiqueta <var> describe una variable en una expresión matemática o en un contexto de programación. Ver ejemplos.
La etiqueta <var> describe una variable en una expresión matemática o en un contexto de programación. Su contenido se presenta generalmente en una versión en cursiva del tipo de letra actual.
Otros elementos que se utilizan para describir partes técnicas de los documentos en los contextos en los que se usa normalmente <var> incluyen:
- la etiqueta
<code>que define un fragmento de código de computadora, - la etiqueta
<samp>que define la salida de muestra de un script o programa de computadora, - la etiqueta
<kbd>que define la salida del teclado.
Si hay un código donde la etiqueta <var> se usa por error con fines estilísticos y no semánticos, debe usar un <span> con CSS apropiado, o una etiqueta semántica adecuada entre las siguientes: <q>, <em>, <i>.
La etiqueta <var> no está obsoleta, pero puede lograr mejores efectos con CSS.
Sintaxis
La etiqueta <var> viene en pares. El contenido se escribe entre las etiquetas de apertura (<var>) y cierre (</var>).
Ejemplo de la etiqueta HTML <var>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Example <var>This is a variable</var>
</body>
</html>Cuándo usar <var>
Use <var> para el nombre de una variable — un marcador de posición que representa un valor. Se adapta a dos contextos:
- Expresiones matemáticas. Las letras que representan cantidades desconocidas o cambiantes, como
xeyen una ecuación. - Programación. El nombre de una variable referenciada en prosa, como
countouserName.
Es fácil confundir <var> con etiquetas semánticas vecinas. Elija según el significado, no según el aspecto del texto:
| Etiqueta | Úsela para | Ejemplo |
|---|---|---|
<var> | Un nombre de variable o marcador de posición | "Sea n el número de usuarios." |
<code> | Un fragmento de código de computadora | "Llame a getName() para leerlo." |
<i> | Texto separado por razones no semánticas (una frase extranjera, un pensamiento) | "la sonda Voyager" |
Si solo desea estilo en cursiva sin ningún significado especial, use <i> o un <span> con estilo en lugar de <var>.
Ejemplo: variables en una ecuación
<!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>Aplicar estilos a la etiqueta <var> con CSS
Los navegadores renderizan <var> en cursiva de forma predeterminada. Como es un elemento semántico real, puede cambiar su estilo libremente sin alterar su significado — por ejemplo, eliminar la cursiva y asignar a las variables un color distinto para que destaquen en texto técnico:
<!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>Accesibilidad
El elemento <var> no tiene rol ARIA implícito, por lo que las tecnologías de asistencia no anuncian su contenido como una "variable" — para un lector de pantalla, el texto se lee igual que el texto circundante. El elemento comunica el significado a los autores y a las herramientas de estilo, no directamente a los usuarios. Asegúrese de que el papel de la variable quede claro por el texto que la rodea, de modo que la oración siga teniendo sentido cuando se lee en voz alta.
Atributos
La etiqueta <var> admite los atributos globales y los atributos de eventos.