HTML <sub> Tag
La etiqueta <sub> define texto en subíndice que aparece medio carácter por debajo de la línea y se muestra en una fuente más pequeña. Ejemplos y sintaxis.
La etiqueta HTML <sub> marca texto en subíndice — caracteres que se sitúan medio renglón por debajo de la línea base y se renderizan ligeramente más pequeños. Es un elemento en línea y semántico: le indica al navegador (y a las tecnologías de asistencia) que el texto incluido es un subíndice, no simplemente que debe verse más bajo.
Usa <sub> solo cuando la posición descendida tenga significado tipográfico. No es una herramienta de uso general para "hacer esto más pequeño y más bajo" — si solo quieres el efecto visual sin el significado, utiliza CSS (explicado más adelante).
Cuándo usar <sub>
El subíndice tiene sentido en varios contextos:
- Fórmulas químicas — el número de átomos: H2O, CO2, C2H5OH.
- Índices y subíndices matemáticos — términos de secuencias e índices de variables: x1, x2, …, an.
- Bases de logaritmos — log2(n), log10(x).
- Marcadores de notas al pie / referencias que, por convención, se tipografían en posición baja en lugar de alta.
En cada caso, el subíndice cambia el significado del texto circundante: CO2 y CO<sub>2</sub> se leen de forma diferente. Esa diferencia semántica es exactamente lo que <sub> existe para expresar — y por eso el estilo CSS por sí solo no es un sustituto.
Para definir texto en superíndice (elevado por encima de la línea base, p. ej. exponentes como x2 u ordinales como 1st), usa la etiqueta <sup>.
<sub> vs <sup>
Ambos son elementos tipográficos semánticos; solo difieren en la dirección y en las convenciones que determinan cuándo es correcto usar cada uno.
<sub> (subíndice) | <sup> (superíndice) | |
|---|---|---|
| Posición | Por debajo de la línea base | Por encima de la línea base |
| Usos típicos | Número de átomos (H2O), índices matemáticos (xn), bases de logaritmos | Exponentes (x2), ordinales (2nd), marcadores de notas al pie |
| Lectura | "x sub n" | "x elevado a la n", "2.º" |
Elige el elemento que coincida con la convención establecida para la notación, no el que "se vea bien" — un número de átomos en química siempre es un subíndice, un exponente siempre es un superíndice.
Sintaxis
La etiqueta <sub> se usa en pares. El contenido del subíndice se escribe entre las etiquetas de apertura <sub> y cierre </sub>.
<p>Formula of water — H<sub>2</sub>O</p>Ejemplos
Fórmulas químicas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>OH</p>
</body>
</html><sub> junto con <sup>
El subíndice y el superíndice suelen aparecer en el mismo documento — uno para números de átomos en química, el otro para exponentes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Si solo quieres el efecto visual, usa CSS
Si un texto necesita parecer un subíndice pero no lo es semánticamente, no abuses de <sub>. En su lugar, aplica CSS vertical-align con el valor sub (más un font-size menor) al elemento apropiado. El ejemplo a continuación cambia el estilo de texto ordinario puramente por presentación — nótese que no se usa ningún elemento <sub>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.lowered {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Lowered text without the sub tag</h1>
<p>
Here is some <span class="lowered">visually lowered</span> text.
</p>
</body>
</html>Accesibilidad
Los lectores de pantalla no anuncian el subíndice de forma consistente — algunos leen H<sub>2</sub>O como "H dos O" sin indicar que el 2 está en posición baja, otros hacen una pausa o cambian el tono, y muchos ignoran la distinción por completo. Como la posición puede transmitir un significado que se pierde en el habla, es preferible ofrecer una fuente clara e inequívoca para notaciones importantes:
- Para fórmulas y ecuaciones complejas, considera proporcionar una alternativa en texto plano o apta para la lectura en voz alta (por ejemplo, escribe "log en base 2 de n" en el texto adyacente, o usa MathML para marcado matemático real).
- No dependas de
<sub>por sí solo para transmitir algo que el lector debe entender — asegúrate de que la frase circundante siga siendo correcta cuando el subíndice se anuncie de forma plana.
Atributos
La etiqueta <sub> admite los atributos globales y los atributos de eventos. No tiene atributos propios.
Estilizar <sub>
Los navegadores aplican a <sub> un tamaño de fuente más pequeño y una posición descendida por defecto. Puedes ajustar su apariencia con CSS manteniendo intacto el significado del elemento:
sub {
color: #555;
font-size: 0.8em;
}Nota: esto anula el estilo predeterminado del navegador para <sub> solo a efectos de demostración — el significado de subíndice no cambia.