La Etiqueta SUB

Se utiliza para representar texto en subíndice, es decir, texto que aparece más pequeño y ligeramente por debajo de la línea base del texto normal.

La etiqueta <sub> en HTML se utiliza para representar texto en subíndice, es decir, texto que aparece más pequeño y ligeramente por debajo de la línea base del texto normal. Es común en fórmulas químicas, ecuaciones matemáticas, notaciones científicas y referencias. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<sub>Texto en subíndice aquí</sub>

Ejemplo:

<p>
   La fórmula del agua es H<sub>2</sub>O.
</p>

Resultado:

La fórmula del agua es H2O.

Casos de uso comunes

a) Fórmulas químicas

<p>
   Dióxido de carbono: CO<sub>2</sub>.
</p>

Resultado:

Dióxido de carbono: CO2.

b) Ecuaciones matemáticas

<p>
   La ecuación cuadrática: x<sub>1</sub> y x<sub>2</sub>.
</p>

c) Notaciones científicas

<p>
   La velocidad de la luz es 3×10<sub>8</sub> m/s.
</p>

d) Notas al pie o referencias

<p>
   Este es un texto con una nota<sub>1</sub> al pie.
</p>

Diferencias entre <sub> y <sup>

Etiqueta Propósito
<sub> Texto en subíndice (por debajo de la línea base).
<sup> Texto en superíndice (por encima de la línea base).

Ejemplo comparativo:

<p>
   Fórmula química: H<sub>2</sub>O.  
   Teorema de Pitágoras: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>

Resultado:

Fórmula química: H2O.
Teorema de Pitágoras: a2 + b2 = c2.

Personalización con CSS

Aunque <sub> tiene un estilo predeterminado, puedes modificarlo:

CSS:

sub {
  font-size: 0.8em;     /* Tamaño del texto */
  color: #e74c3c;       /* Color personalizado */
  vertical-align: sub;  /* Mantiene la alineación de subíndice */
}

HTML:

<p>
   Ácido sulfúrico: H<sub style="color: #3498db;">2</sub>SO<sub style="color: #3498db;">4</sub>.
</p>

Resultado:

Ácido sulfúrico: H2SO4.

Accesibilidad

  • Los lectores de pantalla reconocen <sub> como texto en subíndice, lo que ayuda a interpretar correctamente fórmulas o notaciones.

  • Evita usarlo para estilizar texto arbitrario; prioriza su función semántica.

Buenas prácticas

  1. Usa <sub> solo cuando sea necesario: Por ejemplo, en fórmulas o referencias.

  2. No abuses de los estilos: Mantén la legibilidad del texto.

  3. Combínalo con <sup> en ecuaciones: Para diferenciar subíndices y superíndices.

Errores comunes

Usar <sub> para estilizar:

<p>Texto <sub>con estilo</sub> innecesario.</p>

Anidar etiquetas sin motivo:

<sub><sub>Texto redundante</sub></sub>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    sub {
      color: #2ecc71;
      font-size: 0.7em;
    }
    .nota {
      font-style: italic;
      color: #7f8c8d;
    }
  </style>
</head>
<body>
  <h2>Ejemplos de uso de &lt;sub&gt;</h2>
  
  <h3>Fórmulas químicas</h3>
  <p>Metano: CH<sub>4</sub>.</p>

  <h3>Matemáticas</h3>
  <p>Ecuación: x<sub>1</sub> + x<sub>2</sub> = 10.</p>

  <h3>Notas al pie</h3>
  <p>
    La teoría de la relatividad<sub>1</sub> revolucionó la física.
    <span class="nota"><sub>1</sub> Propuesta por Albert Einstein.</span>
  </p>
</body>
</html>

Conclusión

La etiqueta <sub> es esencial para:

  • Representar fórmulas químicas y ecuaciones de manera precisa.

  • Mejorar la legibilidad y semántica en contextos científicos.

  • Mantener estándares de accesibilidad y SEO.

Recuerda:

  • Úsala solo cuando el subíndice tenga significado lógico.

  • Combínala con CSS para ajustar su apariencia sin perder funcionalidad.

¡Ahora puedes aplicar <sub> correctamente en tus proyectos para contenido técnico o científico!