Etiqueta sub en HTML
¿Qué es la etiqueta <sub> en HTML?
La etiqueta <sub> de HTML5 se utiliza para representar texto en formato de subíndice dentro de un documento HTML. El subíndice es un texto que aparece ligeramente más abajo que el texto base y generalmente se muestra en un tamaño de fuente más pequeño.
Esta etiqueta es útil para representar notaciones científicas, químicas, matemáticas, y otras situaciones en las que se necesita texto en posición de subíndice.
Ejemplo de uso
La estructura básica de la etiqueta <sub> es la siguiente:
<p>
Texto normal <sub>texto en subíndice</sub> más texto normal.
</p>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el texto dentro de las etiquetas <sub> se mostrará como subíndice, mientras que el resto del texto se mostrará de manera normal.
Es importante tener en cuenta que el uso de la etiqueta <sub> no debe ser puramente estético. Siempre que sea posible, úsala para proporcionar un significado semántico al texto que estás mostrando como subíndice, como en el caso de fórmulas químicas, matemáticas o notación científica.
Atributos
La etiqueta <sub> de HTML5 no tiene atributos específicos, ya que su propósito principal es representar texto en formato de subíndice.
Sin embargo, como cualquier otra etiqueta de HTML, puede utilizar los atributos globales y los atributos específicos para eventos que son aplicables a todas las etiquetas HTML.
Algunos atributos globales comunes incluyen:
- id: Permite asignar un identificador único a la etiqueta
<sub>para su uso en CSS o JavaScript.
- class: Permite asignar una o varias clases CSS para aplicar estilos específicos a la etiqueta
<sub>.
- style: Permite aplicar estilos en línea a la etiqueta
<sub>.
- title: Proporciona información adicional sobre la etiqueta
<sub>que se muestra como un tooltip al pasar el cursor sobre el elemento.
- data-*: Permite agregar atributos personalizados para almacenar información adicional que puede ser utilizada por JavaScript.
Además, también se pueden aplicar atributos relacionados con eventos, como onclick, onmouseover, onmouseout, etc., para manejar interacciones del usuario con la etiqueta <sub> utilizando JavaScript.
Ejemplo:
Por ejemplo, podrías tener algo así:
<p>
Texto normal <sub id="subindice" class="estilo-subindice" title="Texto en subíndice">texto en subíndice</sub> más texto normal.
</p>
Lenguaje del código: HTML, XML (xml)En este caso, se aplican los atributos id, class y title a la etiqueta <sub>. Sin embargo, no hay atributos específicos para la etiqueta <sub> en sí misma.
Más ejemplos
Aquí tienes dos ejemplos completos y avanzados de la etiqueta <sub> de HTML5:
Ejemplo 1: Fórmula química con estilo CSS y tooltip
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 1: Fórmula química</title>
<style>
.elemento {
color: darkblue;
font-weight: bold;
}
.subindice {
color: red;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Fórmula química del agua</h1>
<p>
La fórmula química del agua es: <span class="elemento">H</span><sub class="subindice" title="Cantidad de átomos de hidrógeno">2</sub><span class="elemento">O</span>.
</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se muestra la fórmula química del agua con estilos CSS para resaltar los elementos químicos y los subíndices. Además, se agrega un tooltip al subíndice para explicar la información que representa.
Ejemplo 2: Ecuación matemática con interacción JavaScript
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 2: Ecuación matemática</title>
<style>
.base {
font-weight: bold;
}
.subindice {
font-weight: normal;
cursor: pointer;
}
</style>
<script>
function mostrarAlerta() {
alert('Este es un subíndice en una ecuación matemática.');
}
</script>
</head>
<body>
<h1>Ecuación matemática</h1>
<p>
Un ejemplo de ecuación matemática con exponentes y subíndices es: <span class="base">x</span><sub class="subindice" onclick="mostrarAlerta()">i</sub> = <span class="base">a</span><sub class="subindice" onclick="mostrarAlerta()">i</sub> + <span class="base">b</span><sub class="subindice" onclick="mostrarAlerta()">i</sub>.
</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se muestra una ecuación matemática utilizando la etiqueta <sub> para representar subíndices. Además, se agregó una interacción JavaScript a los subíndices, de manera que al hacer clic en ellos, se muestra una alerta con una descripción.