<sub> y <sup>

<sub> y <sup> son un par de elementos en línea que marcan subíndice y superíndice respectivamente. Tienen semántica tipográfica concreta, vinculada a convenciones establecidas en química, matemática, referencias académicas y tipografía de ordinales.

El subíndice (<sub>) va por debajo de la línea de base del texto: el número de átomos en fórmulas químicas (H₂O, CO₂), los subíndices de vectores y matrices. El superíndice (<sup>) va por encima: los exponentes matemáticos (mc²), las referencias a notas al pie (texto[1]), los ordinales (1er, 2do). Ambos se renderizan más pequeños y desplazados verticalmente por defecto.

La razón de existir de estos elementos no es decorativa: el “2” en “H₂O” no está ahí para verse bonito sino porque es la notación química que significa “dos átomos de hidrógeno”. Si usás CSS para bajar visualmente el texto sin <sub>, el árbol de accesibilidad no comunica que es un subíndice. Para casos simples como los de este bloque, <sub> y <sup> son la herramienta correcta; para notación matemática compleja con fracciones e integrales, lo es MathML.

Cómo funciona

Ambos elementos son en línea. El navegador aplica por defecto font-size reducido y vertical-align (arriba para <sup>, abajo para <sub>) para posicionar el texto correctamente. Esos estilos se pueden ajustar con CSS para afinar la posición o el tamaño.

No son equivalentes a vertical-align: super o vertical-align: sub en CSS sobre un <span> — aunque el efecto visual pueda ser similar, <sub> y <sup> comunican que la posición vertical tiene significado tipográfico, no que es solo decoración.

Modelo de contenido

Ambos aceptan contenido en línea (phrasing content). Pueden ir dentro de párrafos, headings, <li>, <td>, o cualquier elemento que acepte contenido en línea. Pueden contener otros elementos en línea si fuera necesario.

Sintaxis

<!-- Exponente matemático -->
<p>La fórmula de Einstein: E = mc<sup>2</sup></p>

<!-- Fórmula química -->
<p>El agua es H<sub>2</sub>O</p>

<!-- Nota al pie / referencia -->
<p>El estudio<sup>1</sup> concluye que...</p>

<!-- Ordinal en español -->
<p>Llegó en 1<sup>er</sup> lugar.</p>
<p>Es el 5<sup>to</sup> episodio.</p>

Atributos

Ninguno de los dos tiene atributos propios. Aceptan los atributos globales de HTML.

Accesibilidad

Los lectores de pantalla leen el contenido de <sub> y <sup> como texto normal en la mayoría de las implementaciones — no anuncian “subíndice” ni “superíndice”. Esto es relevante para fórmulas matemáticas complejas: en esos casos, considera usar MathML o un texto alternativo que exprese la fórmula completa (por ejemplo, con aria-label en el elemento contenedor).

Para notación matemática accesible en contextos educativos complejos, <sub> y <sup> son suficientes para casos simples (E = mc²), pero no para fracciones, integrales ni fórmulas multilínea.

Cuándo usar qué

Notas, gotchas e interacción

• No para decoración. Si el texto solo necesita estar más arriba o más abajo sin significado tipográfico, usá CSS (vertical-align, font-size en un <span>).
• Ordinales en español. 1<sup>er</sup>, 2<sup>do</sup>, 1<sup>ra</sup> son los usos correctos de <sup> para ordinales. También podés usar el carácter Unicode directo (ª, º) si la fuente lo soporta bien.
• Referencias de notas al pie. El número en <sup> es la convención tipográfica; el texto de la nota va más abajo en la página, normalmente en una <ol> o en elementos <p> con id para que sea posible enlazar desde el superíndice.
• MathML para fórmulas complejas. HTML5 soporta MathML inline para notación matemática avanzada. <sub> y <sup> son para casos simples; fórmulas con fracciones, raíces o símbolos especiales van en MathML o en imágenes con alt descriptivo.

Vigente / legacy

Ambos están vigentes desde las primeras versiones de HTML y no tienen formas legacy. Los caracteres Unicode de superíndice (², ³, ¹) y subíndice (₂, ₃) son válidos como texto directo, pero <sub> y <sup> son preferibles por semántica y por permitir aplicar estilos CSS.