Teoría
Teoría

La etiqueta article: contenido autónomo

Ya tenemos los grandes bloques de la página principal. Pasemos a una página interna con una entrada del blog. También tendrá encabezado, contenido principal y pie de página.

El encabezado se repetirá en las páginas internas y contendrá un bloque de navegación con un enlace al inicio. En la página principal, <nav> era exclusivo de esa página y lo pusimos dentro de <main>. En las páginas internas se repetirá, así que lo pondremos en <header>.

Por ahora, el <main> de la página interna solo contiene la entrada. Más adelante podría tener otras secciones, como una nube de etiquetas. Conviene delimitar la entrada desde ahora. ¿Serviría <section>? Sí, pero hay una etiqueta más adecuada.

Es <article>, que identifica un contenido completo y autónomo. Justo como una entrada de blog.

A diferencia de una sección que depende de su contexto, un <article> puede trasladarse a otra página o a otro sitio sin perder su sentido. Algunos ejemplos son un artículo, una entrada de blog o un mensaje de un foro.

<article>
  Soy una publicación de Instagram y me veo bien en cualquier lugar
</article>

Puedes usar <section> dentro de <article> para dividirlo en secciones temáticas.

También puedes usar <article> dentro de <section> si esa sección reúne varios contenidos autónomos.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header>  </header> <main>  </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Dentro del encabezado del sitio, agrega una etiqueta <nav> con el texto Volver al inicio.
Quita los comentarios que rodean el texto dentro de <main>.
Después, envuelve todo ese texto en una etiqueta <article>.