<article>: El elemento con contendio del artÃculo

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since julio de 2015.

El Elemento de HTML <article> representa una composiciÃ³n auto-contenida en un documento, una pÃ¡gina, una aplicaciÃ³n o en un sitio, que se quiere que sea distribuÃble y/o reutilizable de manera independiente, por ejemplo, en la redifusiÃ³n. Algunos ejemplos podrÃan ser un mensaje en un foro, un artÃculo de una revista o un periÃ³dico, una entrada de blog, el comentario de un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

PruÃ©balo

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

.forecast {
  margin: 0;
  padding: 0.3rem;
  background-color: #eee;
}

.forecast > h1,
.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}

.day-forecast {
  background: right/contain content-box border-box no-repeat
    url("/shared-assets/images/examples/rain.svg") white;
}

.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}

Un mismo documento puede tener varios artÃculos; por ejemplo, en un blog en el que se que muestran distintos mensajes a medida que el usuario va navegando, cada mensaje estarÃa en un elemento <article>, posiblemente con uno o mÃ¡s elemenentos <section> dentro.

CategorÃas de contenido	Contenido de flujo, contenido de secciÃ³n, contenido palpable.
Contenido permitido	Contenido de flujo.
OmisiÃ³n de etiquetas	Ninguna, tanto la etiqueta de apertura como la de cierre son obligatorias.
Padres permitidos	Todo elemento que permita contenido de flujo. Un elemento `<article>` no puede ser hijo de un elemento `<address>`.
Rol ARIA implÃcito	`article (en-US)`
Roles ARIA permitidos	application, document, feed, main, none, presentation, region.
Interfaz DOM	`HTMLElement`.

Atributos

Este elemento solo incluye los atributos globales.

Notas de uso

Cada <article> debe ser identificado, normalmente con un elemento de encabezado (elementos <h1> - <h6>) como hijo.
Cuando un <article> estÃ¡ incorporado dentro de otro, representa un artÃculo cuyo contenido estÃ¡ relacionado con el artÃculo que lo anida. Por ejemplo, un comentario en una entrada de blog puede ser un <article> dentro de otro <article> que representa la propia entrada del blog.
La informaciÃ³n del autor de un <article> se pueden proporcionar mediante el elemento <address>, pero esto no se aplica a los artÃculos anidados dentro de otros.
La fecha y momento de publicaciÃ³n de un elemento <article> pueden ser declarados mediante el atributo datetime de un elemento <time>.

Ejemplo

html

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>ReseÃ±a</h3>
    <p>Â¡Los dinosaurios estuvieron genial!</p>
  </section>
  <section class="user_reviews">
    <h3>ReseÃ±as de usuarios</h3>
    <article class="user_review">
      <h4>Â¡Demasiado aterrador!</h4>
      <p>Demasiado aterradores para mÃ</p>
      <footer>
        <p>
          Publicado el
          <time datetime="2015-05-16 19:00">16 de mayo</time>
          por Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Â¡Amo a los dinos!</h4>
      <p>Estoy de acuerdo, los dinosaurios son mis favoritos.</p>
      <footer>
        <p>
          Publicado el
          <time datetime="2015-05-17 19:00">17 de mayo</time>
          por Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Publicado el
      <time datetime="2015-05-15 19:00">15 de mayo</time>
      por Staff.
    </p>
  </footer>
</article>