Teoría
Teoría

La etiqueta aside: contenido complementario

Además de <section> y <article>, existe otro contenedor para grandes bloques de contenido: <aside>.

La etiqueta <aside> contiene información complementaria que queda fuera del hilo principal del contenido. Estos bloques suelen aparecer como barras laterales.

<aside>
  Soy un pequeño bloque con tipos de cambio en un sitio sobre peces
</aside>

También podemos reservar un <aside> en nuestra página interna. Después agregaremos enlaces a entradas relacionadas, publicaciones de una red social o cualquier otra cosa que se le ocurra al jefe.

Los estilos del prototipo dan un aspecto distinto a las etiquetas según su función. Para ello nos basamos en las categorías de contenido de la especificación HTML. Esta es la leyenda:

La etiqueta especial <body> tiene un borde discontinuo.
El borde azul identifica etiquetas de contenido de flujo que usamos para los grandes bloques de la página, como <main>.
El borde violeta identifica etiquetas de contenido de seccionamiento, como <section>.
El borde naranja identifica etiquetas de encabezado, como <h1>.
El borde rosa identifica etiquetas de contenido de flujo que usamos para los bloques de texto, como <p>.

La especificación incluye más categorías, pero solo hemos dado estilos a las etiquetas que necesitamos para este prototipo.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <nav> Volver al inicio </nav> </header> <main> <article> Día uno. Cómo olvidé darle de comer al gato. Quién iba a imaginar que la semántica era tan importante. Tenía que hablar de ello. Miré al gato. Soltó un insistente «miau». Entonces lo entendí: era hora de escribir la primera entrada del blog. Y de darle de comer al gato. </article> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Dentro de <main>, después de <article>, agrega una etiqueta <aside> con el texto Aquí podría estar tu anuncio.