Etiqueta sub en HTML: subíndices con significado
La etiqueta <sub> representa un subíndice cuando esa posición forma parte del significado, como el número de una fórmula química. Úsala para escribir H₂O o distinguir una variable de una serie, no para bajar unas letras por diseño. El navegador suele mostrar su contenido más pequeño y por debajo de la línea del texto.
Ejemplo mínimo: cómo escribir H2O en HTML
<p>La fórmula del agua es H<sub>2</sub>O.</p>Verás «La fórmula del agua es H₂O.»: solo el 2 aparece como subíndice. La H y la O quedan fuera de <sub> y conservan su posición normal. Puedes probar este fragmento dentro del <body> de un documento HTML; el caso práctico incluye un archivo completo.
El 2 indica dos átomos de hidrógeno por molécula de agua; la O sin número representa un átomo de oxígeno. Acompañar la fórmula con su nombre y esta explicación ayuda a comprenderla sin depender únicamente de la posición del número. Este uso está descrito en las fórmulas químicas de MDN.
Si retiras <sub> y </sub> conservando el 2, queda H2O en la misma línea. El texto sigue presente, pero desaparece el marcado de subíndice. No sustituyas la etiqueta por <sup>: colocar el 2 arriba cambia la notación que estás enseñando.
Sintaxis y contexto válido
Escribe <sub>contenido</sub>, con apertura y cierre: ninguna de las dos etiquetas puede omitirse. <sub /> no cierra este elemento en HTML.
<sub> admite contenido de frase y se utiliza donde se acepta ese contenido, por ejemplo dentro de un <p>, un encabezado o <var>. Puede contener texto y otros elementos de frase; no debe envolver párrafos, listas ni <div>. El modelo de contenido del estándar fija estas reglas.
Encierra únicamente la parte que sea subíndice. En H<sub>2</sub>O, escribir <sub>H2O</sub> bajaría toda la fórmula y dejaría de expresar la relación entre el número y la H.
Caso práctico: fórmulas y una variable indexada
Guarda este código como formulas-sub.html y ábrelo en el navegador. Es un documento completo: no necesita archivos adicionales, servidor ni JavaScript.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fórmulas y mediciones</title>
<style>
body {
margin: 1rem;
max-width: 38rem;
font-family: sans-serif;
line-height: 1.6;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<h1>Fórmulas y mediciones</h1>
<h2>Dos moléculas conocidas</h2>
<ul>
<li>
Agua: H<sub>2</sub>O. Cada molécula contiene dos átomos
de hidrógeno y uno de oxígeno.
</li>
<li>
Dióxido de carbono: CO<sub>2</sub>. Cada molécula contiene
un átomo de carbono y dos de oxígeno.
</li>
</ul>
<h2>Una serie de mediciones</h2>
<p>
<var>x<sub>1</sub></var>, que leemos «x subíndice uno»,
representa la primera medición de la serie.
</p>
</body>
</html>Verás dos fórmulas, H₂O y CO₂, con los números bajos y sus nombres escritos. En la última frase, <var> identifica la variable completa y <sub> identifica su índice. El 1 permite distinguir la primera medición de otras de la serie; no expresa una potencia ni una multiplicación.
Para revisar el ejemplo paso a paso:
- Amplía el texto o el zoom del navegador al 200 %. Comprueba que los índices se distinguen y que puedes leer las explicaciones sin recortes; repite la revisión en una ventana estrecha.
- Retira únicamente las etiquetas de un subíndice. Su número permanece, pero pierde la posición y el significado marcado.
- Retira
<var>y</var>conservando su contenido. El subíndice sigue ahí, pero la expresión deja de identificarse como variable; normalmente también pierde la cursiva predeterminada. - Quita el bloque
<style>para comparar la tipografía y el espacio entre líneas con los del navegador.
Sub frente a sup y CSS
<sub> señala un subíndice; <sup> señala un superíndice. Por ejemplo, el 2 de H₂O cuenta átomos, mientras que el 2 de una potencia como x² es un exponente. La elección depende de la notación, no de qué posición resulte más atractiva.
Para un desplazamiento decorativo, como unas letras de un logotipo, utiliza <span> con CSS. La propiedad vertical-align permite ajustar la posición de una caja en línea; un valor como -0.2em la baja. Aplicar esa propiedad a <span> no le aporta el significado de <sub>.
Una fórmula con fracciones, raíces o índices que deban quedar alineados arriba y abajo necesita una solución adicional. MathML permite describir estructuras matemáticas; encadenar o anidar <sub> y <sup> no ofrece por sí solo esa composición.
Atributos y accesibilidad
<sub> no tiene atributos específicos vigentes. Admite los atributos globales de HTML, aunque los ejemplos no necesitan ninguno en el propio subíndice. El lang="es" del documento indica el idioma y se hereda en su contenido.
La posición visual no garantiza que un lector de pantalla pronuncie «subíndice». El mapeo de accesibilidad de HTML identifica su función, pero el anuncio concreto depende del navegador y de la herramienta de lectura. Mantén el nombre de la sustancia y la explicación verbal del índice como en el caso práctico.
Errores frecuentes y preguntas
¿Sub sirve para bajar cualquier texto? Úsala cuando el subíndice tenga significado tipográfico. Para ajustar la alineación o dibujar un nombre de marca, emplea CSS sobre un contenedor apropiado.
¿Cómo escribo H2O? Escribe H<sub>2</sub>O: la H, el 2 dentro de <sub> y la O después del cierre. Añade «agua» y explica lo que cuenta el 2 cuando el contexto lo necesite.
¿Por qué el número no aparece abajo? Revisa primero que el HTML contiene <sub>2</sub>. Después inspecciona los estilos: una regla como sub { vertical-align: baseline; font-size: inherit; } elimina la apariencia habitual, aunque conserva el significado del elemento. Desactiva esa regla para comparar.
Compatibilidad y fuentes
Comprobación de fuentes: 4 de octubre de 2026. MDN clasifica <sub> como ampliamente disponible. El tamaño y el desplazamiento exactos pueden variar con los estilos y la fuente utilizados.
El HTML Living Standard define su significado y sus restricciones. La referencia de MDN complementa los usos y la compatibilidad. Para agrupar un fragmento decorativo, consulta la guía de <span>.