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.