La Etiqueta VAR

Se utiliza para representar variables en contextos matemáticos, científicos o de programación. Es dar significado semántico para indicar que se trata de una variable, y no solo aplicar un estilo visual.

La etiqueta <var> en HTML se utiliza para representar variables en contextos matemáticos, científicos o de programación. Su propósito principal es dar significado semántico al texto, indicando que se trata de una variable, y no solo aplicar un estilo visual. A continuación, te explicamos cómo usarla correctamente.

¿Qué es la etiqueta `<var>`?

Propósito: Identificar variables en fórmulas matemáticas, código o expresiones técnicas.
Estilo por defecto: Los navegadores suelen mostrar el texto en cursiva, pero esto puede modificarse con CSS.
Semántica: Ayuda a motores de búsqueda, lectores de pantalla y otras herramientas a entender el contexto del contenido.

Sintaxis básica

<var>nombre_variable</var>

Ejemplo:

<p>
  La ecuación de la recta es: <var>y</var> = <var>m</var><var>x</var> + <var>b</var>.
</p>

Resultado:
La ecuación de la recta es: y = m x + b.

Casos de uso comunes

a) Fórmulas matemáticas

<p>
  El área de un círculo se calcula como: <var>A</var> = π<var>r</var><sup>2</sup>.
</p>

b) Variables en programación

<p>
  En el código, la variable <var>contador</var> almacena el número de iteraciones.
</p>

c) Expresiones científicas

<p>
  La velocidad de la luz es <var>c</var> ≈ 3×10<sup>8</sup> m/s.
</p>

Diferencias entre `<var>` y otras etiquetas

Etiqueta	Propósito
`<var>`	Representa variables matemáticas o de programación.
`<code>`	Muestra fragmentos de código.
`<kbd>`	Indica entrada del usuario (teclado).
`<samp>`	Muestra salida de un programa.

Ejemplo comparativo:

<p>
  Usa <kbd>Ctrl + S</kbd> para guardar el valor de <var>archivo</var> en el código:  
  <code>guardar(<var>archivo</var>)</code>.
</p>

Personalización con CSS

Aunque el estilo predeterminado es cursiva, puedes modificarlo con CSS:

CSS:

var {
  font-style: normal;         /* Quita la cursiva */
  color: #e74c3c;            /* Color rojo */
  font-family: "Courier New"; /* Fuente monoespaciada */
}

HTML:

<var style="color: #2ecc71; font-weight: bold;">x</var>

Resultado:

x

Accesibilidad

Lectores de pantalla: Anuncian el texto como una variable, lo que ayuda en contextos técnicos.
Uso semántico: No abuses de <var> para texto no relacionado con variables. Por ejemplo:

<!-- ❌ Incorrecto -->
<p>Este es un <var>texto en cursiva</var> sin ser una variable.</p>

Ejemplo avanzado

Fórmula matemática con `<var>` y CSS:

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    .formula {
      font-family: Arial;
      background: #f8f9fa;
      padding: 20px;
      border-radius: 5px;
    }
    var {
      color: #3498db;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div class="formula">
    <p>
      La ecuación cuadrática es: 
      <var>x</var> = [ -<var>b</var> ± √(<var>b</var><sup>2</sup> - 4<var>a</var><var>c</var>) ] / (2<var>a</var>).
    </p>
  </div>
</body>
</html>

Resultado:
La ecuación cuadrática es: x = [ -b ± √(b² - 4ac) ] / (2a).

Errores comunes

Confundir <var> con <i> o <em>:

<var> tiene un propósito semántico, no solo estilístico.

<!-- Incorrecto -->
<p>Este <var>texto</var> no es una variable.</p>

No usar en contextos no técnicos:

Evita aplicarla en textos narrativos o literarios.

Conclusión

La etiqueta <var> es esencial para:

Dar significado semántico a variables en contextos técnicos.
Mejorar la accesibilidad para usuarios con lectores de pantalla.
Integrar contenido científico o de programación de manera clara.

Recuerda:

Úsala solo para variables en fórmulas, código o expresiones técnicas.
Personaliza su estilo con CSS según el diseño de tu sitio.
Combínala con <code>, <kbd> y <samp> para contenido técnico complejo.

¡Ahora puedes integrar variables en tus documentos HTML de manera profesional y semántica!

¿Qué es la etiqueta <var>?