Etiqueta sup en HTML
¿Qué es la etiqueta <sup> en HTML?
La etiqueta <sup> en HTML5 es utilizada para representar texto en forma de superíndice. El superíndice es un texto que se coloca ligeramente más arriba que el texto normal y, por lo general, aparece en un tamaño de fuente más pequeño.
Esta etiqueta es útil para representar números y letras en notaciones científicas, matemáticas o para referencias en un texto.
Ejemplo de uso
Por ejemplo, si deseas mostrar un número elevado al cuadrado, puedes utilizar la etiqueta <sup> de la siguiente manera:
<p>2<sup>2</sup> = 4</p>
Lenguaje del código: HTML, XML (xml)Esto se mostrará como:
2² = 4
También es común usar la etiqueta <sup> para referencias a pie de página:
<p>Texto con una referencia<sup><a href="#nota1">1</a></sup>.</p>
Lenguaje del código: HTML, XML (xml)Esto se mostrará como:
Texto con una referencia¹.
Es importante tener en cuenta que la etiqueta <sup> no debe utilizarse para lograr un efecto de estilo o de diseño, sino para representar contenido semánticamente relevante. Para aplicar estilos y diseño, se recomienda utilizar hojas de estilo en cascada (CSS).
Atributos
La etiqueta <sup> en HTML5 no tiene atributos específicos, pero puede utilizar atributos globales que son aplicables a todas las etiquetas HTML.
Algunos de los atributos globales que se pueden utilizar con la etiqueta <sup> son:
- id: asigna un identificador único a la etiqueta <sup> para ser utilizado en scripts y hojas de estilo.
- class: asigna una o varias clases a la etiqueta <sup> para ser utilizadas en las hojas de estilo.
- style: permite aplicar estilos CSS directamente en la etiqueta <sup>.
- title: proporciona información adicional sobre la etiqueta <sup> cuando el usuario coloca el cursor sobre ella.
- lang: especifica el idioma del contenido dentro de la etiqueta <sup>.
- dir: indica la dirección del texto dentro de la etiqueta <sup>, que puede ser izquierda a derecha (ltr) o derecha a izquierda (rtl).
Ejemplo:
Por ejemplo, puedes usar la etiqueta <sup> con algunos atributos globales de la siguiente manera:
<p>La fórmula del área de un cuadrado es: A = s<sup id="exponente" class="matematica" title="Al cuadrado">2</sup>.</p>
Lenguaje del código: HTML, XML (xml)Recuerda que, aunque puedes usar estos atributos globales con la etiqueta <sup>, es importante no utilizarla para fines de diseño o estilos. En su lugar, es preferible utilizar hojas de estilo en cascada (CSS) para personalizar el aspecto y diseño de tus elementos HTML.
Más ejemplos
Aquí tienes tres ejemplos completos y avanzados de cómo usar la etiqueta <sup> en HTML5:
Ejemplo 1: Uso de la etiqueta <sup> en una ecuación matemática.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 1: Ecuación matemática</title>
<style>
.matematica {
color: red;
}
</style>
</head>
<body>
<p>La fórmula de la distancia en el espacio euclidiano tridimensional es:</p>
<p>D = √<span class="matematica">(x<sub>2</sub> - x<sub>1</sub>)<sup>2</sup> + (y<sub>2</sub> - y<sub>1</sub>)<sup>2</sup> + (z<sub>2</sub> - z<sub>1</sub>)<sup>2</sup></span></p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Ejemplo 2: Uso de la etiqueta <sup> en notación científica.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 2: Notación científica</title>
<style>
.cientifica {
font-weight: bold;
}
</style>
</head>
<body>
<p>La velocidad de la luz en el vacío se aproxima a:</p>
<p>c = 3.00 x 10<sup class="cientifica">8</sup> m/s</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Ejemplo 3: Uso de la etiqueta <sup> en referencias a pie de página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 3: Referencias a pie de página</title>
<style>
a {
text-decoration: none;
}
.nota {
font-size: 0.8em;
}
</style>
</head>
<body>
<p>El desarrollo de la inteligencia artificial ha generado un gran impacto en diversos campos<sup><a href="#nota1">1</a></sup>.</p>
<hr>
<p class="nota" id="nota1">1. Referencia: Autor, Título del libro, Editorial, Año de publicación.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)Estos ejemplos demuestran diferentes usos de la etiqueta <sup> en HTML5, incluyendo ecuaciones matemáticas, notación científica y referencias a pie de página. Además, se utilizan atributos globales y CSS para personalizar la apariencia y el diseño de los elementos.