Etiqueta HTML <small>
La etiqueta <small> reduce el tamaño de fuente del texto un nivel por debajo del tamaño base del documento.
La etiqueta HTML <small> marca comentarios secundarios y texto en letra pequeña — contenido de importancia secundaria como avisos de derechos de autor, descargos de responsabilidad legales, información de licencias, atribuciones y la letra pequeña junto a un precio. Los navegadores la renderizan aproximadamente un tamaño menor que el texto circundante (aproximadamente el 80% del tamaño de fuente del elemento padre), pero su valor real es semántico: le indica a los navegadores y a la tecnología de asistencia que el texto es una nota secundaria, no un encabezado ni el mensaje principal.
Cuándo usar <small> (y cuándo no)
Esta es la distinción clave que muchos desarrolladores pasan por alto. En HTML5, <small> no es una herramienta genérica para "hacer el texto más pequeño". Si solo deseas cambiar el tamaño visual de un texto por razones de diseño, usa la propiedad CSS font-size en su lugar.
Usa <small> cuando el contenido sea letra pequeña o un comentario secundario:
- Líneas de derechos de autor en un pie de página
- Descargos de responsabilidad y términos legales ("Se aplican condiciones")
- La nota con asterisco junto a un precio o tasa de interés
- Notas de atribución y licencia
Recurre a CSS font-size cuando simplemente quieras texto más pequeño que no tenga el significado de "comentario secundario" — por ejemplo, un título o etiqueta estilísticamente pequeños.
Al igual que las etiquetas <i>, <b>, <sub> y <sup>, <small> es completamente semántica en HTML5 y no viola la regla de separación entre estructura y presentación. Es un elemento en línea, por lo que fluye dentro de una línea de texto en lugar de iniciar un nuevo bloque.
Sintaxis
La etiqueta <small> va en pares. El contenido se escribe entre las etiquetas de apertura (<small>) y cierre (</small>).
Ejemplo de la etiqueta HTML <small>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
</body>
</html>Ejemplo de la etiqueta HTML <small> dentro de una etiqueta <div>:
<!DOCTYPE html>
<html>
<head>
<title>Usage of the SMALL tag</title>
</head>
<body>
<h1>Small tag example</h1>
<p>This is some standard paragraph text.</p>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<small>This is a small text.</small>
</div>
</body>
</html>Ejemplos del mundo real
Línea de derechos de autor en el pie de página
Un aviso de derechos de autor es letra pequeña clásica, por lo que pertenece a un elemento <small>:
<footer>
<small>© 2024 Example Inc. All rights reserved.</small>
</footer>Letra pequeña junto a un precio
Usa <small> para el descargo de responsabilidad que califica un precio o tasa:
<p>
$9.99/month
<small>Billed annually. Taxes not included.</small>
</p><small> anidado para una reducción de tamaño adicional
Puedes colocar un elemento <small> dentro de otro elemento <small>. Cada nivel reduce el tamaño de fuente nuevamente en relación con su padre, por lo que cuanto más profunda sea la anidación, más pequeño será el texto:
<p>
Main text
<small>
smaller side note
<small>even smaller detail</small>
</small>
</p>Atributos
La etiqueta <small> admite los atributos globales y los atributos de evento.
Cómo aplicar estilos a una etiqueta HTML <small>
El tamaño predeterminado del navegador para <small> proviene de CSS, por lo que puedes reemplazarlo con la propiedad font-size. El siguiente ejemplo conserva el significado semántico de letra pequeña mientras controla la apariencia exacta:
<!DOCTYPE html>
<html>
<head>
<title>Styling the small tag</title>
<style>
small {
font-size: 0.75em;
color: #777;
}
</style>
</head>
<body>
<p>
Subscribe today!
<small>Cancel anytime.</small>
</p>
</body>
</html>Ten en cuenta la diferencia: usa el elemento <small> cuando el texto signifique letra pequeña o un comentario secundario, y usa la propiedad CSS font-size cuando solo quieras cambiar el tamaño visual de texto ordinario.