aside: contenido complementario
Use aside para barras laterales y contenido relacionado tangencialmente
aside: contenido complementario es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento aside
El elemento <aside> marca contenido relacionado tangencialmente con el contenido que lo rodea:
- Puede separarse del contenido principal sin perder el significado de este
- Piense en barras laterales, recuadros destacados, citas destacadas y publicidad
aside en un article
Dentro de un article, aside marca información relacionada, pero no esencial para la narración:
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>aside a nivel de página
A nivel de página, aside se utiliza para las barras laterales:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>Rol ARIA de aside
Un <aside> a nivel de página se asigna a role="complementary":
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->Citas destacadas con aside
Las citas destacadas (fragmentos de citas usados para generar impacto visual) pueden marcarse como aside:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Publicidad con aside
Las unidades publicitarias de las barras laterales pueden marcarse como aside:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside frente a section
Diferencia clave:
<aside>: relacionado tangencialmente con el contenido principal; es complementario<section>: forma parte temáticamente del contenido principal
aside para términos del glosario
Use aside para definir términos utilizados en un article:
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>Varias sections en la barra lateral
Un aside de la barra lateral puede contener varias sections independientes:
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside no necesita un encabezado
A diferencia de section, aside no requiere estrictamente un encabezado:
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside no es para estilos tangenciales
Aside es semántico; no lo use únicamente para crear visualmente el diseño de una barra lateral:
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>Comprobación rápida
¿A qué rol de región de referencia ARIA se asigna un aside a nivel de página?
Resumen: aside
Aspectos esenciales de aside:
- Contenido relacionado tangencialmente con el contenido que lo rodea
- Barra lateral a nivel de página → región de referencia complementaria
- Dentro de article → información complementaria (definiciones de términos, recuadros destacados)
- Asigne una etiqueta a varios asides con aria-label
- No sirve para contenedores de diseño puros; use div para eso
Preguntas frecuentes
¿La lección «aside: contenido complementario» es gratis?
Sí — el texto completo de «aside: contenido complementario» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «aside: contenido complementario»?
Use aside para barras laterales y contenido relacionado tangencialmente Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «aside: contenido complementario»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- aside: contenido complementario
- figure y figcaption: una revisión
- details y summary: componente de divulgación
- Los elementos progress y meter