Cómo escribir un superíndice en HTML
Envuelve el texto elevado en <sup>. El navegador lo muestra más pequeño y por encima de la línea. Su pareja <sub> muestra el texto más pequeño y rebajado:
<sup> y <sub> son elementos en línea y pueden contener otros elementos en línea, así que 2<sup>n+1</sup> o x<sub><i>i</i></sub> 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: m<sup>2</sup> 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:
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 <sup> o un <sub> 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:
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. Un generador de texto diminuto muestra todas las letras en superíndice que tiene Unicode.
Para fórmulas de verdad (fracciones, raíces, exponentes de exponentes), usa MathML, que los navegadores actuales muestran de forma nativa:
<msup> recibe una base y un exponente; <msub> hace lo mismo con los subíndices. Para un único exponente dentro de una frase, <sup> es más sencillo.
Errores comunes
- Usar
<sup>para hacer texto pequeño. También eleva el texto y les dice a los lectores que es un superíndice. Usafont-sizepara texto pequeño. - Interlineado irregular. Añade
sup, sub { line-height: 0; }. - Escribir
x^2oH2Oen el texto final. Usax<sup>2</sup>yH<sub>2</sub>Opara 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 <sup>: x<sup>2</sup> muestra x al cuadrado, 1<sup>st</sup> 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 <sub>: H<sub>2</sub>O para el agua, x<sub>1</sub> 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 x<sup>2</sup> o con el carácter ya hecho x², que también puedes escribir como la entidad ². El carácter sirve para cuadrados y cubos; <sup> funciona para cualquier exponente, como 2<sup>n+1</sup>.
¿Por qué <sup> 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 <sup>?
vertical-align: super con un font-size más pequeño se ve igual, pero <sup> y <sub> tienen significado: "m2" y "m<sup>2</sup>" son valores distintos. Usa las etiquetas cuando la posición elevada o rebajada forma parte del contenido.
