HTML 5: Secuencia de encabezados y elementos estructurales

Elemento ASIDE

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>

Ejemplo de uso de ASIDE en el contenido principal del documento

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 uso de ASIDE como aclaración dentro de un texto

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 ARTICLE como 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>

Ejemplo de uso de varios ASIDE en la página

Compartir este artículo:

Datos del artículo:

Publicado el miércoles 5 de enero de 2011 a las 00:20
Seguimiento de comentarios (RSS 2.0).

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Outbook