acerca de HTML

Referencia de etiquetas

Etiqueta sup en HTML: exponentes y superíndices

La etiqueta <sup> representa un superíndice cuando su posición tiene significado, como un exponente o una llamada a una nota. Úsala para distinguir el 2 de metros cuadrados de un número escrito en la misma línea, o para señalar una aclaración enlazada. El navegador suele mostrar su contenido más pequeño y elevado respecto al texto que lo rodea.

Ejemplo mínimo: metros cuadrados en HTML

<p>El área es 12 m<sup>2</sup>.</p>

Verás «El área es 12 m².». El 2 forma parte de la unidad metros cuadrados: la frase se lee «el área es doce metros cuadrados». Solo el número queda dentro de <sup>; la m conserva su posición normal. Prueba el fragmento dentro del <body> de un documento HTML, como el archivo completo del caso práctico.

No confundas m² con m³: la primera unidad mide superficie y la segunda, volumen. La posición y el valor del exponente forman parte de la notación.

Sintaxis y contexto válido

Escribe <sup>contenido</sup>, con apertura y cierre. Ninguna de las dos etiquetas puede omitirse; <sup /> no cierra este elemento en HTML.

<sup> admite contenido de frase y puede utilizarse donde se acepta ese contenido, por ejemplo dentro de un párrafo, un encabezado o una expresión con <var>. Puede contener texto o un enlace <a>, pero no debe envolver párrafos, listas ni <div>. Estas condiciones figuran en el modelo de contenido del estándar.

Encierra solo la parte elevada: x<sup>2</sup> expresa x al cuadrado; <sup>x2</sup> eleva toda la expresión y no distingue la base del exponente. Para mover unas letras por diseño, utiliza CSS sobre un contenedor adecuado, sin atribuirles significado de superíndice.

Caso práctico: una potencia y una nota al pie

Guarda este código como potencia-sup.html y ábrelo en el navegador. Incluye todo lo necesario: no requiere servidor, archivos adicionales ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>El cuadrado de un número</title>
    <style>
      body {
        margin: 1rem;
        max-width: 38rem;
        font-family: sans-serif;
        line-height: 1.6;
        color: #1f2937;
        background: white;
        overflow-wrap: break-word;
      }
      a {
        color: #0645ad;
        text-decoration: underline;
      }
      sup a {
        display: inline-block;
        font-size: 1rem;
        padding: 0.2em;
      }
      a:focus-visible, li:focus {
        outline: 3px solid #0645ad;
        outline-offset: 3px;
      }
    </style>
  </head>
  <body>
    <h1>El cuadrado de un número</h1>
    <p>
      La expresión <var>x</var><sup>2</sup> se lee «x al cuadrado»:
      multiplicamos x por sí mismo.
      <sup><a id="llamada-nota-1" href="#nota-1">Nota 1</a></sup>
    </p>
    <p>Si x vale 3, su cuadrado es 3 × 3 = 9.</p>
    <h2>Notas</h2>
    <ol>
      <li id="nota-1" tabindex="-1">
        El 2 es el exponente; x es la base de la potencia.
        <a href="#llamada-nota-1">Volver a la llamada de la nota 1</a>.
      </li>
    </ol>
  </body>
</html>

Verás x en la cursiva habitual de <var> y un 2 elevado a su derecha. <var> identifica la variable y <sup>, el exponente. La frase siguiente explica cómo se obtiene el resultado.

La llamada «Nota 1» también aparece elevada. El enlace con href="#nota-1" lleva a la explicación situada debajo; el enlace de regreso apunta al id de la llamada. Usamos el nombre «Nota 1» y un tamaño de texto normal para que resulte fácil leerlo y pulsarlo.

Para comprobarlo paso a paso:

  1. Pulsa Tab hasta «Nota 1» y Enter para ir a la nota. El destino acepta foco mediante tabindex="-1", sin añadir una parada al recorrido normal con Tab. Pulsa Tab para llegar al enlace de regreso y Enter para volver a la llamada.
  2. Amplía el zoom al 200 % y repite el recorrido. Comprueba que el texto del enlace se lee, el contorno de foco se distingue y puedes activarlo; repite en una ventana estrecha.
  3. Retira solo las etiquetas del exponente: queda x2 en línea, mientras la explicación verbal permanece. Retira el <sup> de la llamada: el enlace sigue funcionando, con posición normal.
  4. Quita el bloque <style> y compara el tamaño de la llamada y la indicación de foco con los estilos del navegador.

Atributos y accesibilidad

<sup> no tiene atributos específicos vigentes; admite los atributos globales de HTML. En el ejemplo, lang="es" indica el idioma del documento, id identifica los destinos y tabindex permite enfocar la nota. Se aplican a sus elementos correspondientes; <sup> no necesita atributos para elevar el texto. href pertenece a <a> y define el destino del enlace.

El mapeo de accesibilidad de HTML contempla el superíndice, pero no garantiza una pronunciación idéntica entre lectores de pantalla. Conserva una lectura verbal de la potencia y nombres claros para las notas. No añadas un rol ARIA redundante ni reduzcas tanto un enlace que sea difícil leerlo o activarlo.

Errores frecuentes y preguntas

¿Cómo muestro el resultado de una potencia? Escribe el cálculo junto a la fórmula, como en el ejemplo. <sup> representa el exponente; una calculadora que permita cambiar valores necesitaría además programar la operación.

¿Sup crea una nota al pie? No. Debes escribir la nota, asignarle un destino y enlazarla con <a>. Si la llamada no navega, comprueba primero que contiene un enlace, después que su href coincide con un id único en el documento. Un número elevado sin enlace no permite saltar a la nota.

¿Por qué el exponente no aparece arriba? Comprueba el marcado y después los estilos. Una regla como sup { vertical-align: baseline; font-size: inherit; } elimina la apariencia habitual, aunque el elemento conserva su significado. Desactiva esa regla para comparar.

¿Cuándo elegir sub, var o CSS? <sub> identifica un subíndice, como el 2 de H₂O; <var> identifica una variable y puede acompañar a <sup> para expresar una potencia. Para elevar texto decorativo, usa <span> con CSS, por ejemplo vertical-align: super. La propiedad cambia la presentación sin aportar el significado del elemento.

Para fórmulas con fracciones, raíces o índices simultáneos, considera MathML, que describe estructuras matemáticas. Elevar caracteres con <sup> no reemplaza esa estructura ni una explicación comprensible.

Compatibilidad y fuentes

Fuentes consultadas el 4 de octubre de 2026. MDN clasifica <sup> como ampliamente disponible. Los ejemplos utilizan HTML y enlaces nativos; su aspecto exacto depende de la fuente y del CSS.

El HTML Living Standard define el significado, el contexto y las restricciones. La referencia de MDN complementa los usos y la compatibilidad.