<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 permitido Omisión de etiquetas Padres permitidos Rol ARIA implícito Roles ARIA permitidos Interfaz DOM

Contenido de flujo, contenido de sección, contenido palpable.

Contenido de flujo.

Ninguna, tanto la etiqueta de apertura como la de cierre son obligatorias.

Todo elemento que permita contenido de flujo. Un elemento <article> no puede ser hijo de un elemento <address>.

article (en-US)

application, document, feed, main, none, presentation, region.

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>

Otros elementos relacionados : <body>, <nav>, <section>, <aside>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <header>, <footer>, <address>
Uso de secciones y esquemas HTML

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 10 abr 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

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

In this article

Pruébalo

Atributos

Notas de uso

Ejemplo

Especificaciones

Compatibilidad con navegadores

Véase también

Help improve MDN