Docs ejecutables de HTML: Superíndice

Q: ¿Cómo escribo un superíndice en HTML?

Envuelve el texto elevado en : x 2 muestra x al cuadrado, 1 st un ordinal. El navegador lo dibuja más pequeño y por encima de la línea base.

Q: ¿Cómo escribo un subíndice en HTML?

Usa : H 2 O para el agua, x 1 para un índice. Se dibuja más pequeño y por debajo de la línea base.

Q: ¿Cómo escribo x al cuadrado en HTML?

Con x 2 o con el carácter ya hecho x², que también puedes escribir como la entidad ². El carácter sirve para cuadrados y cubos; funciona para cualquier exponente, como 2 n+1 .

Q: ¿Puedo usar CSS en lugar de ?

vertical-align: super con un font-size más pequeño se ve igual, pero y tienen significado: "m2" y "m 2 " son valores distintos. Usa las etiquetas cuando la posición elevada o rebajada forma parte del contenido.

Superíndice y subíndice en HTML: etiquetas sup y sub

Escribe texto en superíndice con y en subíndice con : exponentes, ordinales, llamadas a notas al pie y fórmulas químicas. Aprende los usos habituales, cómo evitar que separen las líneas y cuándo encaja mejor un carácter Unicode o MathML.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Cómo escribir un superíndice en HTML

Envuelve el texto elevado en . El navegador lo muestra más pequeño y por encima de la línea. Su pareja  muestra el texto más pequeño y rebajado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 y  son elementos en línea y pueden contener otros elementos en línea, así que 2n+1 o xi también funcionan.

Usos habituales

Quieres	Escribe	Resultado
Un exponente	`10<sup>3</sup>`	10 elevado a 3
Un ordinal	`2<sup>nd</sup>`	2nd con las letras elevadas
Una llamada a nota al pie	`text<sup><a href="#n1">1</a></sup>`	Un 1 elevado y clicable
Una fórmula química	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glucosa
Un índice o una base	`x<sub>1</sub>`, `log<sub>2</sub>`	1 y 2 rebajados
Una marca comercial	`Brand<sup>TM</sup>` o `Brand™`	TM elevado

Usa las etiquetas cuando la posición forma parte del significado: m2 y m2 son cosas distintas. Para texto que solo tiene un estilo pequeño (una etiqueta, una insignia), usa CSS.

Notas al pie con sup

Una llamada a nota al pie es un enlace en superíndice a una nota al final. Dale a cada nota un id y apunta el enlace hacia él:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Haz clic en un número para saltar a su nota, y en "Back" para volver. Quitar el subrayado del enlace pequeño deja el párrafo limpio, y el color del enlace sigue indicando que es clicable.

Mantener el interlineado uniforme

Por defecto, un  o un  puede hacer que su línea sea más alta que las de alrededor, así que un párrafo con algunos exponentes se ve con un espaciado irregular. Poner line-height: 0 en ellos lo arregla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

La caja gris es más alta porque las líneas dos y cuatro se separaron. En la caja verde todas las líneas tienen la misma altura. Añade esa regla una vez a tu hoja de estilos base y olvídate.

Caracteres Unicode y MathML

Para algunos casos comunes hay caracteres ya hechos: ² (²), ³ (³), ¹ (¹), ™ (™) y ½ (½). No necesitan etiqueta ni afectan al interlineado, pero solo existen para algunos dígitos y letras.

Para fórmulas de verdad (fracciones, raíces, exponentes de exponentes), usa MathML, que los navegadores actuales muestran de forma nativa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> recibe una base y un exponente; <msub> hace lo mismo con los subíndices. Para un único exponente dentro de una frase,  es más sencillo.

Errores comunes

Usar  para hacer texto pequeño. También eleva el texto y les dice a los lectores que es un superíndice. Usa font-size para texto pequeño.
Interlineado irregular. Añade sup, sub { line-height: 0; }.
Escribir x^2 o H2O en el texto final. Usa x2 y H2O para que el contenido se lea bien.
Llamadas a notas al pie demasiado pequeñas para tocarlas. En los teléfonos, un solo dígito elevado es un objetivo diminuto. Añade algo de padding a sup a, o pon las notas cerca del texto.

Preguntas frecuentes

¿Cómo escribo un superíndice en HTML?

Envuelve el texto elevado en : x2 muestra x al cuadrado, 1st un ordinal. El navegador lo dibuja más pequeño y por encima de la línea base.

¿Cómo escribo un subíndice en HTML?

Usa : H2O para el agua, x1 para un índice. Se dibuja más pequeño y por debajo de la línea base.

¿Cómo escribo x al cuadrado en HTML?

Con x2 o con el carácter ya hecho x², que también puedes escribir como la entidad ². El carácter sirve para cuadrados y cubos;  funciona para cualquier exponente, como 2n+1.

¿Por qué deja el interlineado irregular?

El texto elevado puede hacer que su línea sea más alta que las demás del párrafo. Se arregla con sup, sub { line-height: 0; }, que evita que añadan altura a la línea.

¿Puedo usar CSS en lugar de ?

vertical-align: super con un font-size más pequeño se ve igual, pero  y  tienen significado: "m2" y "m2" son valores distintos. Usa las etiquetas cuando la posición elevada o rebajada forma parte del contenido.

Conceptos relacionados