Etiqueta aside en HTML: contenido complementario

La etiqueta <aside> representa contenido relacionado de forma secundaria con el contenido que lo rodea. Sirve para separar una nota, un glosario o una lectura relacionada que amplía el tema sin ser indispensable para entenderlo. Úsala cuando ese bloque pueda consultarse por separado y el texto principal siga teniendo sentido al retirarlo.

Ejemplo mínimo de aside

Este fragmento puede insertarse dentro del <body> de una página. El enlace lleva a la definición de <article> en el estándar de HTML:

<aside aria-labelledby="lectura">
  <h2 id="lectura">Lectura relacionada</h2>
  <a href="https://html.spec.whatwg.org/multipage/sections.html#the-article-element">Referencia de article</a>
</aside>

Verás un título y un enlace. <aside> identifica el bloque como complementario, pero no lo coloca automáticamente a la derecha ni crea una columna. aria-labelledby="lectura" utiliza el texto del encabezado con ese id como nombre accesible de la región.

Sintaxis y contexto válido

Se escribe con apertura <aside> y cierre </aside>; ninguna de las dos etiquetas puede omitirse. Su contenido permitido es contenido de flujo, como párrafos, listas, encabezados o imágenes. Esto no elimina las restricciones de los elementos que coloques dentro.

Puedes usarlo en contenedores que admiten contenido de sección, como <body>, <main>, <article>, <section> o <div>. No lo introduzcas dentro de un párrafo <p>, que admite contenido de frase, ni como descendiente de <address>. Estas reglas se recogen en el HTML Living Standard y el resumen técnico de MDN.

¿Puede estar dentro de article? Sí. En ese caso, la nota complementa ese artículo: por ejemplo, una explicación adicional de un término de la lección. Fuera del artículo, puede complementar la página en conjunto, como una selección de lecturas del sitio. Consulta la guía de <article> para delimitar una pieza independiente.

Cuándo una nota es complementaria

Piensa en una lección para crear tu primer archivo HTML. Un glosario sobre el vocabulario de la web puede ampliar el aprendizaje sin impedir que sigas los pasos: es candidato a <aside>. En cambio, la instrucción de guardar el archivo con extensión .html forma parte del procedimiento y debe permanecer en el contenido principal.

El título «Nota» y un recuadro de color no bastan para decidir. Una advertencia necesaria para completar una tarea también pertenece al flujo principal. Tampoco conviertas cada aclaración entre paréntesis en un <aside>: normalmente forma parte de su párrafo.

Aside y barra lateral de diseño

¿Aside siempre es una barra lateral? No. Puede aparecer debajo del artículo, entre otros bloques o a un lado mediante CSS. Su significado depende de la relación del contenido, no de su posición visual.

Una columna lateral que contiene la navegación principal encaja mejor como <nav>. Una parte esencial del tema puede ser una <section>; una caja necesaria solo para distribuir columnas puede ser un <div>. <main> identifica el contenido principal de la página. Elige primero la función y después aplica el diseño.

Caso práctico: una lección con una nota adicional

Guarda este documento completo como prueba-aside.html y ábrelo en el navegador. No requiere imágenes, servidor ni JavaScript:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tu primer archivo HTML</title>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
        line-height: 1.6;
      }

      .leccion {
        max-width: 60rem;
        margin: auto;
        padding: 1rem;
      }

      .nota {
        padding: 1rem;
        border: 1px solid #547575;
        background: #eef6f6;
      }

      .nota h2 {
        margin-top: 0;
      }

      @media (min-width: 48rem) {
        .contenido {
          display: grid;
          grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
          gap: 1.5rem;
          align-items: start;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <article class="leccion">
        <h1>Tu primer archivo HTML</h1>
        <p>Prepara un archivo que puedas abrir en el navegador.</p>

        <div class="contenido">
          <section>
            <h2>Pasos necesarios</h2>
            <ol>
              <li>Abre un editor de texto.</li>
              <li>Escribe el código HTML de tu página.</li>
              <li>Guarda el archivo como inicio.html, en UTF-8.</li>
              <li>Abre inicio.html en el navegador.</li>
            </ol>
            <p>Comprueba que el nombre no termine en .html.txt.</p>
          </section>

          <aside class="nota" aria-labelledby="vocabulario">
            <h2 id="vocabulario">Vocabulario adicional</h2>
            <dl>
              <dt>HTML</dt>
              <dd>Siglas de HyperText Markup Language.</dd>
              <dt>Hipertexto</dt>
              <dd>Texto conectado con otros contenidos mediante enlaces.</dd>
            </dl>
          </aside>
        </div>
      </article>
    </main>
  </body>
</html>

En una ventana ancha verás los pasos a la izquierda y el vocabulario a la derecha. Por debajo de 48rem, los pasos aparecen primero y la nota después. El orden del HTML coincide con ese orden de lectura; CSS no adelanta la nota ni desplaza las instrucciones esenciales.

Para comprobarlo, reduce la ventana y desactiva los estilos: ambos bloques deben seguir siendo comprensibles en secuencia. Desactivar JavaScript no cambia el ejemplo. La nota tiene un <h2> porque es un bloque subordinado al título <h1> de la lección.

Si sustituyes <aside> por <div> y conservas class="nota", el recuadro seguirá teniendo el mismo estilo, pero perderá la semántica complementaria nativa. Si retiras la nota completa, los pasos seguirán bastando para la tarea. Esa diferencia justifica la elección de <aside>.

Atributos y accesibilidad

<aside> no tiene atributos HTML específicos: admite los globales, como id, class y lang. class permite seleccionar el elemento desde CSS; grid-template-columns es una propiedad CSS, no un atributo de <aside>. El elemento tampoco necesita una propiedad de JavaScript para adquirir su significado.

Para nombrar una región, usa aria-labelledby cuando exista un título visible, como en ambos ejemplos. El id referenciado debe existir y ser único en la página. Si no hay texto visible que sirva de nombre, puede utilizarse aria-label con una descripción breve del contenido. Estos atributos ARIA no son exclusivos de <aside>.

Cuando haya varias regiones complementarias, dales nombres distintos y descriptivos: «Lecturas relacionadas» y «Vocabulario», por ejemplo. La guía de regiones complementarias de WAI explica esta necesidad.

El mapeo accesible depende del contexto: un <aside> a nivel de <body> o <main> tiene el rol implícito complementary; dentro de contenido de sección, como <article>, el HTML Accessibility API Mappings establece complementary si tiene nombre accesible y generic si no lo tiene. No añadas un role="complementary" redundante a los ejemplos nombrados ni supongas un anuncio idéntico en todos los lectores de pantalla.

Errores frecuentes y compatibilidad

• Usar <aside> solo porque una caja está a la derecha. Revisa qué relación tiene con el texto.
• Esconder un paso indispensable en la nota. Devuélvelo a la explicación principal.
• Repetir el mismo id al copiar varias notas. Asigna identificadores únicos y comprueba sus referencias.
• Confundir un encabezado visible con el nombre accesible de la región. Vincúlalo mediante aria-labelledby cuando necesites nombrarla.

El elemento tiene soporte amplio en los navegadores actuales, según MDN. Ese soporte no garantiza la misma presentación ni la misma exposición de regiones en todas las combinaciones de navegador y tecnología de asistencia. Fuentes y reglas de mapeo consultadas el 3 de octubre de 2026.