¿Qué contenido debería ir en una etiqueta «aside»?
La etiqueta «aside» es para contenido tangencialmente relacionado al principal: barras laterales, publicidad, enlaces relacionados.
La etiqueta <aside> en HTML se utiliza para marcar contenido que está relacionado tangencialmente con el contenido principal que lo rodea, pero que podría considerarse como algo separado o «al margen» de dicho contenido principal. Es información que complementa el flujo principal, pero no es esencial para su comprensión.
Piensa en el contenido de un <aside> como notas al margen, información adicional, o secciones que, aunque relacionadas, podrían leerse de forma independiente o incluso omitirse sin que el entendimiento del contenido principal se vea afectado drásticamente.
Tipos de contenido que suelen ir en una etiqueta <aside>:
- Barras laterales (Sidebars): Este es uno de los usos más comunes. Una barra lateral puede contener:
- Enlaces de navegación secundarios o relacionados.
- Listas de artículos populares o recientes.
- Biografías cortas del autor (si el
<aside>está dentro de un<article>específico). - Glosarios o definiciones relacionadas con el texto principal.
- Publicidad.
- Citas destacadas (Pull Quotes): Fragmentos de texto extraídos del contenido principal y presentados de forma destacada, a menudo a un lado.
- Información de contexto adicional: Como datos curiosos, cifras relacionadas o pequeñas notas explicativas que no encajan directamente en el flujo narrativo principal.
- Grupos de anuncios: Si no son el foco principal de la página.
Ejemplo de uso común (como una barra lateral):
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<title>Artículo con Barra Lateral</title>
<style>
/* Estilos básicos para demostración */
body { display: flex; }
main { flex: 3; margin-right: 20px; }
aside { flex: 1; border-left: 1px solid #ccc; padding-left: 15px; }
</style>
</head>
<body>
<header><h1>Mi Sitio de Noticias</h1></header>
<main>
<article>
<h2>Avances en la Inteligencia Artificial</h2>
<p>El campo de la IA ha visto progresos significativos este año...</p>
<p>Más contenido del artículo principal aquí...</p>
</article>
</main>
<aside>
<h3>Artículos Relacionados</h3>
<ul>
<li><a href="#">El futuro del aprendizaje automático</a></li>
<li><a href="#">Ética en la IA</a></li>
</ul>
<h3>Glosario</h3>
<dl>
<dt>IA</dt>
<dd>Inteligencia Artificial.</dd>
</dl>
</aside>
<footer><p>© 2025 Mi Sitio</p></footer>
</body>
</html>
Lenguaje del código: PHP (php)Es importante recordar que el contenido de un <aside> debe estar relacionado con el contenido que lo rodea.
Si el <aside> está dentro de un <article>, su contenido debe estar relacionado con ese artículo.
Si está fuera de cualquier <article> pero dentro de <main>, se relaciona con el contenido principal de la página.
La presentación visual (si aparece a un lado, arriba, abajo, etc.) se controla con CSS.
