acerca de HTML

Referencia de etiquetas

Etiqueta var en HTML: variables y símbolos

La etiqueta <var> identifica una variable en una expresión matemática o en la explicación de un programa. En una fórmula de área, por ejemplo, permite marcar las letras que representan la base y la altura. El navegador suele mostrarlas en cursiva.

Ejemplo mínimo de var

<p>El área es <var>b</var> × <var>h</var>.</p>

Verás «El área es b × h», con b y h identificadas como variables, normalmente en cursiva. Aquí b representa la base y h la altura; el signo × indica multiplicación. La frase explica cómo obtener el área, pero no presenta un resultado numérico.

Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guárdalo y ábrelo en el navegador.

Sintaxis y contexto válido

Escribe <var>nombre</var>: tanto la apertura como el cierre son necesarios. El elemento admite contenido de frase, como texto y un subíndice, y se coloca donde se permita ese contenido, por ejemplo dentro de un párrafo, un encabezado o un elemento de lista. No lo uses para envolver párrafos o secciones completas.

Una variable no tiene que ser una sola letra: <var>cantidad</var> puede identificar el nombre que estás explicando en la documentación de un programa. El HTML Living Standard define el significado y el contenido permitido de var.

Caso práctico: área de un rectángulo y potencia

Guarda el siguiente documento como areas-var.html, en UTF-8, y ábrelo en un navegador. Incluye todo lo necesario; no requiere servidor, recursos adicionales ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Calcular áreas: explicación de las variables</title>
    <style>
      body {
        margin: 1rem;
        max-width: 42rem;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
        color: #1f2937;
        background: white;
        overflow-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h1>El área de un rectángulo</h1>
    <p>La fórmula es <var>A</var> = <var>b</var> × <var>h</var>.</p>
    <p>
      A representa el área, b la base y h la altura.
      En palabras: el área se obtiene multiplicando la base por la altura.
    </p>
    <p>
      Si la base mide 5 cm y la altura 3 cm,
      el área es 5 × 3 = 15 cm<sup>2</sup>, es decir, 15 centímetros cuadrados.
    </p>
    <h2>Cuando el rectángulo es un cuadrado</h2>
    <p>
      Ambos lados tienen la misma longitud, representada por l.
      La fórmula es <var>A</var> = <var>l</var><sup>2</sup>.
    </p>
    <p>
      Se lee «el área es igual a l al cuadrado»:
      multiplicamos la longitud del lado por sí misma.
    </p>
    <p>
      Para un lado de 4 cm, el área es 4 × 4 = 16 cm<sup>2</sup>,
      es decir, 16 centímetros cuadrados.
    </p>
  </body>
</html>

En la primera fórmula, A, b y h aparecen con el aspecto habitual de las variables. En la segunda, <var>l</var><sup>2</sup> combina una variable con un exponente: l es la base de la potencia y 2 indica que se multiplica por sí misma. El 2 de cm<sup>2</sup> expresa la unidad de superficie; «cm» no es una variable.

Las frases ofrecen una versión verbal de las fórmulas y explican los símbolos. Los resultados 15 y 16 están escritos en el archivo: HTML no los calcula ni comprueba sus unidades.

Prueba estos cambios para comparar el significado de cada elemento:

  1. Retira únicamente las etiquetas <var>: las fórmulas siguen siendo legibles, pero las letras dejan de estar marcadas como variables.
  2. Retira <sup> y </sup> de la potencia: verás l2 en la misma línea. La explicación verbal permanece, pero se pierde la notación de exponente.
  3. Quita el bloque <style> y compara los márgenes y la tipografía. Las variables conservan su cursiva habitual.

Var frente a code y cursivas CSS

Elige según lo que estés comunicando:

  • <var> identifica la variable de una explicación: b, h o cantidad.
  • <code> representa código, por ejemplo una instrucción como const area = base * altura;. Mostrarla dentro de <code> tampoco la ejecuta.
  • <i> marca una voz alternativa o un término especial según su contexto; una letra variable tiene un elemento específico: <var>.
  • Para cursivas decorativas, usa un contenedor apropiado, como <span>, y CSS font-style: italic. Esa propiedad cambia el aspecto sin identificar una variable.

También puedes quitar la cursiva de una variable sin perder su significado:

var {
  font-style: normal;
}

Aplica esa regla al documento anterior para comparar. Si una variable no se ve en cursiva, revisa primero el marcado y después las reglas de font-style; su apariencia puede haber cambiado aunque <var> siga presente.

Atributos y accesibilidad

<var> no tiene atributos específicos vigentes. Admite los atributos globales de HTML; en el documento, lang="es" declara el idioma en <html> y se hereda en el texto. No necesitas añadir un atributo a cada variable.

Define cada símbolo y conserva una lectura verbal de la fórmula, como en el ejemplo. Los lectores de pantalla pueden omitir la cursiva o leer una potencia de formas distintas; la explicación permite entender qué representa cada letra.

Preguntas y errores frecuentes

¿Var crea variables JavaScript? No. <var>total</var> documenta un nombre en HTML. La palabra clave var de JavaScript pertenece a otro lenguaje y declara una variable cuando se ejecuta dentro de un script; escribirla como texto en la página no la ejecuta.

¿Cómo se combina con sup o sub? Usa <sup> para el exponente de una potencia, como <var>x</var><sup>2</sup>. Usa <sub> cuando un índice forme parte de la notación, como <var>x<sub>1</sub></var> para la variable x con índice uno. Explica qué representa cada símbolo; elevar o bajar una cifra por decoración no justifica estas etiquetas.

¿Sirve para cualquier fórmula? Para expresiones sencillas puede bastar esta combinación. Si necesitas fracciones, raíces o estructuras más complejas, considera MathML. <var> sigue siendo útil para mencionar sus variables en el texto explicativo, pero no describe por sí sola la estructura matemática.

Compatibilidad y fuentes

Fuentes consultadas el 4 de octubre de 2026. MDN clasifica <var> como ampliamente disponible. La fuente y el CSS determinan su apariencia exacta.

El HTML Living Standard establece su significado, sintaxis y restricciones. La referencia de MDN complementa la explicación, la presentación habitual y la compatibilidad.