El elemento ASIDE representa una sección del documento con contenidos relacionados.
El contenido de ASIDE puede relacionarse:
- Con el contenido principal del documento, debiendo estar dentro del flujo de dicho contenido: Dentro de un elemento
ARTICLE. - Con el contenido del sitio, debiendo estar fuera del flujo del contenido principal:
- Contenidos relacionados con el contenido principal de la página.
- Contenidos comunes a una sección o a todo el sitio, listados de enlaces externos, etc.
Saber más: aside – tangential content (enlace externo, en inglés).
Ejemplos
Uso en el contenido principal del documento, en este caso una noticia sobre un país en la que se proporciona una breve descripción del mismo como apoyo a dicha noticia:
<article>
<header>
<h1>Noticia sobre Suiza</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<aside>
<h1>Suiza</h1>
<p>Suiza es un país centroeuropeo sin acceso al mar, no es miembro de la Unión Europea, aunque ha firmado numerosos tratados europeos. [?]</p>
</aside>
<p>[Contenido de la noticia]</p>
<article>
Uso como aclaración dentro de un texto:
<section>
[?]
<p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer.</q></p>
<aside>
<q>People ask me what I do for fun when I'm not at work. But I'm
paid to do my hobby, so I never know what to answer.</q>
</aside>
<p>Of course his work ? or should that be hobby? ? isn't his only passion. He also enjoys other pleasures.</p>
</section>
Ejemplo de página con varios elementos ASIDE:
- El primero con áreas de navegación común a todo el sitio.
- El segundo, dentro del elemento
ARTICLEcomo aclaración dentro del contenido principal del documento.
<body>
<header>
<h1>Título del blog</h1> <p>Lema del blog</p>
</header>
<aside><!-- Secciones relacionadas con el sitio: enlaces a otros blogs y a otras entradas -->
<nav>
<h1>Otros blogs</h1>
<ul>
<li><a href="#">Blog de ejemplo</a></li>
[...]
</ul>
</nav>
<nav>
<h1>Archivos</h1>
<ol reversed>
<li><a href="#">My last post</a>
<li><a href="#">My first post</a>
[...]
</ol>
</nav>
</aside>
<article><!-- Entrada de blog -->
<h1>Título de entrada del blog</h1><p>Contenido de la entrada.</p>
<aside><!-- Este ASIDE es relacionado directamente con la entrada de blog, ya que está dentro del elemento ARTICLE que contiene dicha entrada -->
<h1>Título del contenido relacionado de la entrada de blog</h1>
<p>Contenido relacionado</p>
</aside>
<footer>
<p><a href="#" rel=bookmark>Enlace permanente</a></p>
</footer>
</article>
<footer>
<nav>
<p><a href="#">Archivo</a> - <a href="#">Acerca de</a> - <a href="#">Copyright</a></p>
</nav>
</footer>
</body>