La Etiqueta SMALL

Se utiliza para representar texto secundario o de menor importancia, como notas legales, descargos de responsabilidad, comentarios adicionales o información de copyright.

La etiqueta  en HTML se utiliza para representar texto secundario o de menor importancia, como notas legales, descargos de responsabilidad, comentarios adicionales o información de copyright. Aunque reduce el tamaño del texto por defecto, su propósito principal es semántico, indicando que el contenido es complementario. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<small>Texto secundario aquí</small>

Ejemplo:

<p>
   Precio: $100 <small>(impuestos incluidos)</small>.
</p>

Resultados:

Precio: $100 (impuestos incluidos).

El navegador aplica un estilo CSS por defecto (font-size: smaller).

Casos de uso comunes

a) Notas legales o descargos

<footer>
   <small>© 2023 Mi Empresa. Todos los derechos reservados.</small>
</footer>

b) Comentarios en formularios

<form>
   <label for="email">Correo electrónico:</label>
   <input type="email" id="email">
   <small>No compartiremos tu correo con terceros.</small>
</form>

c) Atribuciones o créditos

<article>
   <h2>Artículo sobre tecnología</h2>
   <p>Contenido principal...</p>
   <small>Fuente: Revista Científica XYZ</small>
</article>

Personalización con CSS

Aunque  reduce el tamaño del texto, puedes personalizar su estilo:

small {
  font-size: 0.8em;    /* Tamaño personalizado */
  color: #666;         /* Color gris para texto secundario */
  display: block;      /* Convertir en bloque (si es necesario) */
  margin-top: 5px;     /* Espaciado superior */
}

Ejemplo:

<small style="color: #e74c3c; font-style: italic;">
   *Oferta válida hasta agotar existencias.
</small>

Resultado:

*Oferta válida hasta agotar existencias.

Diferencias clave entre `` y ``

`<small>`	`<span>`
Tiene significado semántico (texto secundario).	Es un contenedor genérico sin semántica.
Reduce el tamaño del texto por defecto.	No modifica el estilo por defecto.
Ideal para notas legales, descargos, etc.	Útil para estilizar fragmentos arbitrarios.

Ejemplo con :

<p>
   Texto normal <span class="nota">Nota</span>.
</p>

(Requiere CSS para cambiar el tamaño o estilo).

Accesibilidad

Semántica: Los lectores de pantalla reconocen  como texto secundario.
No abuses: Úsala solo para contenido verdaderamente complementario.
Jerarquía clara: No la uses para ocultar información importante.

Buenas prácticas

No anides : Evita estructuras como ..., ya que el texto se volvería ilegible.
Combínala con otras etiquetas: Úsala dentro de <footer>, , o <div> para mejor organización.
Prioriza la claridad: Asegúrate de que el texto siga siendo legible incluso con estilos personalizados.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <style>
    small {
      color: #7f8c8d;
      font-size: 0.85em;
      display: block;
      margin-top: 10px;
    }
    .oferta {
      color: #2ecc71;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="producto">
    <h2>Laptop UltraBook</h2>
    <p class="oferta">$899 <small>(antes <s>$1200</s>)</small></p>
    <small>*Envío gratis disponible solo en compras mayores a $1000.</small>
  </div>

  <footer>
    <small>© 2023 Tienda Tech. Todos los derechos reservados. <a href="#">Términos y condiciones</a>.</small>
  </footer>
</body>
</html>

Errores comunes

Usar  para estilizar:

<small>Este texto no es una nota secundaria.</small>

Ocultar información clave:

<small>Advertencia: Este producto puede causar alergias.</small>

(La advertencia debe destacarse, no minimizarse).

Conclusión

La etiqueta  es una herramienta semántica esencial para marcar texto complementario o legal en tus documentos HTML. Al usarla correctamente:

Mejoras la accesibilidad y el SEO.
Mantienes una estructura de contenido clara.
Facilitas la personalización con CSS.

Recuerda:

Úsala solo para contenido secundario.
Combínala con estilos para mejorar la legibilidad.
Evita sustituirla por  cuando la semántica sea relevante.

¡Ahora puedes integrar  en tus proyectos para crear textos claros y bien estructurados!