La Etiqueta SUP

Se utiliza para representar texto en superíndice, es decir, texto que aparece más pequeño y ligeramente elevado respecto a la línea base del texto normal.

La etiqueta <sup> en HTML se utiliza para representar texto en superíndice, es decir, texto que aparece más pequeño y ligeramente elevado respecto a la línea base del texto normal. Es común en fórmulas matemáticas, referencias bibliográficas, marcas registradas y notaciones científicas. Aquí te explicamos cómo implementarla correctamente.

Sintaxis básica

La estructura básica es:

<sup>Texto en superíndice aquí</sup>

Ejemplo:

<p>
   El teorema de Pitágoras: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>

Resultado:

El teorema de Pitágoras: a2 + b2 = c2.

Casos de uso comunes

a) Exponentes matemáticos

<p>
   La ecuación es: 3x<sup>3</sup> + 2x<sup>2</sup> = 0.
</p>

b) Marcas comerciales

<p>
   Coca-Cola<sup>®</sup> es una marca registrada.
</p>

c) Notas al pie o referencias

<p>
   Este texto tiene una referencia bibliográfica<sup>1</sup>.
</p>

d) Fechas ordinales

<p>
   Mi cumpleaños es el 15<sup>mo</sup> de agosto.
</p>

Diferencias entre <sup> y <sub>

Etiqueta Propósito
<sup> Texto en superíndice (por encima de la línea base).
<sub> Texto en subíndice (por debajo de la línea base).

Ejemplo comparativo:

<p>
   Fórmula química: H<sub>2</sub>O.  
   Ecuación: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>.
</p>

Resultado:

Fórmula química: H2O.
Ecuación: x2 + y2 = z2.

Personalización con CSS

Aunque <sup> tiene un estilo predeterminado, puedes modificarlo:

sup {
  font-size: 0.75em;      /* Tamaño del texto */
  color: #e74c3c;         /* Color personalizado */
  vertical-align: super;  /* Mantiene la alineación de superíndice */
  margin-left: 2px;       /* Espaciado opcional */
}

Ejemplo con estilos en línea:

<p>
   Texto con un <sup style="color: #3498db; font-weight: bold;">superíndice azul</sup>.
</p>

Resultado:

Texto con un superíndice azul.

Accesibilidad

Semántica: Los lectores de pantalla interpretan <sup> como texto elevado, lo que ayuda en contextos como fórmulas o referencias.

No abuses: Evita usarlo para estilizar texto sin significado semántico.

Alternativas para símbolos: En lugar de <sup>™</sup>, usa entidades HTML como &trade; (™):

<p>Python<sup>&trade;</sup></p>

Buenas prácticas

  1. Usa <sup> solo cuando sea necesario: Por ejemplo, exponentes, marcas registradas o notas.

  2. Prioriza entidades HTML para símbolos:

    • &reg; (®), &trade; (™), &copy; (©).

  3. Combínalo con CSS para claridad: Asegúrate de que el texto siga siendo legible.

Errores comunes

Uso incorrecto para estilos:

<p>Texto <sup>con estilo elevado</sup> sin razón semántica.</p>

Anidación innecesaria:

<sup><sup>Texto redundante</sup></sup>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    sup {
      color: #2ecc71;
      font-size: 0.8em;
      font-weight: bold;
    }
    .referencia {
      font-style: italic;
      color: #7f8c8d;
    }
  </style>
</head>
<body>
  <h2>Ejemplos de uso de &lt;sup&gt;</h2>

  <h3>Matemáticas</h3>
  <p>Ecuación: e = mc<sup>2</sup>.</p>

  <h3>Marcas comerciales</h3>
  <p>Windows<sup>&reg;</sup> es un sistema operativo de Microsoft.</p>

  <h3>Referencias</h3>
  <p>
    El cambio climático es un tema crítico<sup>1</sup>.
    <span class="referencia"><sup>1</sup> Informe IPCC, 2023.</span>
  </p>
</body>
</html>

Conclusión

La etiqueta <sup> es esencial para:

  • Representar exponentes matemáticos, marcas registradas y notas al pie.

  • Mejorar la legibilidad y semántica en contextos técnicos o académicos.

  • Mantener estándares de accesibilidad y SEO.

Recuerda:

  • Usa <sup> solo cuando el superíndice aporte significado.

  • Combínala con CSS para ajustar su apariencia.

  • Prioriza entidades HTML para símbolos especiales (®, ©, ™).

¡Ahora puedes aplicar <sup> correctamente en tus proyectos para contenido científico, técnico o comercial!