Etiqueta HTML <article>
La etiqueta HTML <article> marca contenido independiente y autónomo como una entrada de blog. Aprende su sintaxis, rol ARIA y diferencias con <section>.
La etiqueta <article> es uno de los elementos de sección de HTML5. Define un fragmento de contenido independiente y autónomo — algo que seguiría teniendo sentido por sí solo si se extrajera de la página y se publicara en otro lugar. Una buena prueba: si el contenido pudiera sindicarse en un feed RSS, mostrarse como una tarjeta independiente o republicarse en otro sitio sin perder significado, pertenece a un <article>.
Los usos habituales del elemento <article> incluyen:
- una entrada de blog o noticia
- una publicación en un foro
- una tarjeta de producto en un listado
- un comentario o reseña de un usuario
- un widget o gadget interactivo
¿Por qué usar el elemento <article>?
El elemento <article> aporta un significado semántico que un genérico <div> no tiene:
- Accesibilidad. Cuando un
<article>tiene un nombre accesible (por ejemplo, un encabezado referenciado mediantearia-labelledby), las tecnologías de asistencia lo exponen como un punto de referenciaarticle. Los usuarios de lectores de pantalla pueden saltar entre artículos en lugar de leer toda la página de arriba a abajo. - SEO y semántica. Los motores de búsqueda y las herramientas de lectura (como el "modo lector" de los navegadores) utilizan
<article>como señal del cuerpo de contenido principal y autónomo, ayudándoles a extraer el texto primario de una publicación. - Mantenibilidad. El marcado describe el propósito del contenido, por lo que el CSS y el JavaScript pueden apuntar a unidades semánticas reales en lugar de a simples ganchos de estilo.
<article> vs <section> vs <div>
Estos tres elementos son fáciles de confundir. Usa esta regla general:
<article>— contenido autónomo que podría distribuirse o sindicarse de forma independiente (una entrada de blog, un comentario, una tarjeta de producto). Pregúntate: "¿Podría esto existir por sí solo en otro lugar?" Si la respuesta es sí, usa<article>.<section>— una agrupación temática de contenido relacionado dentro de un documento, generalmente con un encabezado (por ejemplo, "Comentarios" o "Productos relacionados"). Es parte del esquema del documento, pero no está pensado para ser independiente.<div>— un contenedor genérico sin significado semántico. Úsalo solo cuando ningún otro elemento sea adecuado, típicamente solo para aplicar estilos o definir un diseño.
Un <article> y una <section> pueden anidarse en cualquier dirección: una <section> puede agrupar varios elementos <article>, y un <article> puede contener elementos <section> que dividan su contenido. Cuando se anidan elementos <article>, el interior representa contenido relacionado con el exterior — por ejemplo, un comentario dentro de una entrada de blog.
Estructura de un <article>
Puedes usar algunos elementos relacionados para dar a un <article> una estructura completa:
- Elementos de encabezado (
<h1>a<h6>) para titular y estructurar su contenido. Cada<article>puede comenzar con su propio encabezado. - Un
<header>para el contenido introductorio como el título y los metadatos, y un<footer>para el contenido de cierre. - Un elemento
<address>para proporcionar información sobre el autor. Se aplica a cada<article>de forma independiente, incluidos los anidados. - Un elemento
<time>con un atributodatetimepara marcar la fecha de publicación.
En un solo documento HTML se pueden usar múltiples etiquetas <article>.
Sintaxis
La etiqueta <article> va en pares. El contenido se escribe entre las etiquetas de apertura (<article>) y de cierre (</article>).
Ejemplo de la etiqueta HTML <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <article> dentro de la etiqueta HTML <section>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Articles about flowers</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
<article>
<h2>Lilies</h2>
<p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
</article>
</section>
</body>
</html>Ejemplo de una tarjeta de entrada de blog con <header>, <footer>, <time> y <address>:
Este ejemplo muestra una entrada de blog realista y autónoma: un <header> contiene el título y la fecha de publicación, un <address> indica el autor, y un <footer> cierra la publicación.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<header>
<h2>How to Grow Roses</h2>
<p>
Published on
<time datetime="2026-06-17">June 17, 2026</time>
</p>
</header>
<p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
<footer>
<p>Written by
<address>
<a href="mailto:[email protected]">Jane Doe</a>
</address>
</p>
</footer>
</article>
</body>
</html>Atributos
La etiqueta <article> no tiene atributos propios especiales. Admite los Atributos Globales y los Atributos de Evento.
Aplicar estilos al elemento <article>
Por defecto, <article> es un elemento de nivel de bloque sin estilos visuales, por lo que visualmente es igual que un <div> simple. Debes añadir la apariencia tú mismo con CSS. La regla siguiente da a cada artículo un borde, relleno y espaciado para que las tarjetas queden visualmente separadas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
</article>
<article>
<h2>Lilies</h2>
<p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
</article>
</body>
</html>Accesibilidad y ARIA
El elemento <article> tiene un rol ARIA implícito de article, por lo que normalmente no es necesario añadir role="article" manualmente. Para convertirlo en un punto de referencia navegable al que los lectores de pantalla puedan listar y saltar, proporciónale un nombre accesible — generalmente apuntando aria-labelledby al encabezado que contiene:
<article aria-labelledby="post-title">
<h2 id="post-title">How to Grow Roses</h2>
<p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>Otros elementos de sección relacionados que conviene combinar con <article> son <section> para agrupaciones temáticas, <aside> para contenido tangencialmente relacionado (como una barra lateral), y <header> / <footer> para el contenido introductorio y de cierre. Consulta la descripción general de los elementos de sección de HTML5 para obtener el panorama completo.