Etiqueta ARTICLE

La etiqueta HTML <article> se utiliza para crear un elemento de tipo ‘article’ (artículo). El elemento ‘article’ representa contenido que es autónomo e independiente del resto del contenido del documento. Esto significa que el contenido dentro de la etiqueta <article> puede ser considerado como una unidad completa y autónoma por sí mismo, y podría ser distribuido o reutilizado de manera independiente, por ejemplo, en un contexto de sindicación.

Más específicamente, la especificación de HTML5 establece que el elemento ‘article’ representa:

una composición completa o autocontenida en un documento, página, aplicación o sitio, y que, en principio, es independientemente distribuible o reutilizable, por ejemplo, en sindicación. Esto podría ser una publicación en un foro, un artículo de revista o periódico, una entrada de blog, un comentario enviado por un usuario, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

La etiqueta <article> se introdujo en HTML 5.

Sintaxis de la Etiqueta <article>

La etiqueta <article> se escribe como <article></article>, y el contenido del artículo se inserta entre las etiquetas de inicio y fin. La etiqueta no tiene atributos locales, pero puedes usar cualquiera de los atributos globales y/o atributos de contenido de eventos.

Ejemplo:

<article>
  Aquí va el contenido del artículo...
</article>

Ejemplos de Uso

Artículo Único

Aquí tienes un ejemplo rápido de un artículo único.

<article>
    <h1>Tierra</h1>
    <p>La Tierra se encuentra, en promedio, a 93 millones de millas del Sol. 
        Órbita alrededor del Sol a una velocidad promedio de 18.5 millas por segundo.</p>
</article>

Múltiples Artículos dentro de una Sección

Aquí tienes un ejemplo rápido de múltiples elementos <article> dentro de un elemento <section>.

<section>
    <h1>Planetas</h1>
    <p>Esperamos que disfrutes de estos artículos sobre algunos de los planetas más 
        populares dentro de la comunidad Homo sapiens.</p>
    <article>
        <h2>Tierra</h2>
        <p>La Tierra se encuentra, en promedio, a 93 millones de millas del Sol. 
            Órbita alrededor del Sol a una velocidad promedio de 18.5 millas por segundo.</p>
    </article>
    <article>
        <h2>Marte</h2>
        <p>Marte se encuentra, en promedio, a 142 millones de millas del Sol. 
            Órbita alrededor del Sol a una velocidad promedio de 14.5 millas por segundo.</p>
    </article>
</section>

Encabezados y Pies de Página

Los artículos a menudo incluyen encabezados y/o pies de página. Para proporcionar un encabezado y un pie de página, coloca los elementos <header> y <footer> dentro del elemento <article>.

<article>
    <header>
        <h1>Marte</h1>
        <p>Publicado: <time datetime="2024-05-08">hace 2 semanas</time></p>
    </header>
    <p>Marte se encuentra, en promedio, a 142 millones de millas del Sol. 
        Órbita alrededor del Sol a una velocidad promedio de 14.5 millas por segundo.</p>
     <footer>
        <small>Información proporcionada por la NASA</small>
    </footer>
</article>

Artículos Anidados

(es decir, Artículos dentro de Artículos). Puedes anidar una etiqueta <article> dentro de otra etiqueta <article>. Por ejemplo, una etiqueta <article> podría presentar el artículo principal, mientras que contiene otras etiquetas <article> para presentar los comentarios de los usuarios sobre el artículo principal.

También puedes usar la etiqueta <section> para agrupar elementos relacionados, como los elementos <article> que se utilizan para presentar los comentarios de los usuarios.

<article>
    <h1>Marte</h1>
    <p>Marte se encuentra, en promedio, a 142 millones de millas del Sol. 
        Órbita alrededor del Sol a una velocidad promedio de 14.5 millas por segundo.</p>
    <section>
    <h2>Comentarios de Usuarios</h2>
    <article>
    <header>
        <h3>SolarFlare dice:</h3>
        <p><time datetime="2024-06-05T22:43-08:00">hace 3 horas</time></p>
    </header>
        <p>¡Guau, esta información realmente me hace volver a la Tierra!</p>
    </article>
    <article>
    <header>
        <h3>Pluto dice:</h3>
        <p><time datetime="2024-06-05T23:45-08:00">hace 2 horas</time></p>
    </header>
        <p>¡142 millones de millas... pfft.. eso no es nada!</p>
    </article>
    </section>
</article>

Esto es cómo se vería el ejemplo anterior después de aplicar un color de fondo a los elementos <article> (usando CSS).

See the Pen Article con CSS by Alex (@htmldesdecero) on CodePen.

<article> vs <section>

Puedes anidar etiquetas <article> dentro de etiquetas <section>, y también puedes anidar etiquetas <section> dentro de etiquetas <article>.

¿Cuál deberías usar?

Existe una diferencia sutil entre el elemento <article> y el elemento <section>. El propósito del elemento <section> es representar una sección genérica de un documento o aplicación. El elemento <article>, por otro lado, representa un único y autónomo fragmento de contenido.

Al elegir entre usar una etiqueta <article> o una etiqueta <section>, utiliza la etiqueta <article> si el contenido mantendría su significado si se sindicara.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo el elemento debería aparecer o comportarse.

El elemento <article> acepta los siguientes atributos.

Atributos Globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <article>, al igual que con todas las demás etiquetas HTML.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

Para obtener una explicación completa de estos atributos, consulta los atributos globales de HTML5.