Etiqueta HTML <sup>
La etiqueta <sup> se utiliza para definir texto en superíndice, el cual aparece a medio carácter por encima de la línea regular y se muestra más pequeño que el resto del texto. La etiqueta se utiliza comúnmente para definir notas al pie y fórmulas.
Debes usar la etiqueta <sup> únicamente por razones tipográficas. No debe usarse con fines de estilo. Si deseas cambiar la posición vertical del texto, puedes usar la CSS vertical-align propiedad con el valor super.
éxito
La etiqueta
<sub>se utiliza para definir el subíndice.
Estos son algunos casos de uso para un elemento <sup>:
- Representar letras superiores en ciertos idiomas o abreviaturas.
- Representar exponentes (por ejemplo, "x2.").
- Representar números ordinales (por ejemplo, "5.º" en lugar de "quinto").
Nota: Utiliza el texto en superíndice únicamente con fines tipográficos. Evita usarlo para ocultar información importante, ya que las tecnologías de asistencia pueden omitirlo o pronunciarlo incorrectamente.
Sintaxis
La etiqueta <sup> se usa en pares. El contenido se escribe entre la etiqueta de apertura (<sup>) y la de cierre (</sup>).
Ejemplo de la etiqueta HTML <sup>:
Etiqueta HTML <sup>
<!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>Resultado
Ejemplo de la etiqueta HTML <sup> utilizada con la propiedad CSS vertical-align:
Ejemplo de la etiqueta HTML <sup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
</style>
</head>
<body>
<h1>Example of the sup tag</h1>
<p>
Here is some text <sup>with the sup tag</sup>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <sup> utilizada con la etiqueta <sub>:
Ejemplo de la etiqueta HTML <sup> con la etiqueta <sub>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sup {
vertical-align: super;
font-size: medium;
}
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sup and sub tags</h1>
<p>
Here is some text
<sub>with the sub tag</sub>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,
<sup>giving information on its origins</sup>, as well as a random Lipsum generator.</p>
</body>
</html>Atributos
La etiqueta <sup> admite Atributos globales y Atributos de eventos.
Práctica
¿Cuál es el uso correcto y el propósito de la etiqueta HTML <sup>?