<article>: El elemento con contendio del artculo

Baseline Widely available

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

Learn more
See full compatibility

El Elemento de HTML <article> representa una composicin auto-contenida en un documento, una pgina, una aplicacin o en un sitio, que se quiere que sea distribuble y/o reutilizable de manera independiente, por ejemplo, en la redifusin. Algunos ejemplos podran ser un mensaje en un foro, un artculo de una revista o un peridico, una entrada de blog, el comentario de un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

Prubalo

<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 artculos; por ejemplo, en un blog en el que se que muestran distintos mensajes a medida que el usuario va navegando, cada mensaje estara en un elemento <article>, posiblemente con uno o ms elemenentos <section> dentro.

Categoras de contenido	Contenido de flujo, contenido de seccin, contenido palpable.
Contenido permitido	Contenido de flujo.
Omisin 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 implcito	`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 artculo cuyo contenido est relacionado con el artculo 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 informacin del autor de un <article> se pueden proporcionar mediante el elemento <address>, pero esto no se aplica a los artculos anidados dentro de otros.
La fecha y momento de publicacin 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>Resea</h3>
    <p>Los dinosaurios estuvieron genial!</p>
  </section>
  <section class="user_reviews">
    <h3>Reseas 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>