Etiqueta HTML <aside>
La etiqueta HTML <aside> define contenido tangencial, como una barra lateral, y crea un landmark ARIA complementary para la accesibilidad.
La etiqueta <aside> es uno de los elementos HTML5 que se utiliza para definir una sección con contenido tangencialmente relacionado con el contenido principal. En general, se emplea para enriquecer un artículo con información adicional o para destacar partes que pueden resultar interesantes para el usuario. El contenido dentro de aside es una parte independiente y no esencial de la página web; si lo eliminas, el contenido principal no se verá afectado.
Las notas al final, los comentarios, las listas de términos, la información de referencia, las colecciones de enlaces, las citas destacadas, etc., son ejemplos de información que puede ir dentro del elemento <aside>.
No confundas el elemento <aside> con una barra lateral. La barra lateral es simplemente un elemento visual, y la etiqueta <aside> no tiene por qué tener el aspecto de una barra lateral.
No uses el elemento <aside> para texto entre paréntesis, ya que está pensado para contenido tangencial y no para texto en línea o complementario dentro del flujo principal.
Puedes usar este elemento para efectos tipográficos en contenido que está separado del contenido principal de la página. Por ejemplo, puede emplearse para bibliografías, citas destacadas, comentarios con información adicional, etc.
¿Por qué usar <aside>? Accesibilidad y SEO
La verdadera razón para elegir <aside> en lugar de un contenedor genérico es la semántica. Un <aside> a nivel de página (colocado fuera de cualquier <article> o <section>) se asigna al rol de landmark ARIA complementary. Esto tiene efectos concretos:
- Los lectores de pantalla lo exponen como un landmark. Los usuarios de tecnología asistiva pueden listar y saltar directamente a las regiones "complementary", igual que pueden hacerlo con
<nav>y<main>. Un<div>genérico no proporciona ningún landmark de este tipo. - Clarifica el esquema del documento. Los motores de búsqueda y las herramientas de accesibilidad construyen un mapa estructural de la página;
<aside>les indica que este bloque es contenido de apoyo, no primario. - Comunica la intención a otros desarrolladores. El propio marcado documenta que el contenido es tangencial y prescindible.
Un <aside> siempre lleva implícito el rol ARIA complementary. Sin embargo, cuando está anidado dentro de un <article> (o <section>), queda circunscrito a ese contenido, y los lectores de pantalla generalmente no lo presentan como un landmark de página de nivel superior: se lee como relacionado con el artículo en lugar de con la página en su conjunto.
Si una página tiene más de un <aside>, asigna a cada uno un nombre accesible distinto con aria-label o aria-labelledby para que los usuarios de lectores de pantalla puedan diferenciar los landmarks:
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Sintaxis
La etiqueta <aside> va en pares. El contenido se escribe entre la etiqueta de apertura (<aside>) y la de cierre (</aside>).
Ejemplo de la etiqueta HTML <aside>:
Etiqueta HTML <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<p>I like watching Game of Thrones.</p>
</main>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Resultado
<aside> anidado dentro de un <article>
Aquí el <aside> está dentro del <article>. El contenido principal aparece primero, y el aside le sigue como una nota del tipo "¿Sabías que...?" que es claramente tangencial a ese artículo específico. Al estar anidado, los navegadores y lectores de pantalla lo tratan como relacionado con el artículo y no como un landmark de nivel de página.
Ejemplo de la etiqueta HTML <aside> con la etiqueta <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<article>
<h2>Game of Thrones</h2>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels.</p>
<aside>
<h3>Did you know?</h3>
<p>The series ran for eight seasons and won numerous Emmy Awards, becoming one of the most-watched shows in television history.</p>
</aside>
</article>
</body>
</html><aside> como barra lateral de página vs. <aside> dentro de un artículo
La ubicación del <aside> cambia su significado. Un <aside> colocado fuera de cualquier <article> o <section> es un aside de nivel de página — generalmente una barra lateral con enlaces, anuncios o publicaciones relacionadas que apoya a la página entera. Un <aside> colocado dentro de un <article> solo apoya a ese artículo.
<body>
<main>
<article>
<h2>How to brew pour-over coffee</h2>
<p>Heat the water to about 94°C, then pour slowly in circles…</p>
<!-- In-article aside: tangential to THIS article -->
<aside>
<h3>Tip</h3>
<p>A gooseneck kettle makes the pour much easier to control.</p>
</aside>
</article>
</main>
<!-- Page-level aside: a sidebar supporting the whole page -->
<aside aria-label="Related guides">
<h2>More guides</h2>
<ul>
<li><a href="/french-press">French press</a></li>
<li><a href="/cold-brew">Cold brew</a></li>
</ul>
</aside>
</body>Puedes usar más de un <aside> en una página, y pueden estar anidados en diferentes niveles. Asigna a cada aside de nivel de página un aria-label o aria-labelledby para que su landmark tenga un nombre único.
La diferencia entre las etiquetas <aside> y <div>
El elemento <div> es un contenedor genérico sin significado semántico — para la tecnología asistiva es estructuralmente invisible y no expone nada más allá del texto que contiene. Un <aside> a nivel de página, en cambio, expone un landmark complementary al que los usuarios de lectores de pantalla pueden navegar directamente. Esta diferencia afecta a la accesibilidad y al SEO.
Compara los dos enfoques para marcar una barra lateral:
<!-- Before: no semantics, just a styled box -->
<div class="sidebar">
<h2>Related links</h2>
<ul>…</ul>
</div>
<!-- After: a navigable complementary landmark -->
<aside aria-label="Related links">
<h2>Related links</h2>
<ul>…</ul>
</aside>¿Cuándo seguirías usando <div>? Recurre a <div> cuando el contenedor existe únicamente para estilos o maquetación (una celda de cuadrícula, un contenedor flex, una envoltura de tarjeta) y no tiene un significado tangencial independiente. Si el bloque es contenido de apoyo pero prescindible, prefiere <aside>; si es solo un gancho para CSS, <div> es la opción correcta.
Atributos
La etiqueta <aside> admite los Atributos Globales y los Atributos de Evento.
Ejemplo con un atributo global:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Cómo aplicar estilos a una etiqueta HTML <aside>
El elemento <aside> no tiene ningún estilo visual predeterminado, por lo que normalmente añades el tuyo propio. Los colores a continuación son ilustrativos — usa los design tokens de tu proyecto o valores con nombre en el código de producción en lugar de valores hexadecimales literales:
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Compatibilidad con navegadores e historia
El elemento <aside> se introdujo en HTML5 y es compatible con todos los navegadores modernos. Antes de HTML5, los desarrolladores marcaban el mismo contenido con un contenedor genérico como <div id="sidebar">, que no transmitía ningún significado a los navegadores, motores de búsqueda ni tecnología asistiva. El elemento semántico <aside> reemplaza ese patrón.
Elementos relacionados
<article>— contenido autónomo que un<aside>suele apoyar.<main>— el contenido predominante del documento.<section>— una agrupación temática de contenido.<nav>— otro elemento landmark, para enlaces de navegación.