<article>: El elemento con contendio del artículo
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde 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 atributodatetimede un elemento<time>.
Ejemplo
<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>
Especificaciones
| Especificación |
|---|
| HTML # the-article-element |