HTML <sup> tag
Usa la etiqueta <sup> para definir texto en superíndice, que aparece medio carácter por encima de la línea normal y se muestra más pequeño.
La etiqueta HTML <sup> define texto en superíndice — contenido que se muestra elevado medio carácter por encima de la línea base normal y en una fuente más pequeña. Es un elemento en línea y semántico: le indica al navegador y a las tecnologías de asistencia que el texto elevado tiene un significado tipográfico real, no simplemente un ajuste visual.
Usa <sup> solo cuando el superíndice sea tipográfica o semánticamente necesario, como en exponentes, sufijos ordinales, marcadores de notas al pie y letras superiores en abreviaturas. No está pensado para elevar texto de forma arbitraria con fines puramente visuales. Si solo deseas levantar texto visualmente por presentación, usa la propiedad CSS vertical-align con el valor super en lugar de <sup>.
La etiqueta <sub> es la contraparte de <sup>: define texto en subíndice, que se muestra por debajo de la línea base (se usa para fórmulas químicas, índices y similares).
Cuándo usar <sup>
Utiliza el elemento <sup> cuando el superíndice tenga un significado real:
- Exponentes y potencias matemáticas —
E = mc<sup>2</sup>. - Números ordinales — el
st,nd,rd,then1<sup>st</sup>,2<sup>nd</sup>,5<sup>th</sup>. - Marcadores de notas al pie y referencias — un pequeño
[1]que enlaza a una nota. - Letras superiores en abreviaturas — comunes en francés, p. ej.
M<sup>lle</sup>(Mademoiselle) o1<sup>er</sup>.
Dado que el significado reside en el marcado, los lectores de pantalla y los motores de búsqueda pueden interpretar el texto elevado correctamente — algo que un <span> con estilos CSS puros no puede transmitir.
Sintaxis
La etiqueta <sup> va en pares. El contenido se escribe entre las etiquetas de apertura (<sup>) y cierre (</sup>).
Ejemplo: exponente en una fórmula
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
E = mc<sup>2</sup>, where E is the energy of the object, m is the weight, c is the light speed in vacuum.
</p>
</body>
</html>En la salida anterior, el 2 se muestra más pequeño y elevado, de modo que la expresión se lee como "m c al cuadrado".
Ejemplo: números ordinales
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>She finished 1<sup>st</sup>, ahead of the 2<sup>nd</sup> and 3<sup>rd</sup> place runners.</p>
</body>
</html>Ejemplo: marcador de nota al pie / referencia
Un patrón común es envolver un pequeño marcador enlazado en <sup> para que los lectores puedan saltar a una nota al final de la página:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The first web browser was created in 1990<sup><a href="#fn1">[1]</a></sup>.
</p>
<hr />
<p id="fn1">[1] Tim Berners-Lee, WorldWideWeb, CERN.</p>
</body>
</html>Ejemplo: letras superiores en abreviaturas
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>M<sup>lle</sup> Dupont est arrivée 1<sup>re</sup>.</p>
</body>
</html>Alternativa presentacional con CSS
Los ejemplos a continuación muestran el enfoque presentacional. Si el texto elevado es puramente decorativo y no tiene ningún significado semántico, prefiere CSS en lugar del elemento <sup> para no confundir a las tecnologías de asistencia. El CSS siguiente también muestra cómo ajustar el tamaño del contenido genuino de <sup> (por defecto los navegadores lo reducen; puedes sobreescribir eso).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.raised {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Decorative raised text via CSS</h1>
<p>
Here is some text <span class="raised">lifted with CSS</span>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</body>
</html>Ejemplo: <sup> junto con <sub>
<sup> y <sub> se usan frecuentemente en combinación — por ejemplo en matemáticas, donde puede necesitarse tanto una potencia como un índice:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The term a<sub>n</sub> can be written as a<sub>1</sub><sup>2</sup>.</p>
<p>Water is H<sub>2</sub>O, and the area of a square is s<sup>2</sup>.</p>
</body>
</html>Usa el superíndice solo cuando tenga un significado tipográfico genuino. No abuses de <sup> para ocultar o reducir contenido importante — algunas tecnologías de asistencia omiten, pronuncian mal o leen el superíndice fuera de contexto, lo que puede dificultar la comprensión del texto para usuarios de lectores de pantalla.
Atributos
La etiqueta <sup> admite atributos globales y los atributos de evento.
Véase también
<sub>— la contraparte en subíndice de<sup>.- CSS
vertical-align— la forma presentacional de elevar o bajar texto en línea.