Referencia de etiquetas

Etiqueta small en HTML: notas y letra pequeña

La etiqueta  en HTML representa comentarios secundarios o letra pequeña, como aclaraciones, avisos legales y notas de copyright. Úsala para una nota breve que acompaña al contenido principal: por ejemplo, una aclaración junto al precio de un curso. Su significado no depende de que el texto se vea más pequeño.

<p><small>El precio incluye impuestos.</small></p>

La aclaración «El precio incluye impuestos» acompaña al importe y suele aparecer con una fuente menor que la del texto circundante. Es una nota breve sobre el precio, un uso adecuado de .

Puedes probar este párrafo dentro del <main> del documento completo que aparece más adelante. Retira después las etiquetas de , conservando la frase, para comparar su tamaño con el del resto del párrafo.

Sintaxis y contexto válido

Escribe Comentario breve con apertura y cierre; ninguna de las dos etiquetas se puede omitir. Se utiliza donde se admite contenido de frase y contiene ese mismo tipo de contenido, como texto o elementos en línea. En un párrafo o un elemento de lista, envuelve solo la nota. No coloques párrafos, listas ni secciones enteras dentro de . Estas reglas se recogen en el modelo de contenido del HTML Living Standard.

El elemento tampoco sirve para quitar énfasis o importancia a un texto. Una advertencia marcada con  conserva su importancia aunque se encuentre dentro de .

Qué comentarios son secundarios

En la tarjeta de un curso, el nombre, el temario y el precio son información principal. Una frase breve como «El precio incluye impuestos» aclara el importe y puede utilizar . Una nota de copyright en el pie también es un caso apropiado.

¿Puedo usar small para avisos legales? Sí, para una salvedad o aviso breve que acompaña al contenido. En cambio, si la página presenta las condiciones de uso completas, esas condiciones son su contenido principal: escríbelas con párrafos, encabezados y listas según corresponda. No las encierres en  por tratarse de texto legal.

Una condición secundaria aún puede influir en una decisión. Mantén visible, por ejemplo, que un precio no incluye tutorías; no uses la etiqueta como excusa para ocultar ese dato. Tampoco la uses para subtítulos: su función es la nota, no la jerarquía de encabezados.

Small frente a font-size

¿Small hace cualquier texto pequeño? Los navegadores suelen reducir su fuente de manera predeterminada, pero ese aspecto puede cambiar con CSS. font-size controla el tamaño;  comunica una función del contenido. Aplicar font-size: 1rem a una nota no elimina su significado.

Si solo buscas una variación visual en parte de una frase, puedes agruparla con  y una clase CSS. Si ya existe un elemento adecuado, aplica la clase directamente a ese elemento. No elijas  únicamente para que un título, un precio o cualquier otro texto ocupe menos espacio.

Ejemplo práctico: tarjeta de curso con aclaración y copyright

Guarda este documento como curso.html en UTF-8 y ábrelo en el navegador. El curso y su precio son ficticios. Todo el CSS está incluido; no necesita recursos externos, servidor ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Curso de HTML: precio y condiciones</title>
    <style>
      body {
        margin: 0;
        padding: 1rem;
        font-family: system-ui, sans-serif;
        font-size: 1rem;
        line-height: 1.6;
        color: #183044;
        background: #ffffff;
      }

      .curso {
        max-width: 32rem;
        margin-inline: auto;
        padding: 1.25rem;
        border: 2px solid #526575;
        border-radius: 0.5rem;
        overflow-wrap: anywhere;
      }

      .precio {
        font-size: 1.35rem;
        font-weight: bold;
      }

      .nota {
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <main>
      <article class="curso" aria-labelledby="nombre-curso">
        <h1 id="nombre-curso">Curso de HTML desde cero</h1>
        <p>Incluye seis clases grabadas y ejercicios de práctica.</p>
        <p class="precio">Precio: $900 MXN (pesos mexicanos).</p>
        <p>
          <small class="nota" id="condiciones">
            Aclaración: el precio incluye impuestos.
            <strong>No incluye tutorías individuales.</strong>
          </small>
        </p>
        <footer>
          <p><small class="nota">© 2026 Taller de HTML.</small></p>
        </footer>
      </article>
    </main>
  </body>
</html>

Lee la tarjeta: aparecen el nombre, el contenido del curso, el precio, la aclaración y el copyright. La nota tiene el mismo tamaño base que el texto descriptivo; el precio es mayor. La exclusión de tutorías suele mostrarse en negrita y se explica con palabras.
Retira la regla .nota. Las dos notas usarán el tamaño menor predeterminado del navegador. Vuelve a añadirla: cambiará la apariencia, pero seguirá habiendo comentarios secundarios.
Retira únicamente las etiquetas de la primera nota, conservando su texto y . La exclusión de tutorías mantiene su importancia, aunque ya no esté dentro de un comentario secundario.
Reduce la ventana y amplía la página al 200 %. Comprueba que el precio, las condiciones y el copyright se puedan leer completos.

Atributos y accesibilidad

 no tiene atributos específicos vigentes. Admite los atributos globales de HTML: class selecciona las notas para CSS; id identifica una nota de forma única; lang indica su idioma. En el ejemplo, el español se hereda de <html lang="es">. La clase no cambia el tamaño por sí sola: lo hace la regla CSS asociada.

¿Puede combinarse con strong? Sí: la exclusión de tutorías del ejemplo es una parte importante de la aclaración.  marca esa importancia y  identifica el comentario secundario; no se anulan entre sí. El estándar explica expresamente esta combinación.

No dependas de que un lector de pantalla anuncie «letra pequeña», ni de un tamaño menor para explicar una condición. Conserva frases explícitas como «Aclaración» y «No incluye».

Comprueba el contraste del texto y la lectura al ampliarlo al 200 %. En esta tarjeta, el texto oscuro sobre blanco favorece la lectura y la altura se adapta al contenido. 1rem es una elección del ejemplo, no un mínimo universal de accesibilidad. Evita alturas fijas, recortes y notas tan tenues que resulte difícil encontrarlas.

Errores frecuentes y etiquetas relacionadas

¿Por qué mi small no se ve más pequeño? Revisa las reglas aplicadas en las herramientas del navegador: una hoja de estilos puede cambiar font-size, como hace .nota. Ese cambio no vuelve incorrecta una nota que cumple la función del elemento.

Los errores habituales son envolver largos bloques esenciales, usar notas para subtítulos o esconder restricciones relevantes mediante tamaños diminutos. Elige primero la estructura y el significado; después ajusta la apariencia.

<footer> representa el pie de una página o de una sección, como la tarjeta del ejemplo;  representa la nota breve que contiene ese pie.  comunica importancia y  permite agrupar texto sin darle la función de comentario secundario. Esas funciones pueden coexistir cuando el contenido lo justifica.

Compatibilidad y fuentes

Compatibilidad consultada el 3 de octubre de 2026: MDN clasifica  como ampliamente disponible. La apariencia exacta depende de los estilos y del navegador.

El HTML Living Standard fija el significado y las restricciones; la referencia de MDN sobre  complementa la explicación y la compatibilidad.