<aside> — Frontend Classroom

<aside> es el elemento semántico para contenido complementario o tangencial: información que enriquece o amplía el contenido principal pero que no es esencial para entenderlo. Si quitaras el <aside>, el lector no perdería la idea central del contenido principal — eso es exactamente lo que lo define. No es contenido de relleno ni decorativo: es contenido con valor propio que orbita alrededor del contenido principal sin ser parte de su argumento central.

Los ejemplos más típicos de <aside> son: barras laterales con artículos relacionados, notas al margen que amplían un concepto mencionado en el texto, información biográfica del autor de un artículo, cajas de publicidad, call-to-action de suscripción, glosario de términos laterales, o links a recursos externos relevantes pero no citados en el cuerpo. Todos comparten la característica de la tangencialidad: son adiciones al contenido principal que aportan valor pero que no cambian el significado del mensaje si no están.

El error conceptual más frecuente con <aside> es confundir el rol del contenido con su posición visual. <aside> no significa “la columna de la derecha” ni “lo que está al lado”. Significa “contenido complementario al principal”. Sin CSS, un <aside> se apila verticalmente debajo del <main>, igual que cualquier elemento de bloque — eso no es un bug. Hacer que aparezca visualmente a la derecha en dos columnas es trabajo de CSS (Flexbox o Grid), no de la semántica del elemento.

Cómo funciona

<aside> es un elemento de contenido de sección con display block. Genera el landmark ARIA complementary cuando está al nivel de la página (hijo de <body> o dentro de <main>). El landmark complementary indica que el bloque contiene información de apoyo al contenido principal.

La posición de <aside> en el árbol del documento cambia su rol:

Hermano del <main> (o dentro de <main>): genera el landmark complementary. El lector de pantalla lo anuncia como contenido complementario de la página.
Dentro de un <article>: también puede generar complementary — es una nota al margen del artículo.

El landmark complementary permite a los usuarios de lectores de pantalla navegar directamente al contenido secundario sin pasar por el principal, o saltárselo completamente si solo buscan el contenido principal.

Modelo de contenido

<aside> acepta contenido de flujo. Puede contener headings, párrafos, <nav> (útil para links relacionados), <ul>, <article> (tarjetas de artículos relacionados), imágenes, formularios de suscripción, etc. Es uno de los elementos más flexibles en cuanto a contenido.

Sintaxis

<!-- Aside de nivel de página: barra lateral de artículos relacionados -->
<main>
  <article>
    <h2>CSS Flexbox en profundidad</h2>
    <p>Flexbox es un modelo de layout unidimensional...</p>
  </article>
</main>

<aside>
  <h2>Artículos relacionados</h2>
  <ul>
    <li><a href="/css-grid">CSS Grid: guía completa</a></li>
    <li><a href="/responsive">Diseño responsive con media queries</a></li>
    <li><a href="/layout">Patrones de layout modernos</a></li>
  </ul>
</aside>

<!-- Aside dentro de un artículo: nota al margen -->
<article>
  <h2>La historia de la web</h2>
  <p>Tim Berners-Lee propuso la web en 1989 como sistema de gestión de información...</p>

  <aside>
    <p><strong>Dato curioso:</strong> El primer sitio web todavía existe y es accesible en info.cern.ch</p>
  </aside>

  <p>El primer navegador gráfico, Mosaic, llegó en 1993 y popularizó la web entre el público general...</p>
</article>

CSS Flexbox en profundidad

Flexbox es un modelo de layout unidimensional que distribuye el espacio entre ítems de un contenedor...

Atributos

<aside> no tiene atributos propios. Acepta todos los atributos globales de HTML. En la práctica, class e id son los más usados, y ocasionalmente aria-label si el <aside> no tiene un heading visible que lo identifique.

Rol de landmark y accesibilidad

El rol ARIA implícito de <aside> es complementary. A diferencia de <header> y <footer>, cuyo rol cambia según el contexto de anidado, <aside> siempre genera el landmark complementary — tanto si está al nivel de página como si está dentro de un <article>.

El landmark complementary tiene un comportamiento especial en los lectores de pantalla: permite a los usuarios navegar a él directamente para encontrar información adicional, pero también está diseñado para que los usuarios puedan identificarlo fácilmente y saltarlo si no les interesa.

Si hay más de un <aside> en la página, es buena práctica etiquetarlos con aria-label o aria-labelledby para que el menú de landmarks los distinga:

<aside aria-label="Artículos relacionados">...</aside>
<aside aria-label="Sobre el autor">...</aside>

Cuándo usar `<aside>` / cuándo no

Situación	Qué usar
Barra lateral con artículos relacionados	`<aside>`
Información biográfica del autor al pie del artículo	`<aside>` dentro del `<article>`
Publicidad o patrocinios	`<aside>`
Nota al margen que amplía un concepto del texto	`<aside>` dentro del `<article>`
Call-to-action de suscripción en la barra lateral	`<aside>`
Contenido principal del artículo	No `<aside>` — usar `<article>` o `<section>`
Navegación secundaria del sitio	`<nav>`, no `<aside>`

El criterio de tangencialidad: si quitás el <aside> y el lector todavía puede seguir el argumento central del contenido principal sin perderse nada esencial, es <aside>. Si al quitarlo el contenido queda incompleto o con ideas que no se sostienen, no es <aside>.

Notas, gotchas e interacción

<aside> no significa “la columna de la derecha”. Es el error conceptual más importante de este elemento. <aside> define el rol semántico del contenido (complementario), no su posición visual. Colocarlo a la derecha es responsabilidad de CSS.
Puede estar dentro o fuera del <main>. Dentro del <main> es una nota al margen del contenido principal. Fuera del <main> (hermano en <body>) es la barra lateral de la página. Ambos son válidos y generan el landmark complementary.
No usar para el contenido principal de una sección. Si el contenido es esencial para entender el argumento, no es complementario — debería ser <section> o <article>.
La publicidad es <aside> válido. Puede parecer raro, pero los bloques publicitarios son contenido complementario al principal — no son esenciales para el argumento de la página.

Vigente / legacy

<aside> está completamente vigente desde HTML5. Su predecesor funcional — <div class="sidebar">, <div id="aside">, <div class="lateral"> — es legacy: no genera el landmark complementary. No hay atributos propios de <aside> marcados como legacy.