<article>
Semántica y estructura de página
Contenedor para piezas de contenido autónomas y redistribuibles: posts de blog, noticias, comentarios de usuarios, tarjetas de producto o cualquier unidad que tenga sentido fuera de su contexto original.
<article> es el elemento semántico para contenido autónomo y redistribuible: una pieza de contenido que tiene sentido por sí sola, fuera de la página en la que aparece. La palabra clave es autónomo — si pudieras tomar ese bloque, sacarlo de la página y publicarlo en otro lugar (un feed RSS, una app de noticias, un widget de “artículos relacionados”, una tarjeta en una red social), y todavía tendría sentido completo sin el contexto de la página original, entonces es <article>.
Los ejemplos clásicos de contenido que califica como <article> son: un post de blog, un artículo de noticias, un comentario de usuario, una tarjeta de producto en un catálogo, un widget del clima, una entrada de un foro, una reseña de película. Todos comparten la característica de la autonomía: son unidades de contenido que existen por derecho propio, que podrían ser distribuidas, indexadas o reutilizadas individualmente, y que tienen sentido sin necesitar leer el resto de la página.
Esta autonomía es lo que diferencia <article> de <section>. Una <section> agrupa contenido que solo tiene sentido en el contexto de la página — si la sacás de su contexto, pierde su identidad. Un <article> puede vivir solo. La heurística práctica que enseña el módulo lo dice claramente: preguntate ¿tiene sentido esta pieza sola, fuera de esta página? Si la respuesta es sí, es <article>. Si solo tiene sentido en el contexto de la página, es <section>.
Cómo funciona
<article> es un elemento de contenido de sección con display block. Siempre genera el landmark ARIA article, independientemente de si está al nivel de <body> o anidado dentro de otra estructura. Esto lo diferencia de <header> y <footer>, cuyo rol cambia según el contexto.
El anidado de <article> puede ir en ambas direcciones: un <article> puede contener <section> (un artículo largo dividido en secciones), y una <section> puede contener varios <article> (una sección de últimas publicaciones). Un <article> también puede contener otro <article> — el caso clásico son los comentarios dentro de un post: el post es el <article> principal y cada comentario es un <article> anidado.
<article> puede tener su propio <header> (con título, fecha, autor) y su propio <footer> (con tags, links relacionados, información de autoría). Esto los convierte en unidades completas e independientes de contenido.
Modelo de contenido
<article> acepta contenido de flujo. No tiene restricciones de contenido — puede contener headings, párrafos, imágenes, listas, <section>, otros <article>, <header>, <footer>, <aside>, tablas, formularios. Es la unidad contenedora más rica del bloque semántico.
Sintaxis
<!-- Artículo de blog completo -->
<article>
<header>
<h2>Cómo aprender HTML semántico</h2>
<p>Por <a href="/autores/ana">Ana García</a> ·
<time datetime="2026-06-17">17 de junio de 2026</time></p>
</header>
<p>El HTML semántico comunica el significado del contenido al navegador y a las herramientas de asistencia...</p>
<section>
<h3>¿Por qué usar elementos semánticos?</h3>
<p>Los elementos semánticos generan landmarks de accesibilidad...</p>
</section>
<footer>
<p>Tags: <a href="/html">HTML</a>, <a href="/accesibilidad">Accesibilidad</a></p>
</footer>
</article>
<!-- Lista de artículos en una sección -->
<section>
<h2>Últimas publicaciones</h2>
<article>
<h3>HTML semántico en 2026</h3>
<p>El estándar HTML Living Standard sigue evolucionando...</p>
</article>
<article>
<h3>CSS Grid: guía completa</h3>
<p>CSS Grid permite diseñar layouts bidimensionales...</p>
</article>
</section>
<!-- Comentarios: article anidado dentro de article -->
<article>
<h2>Por qué usar HTML semántico</h2>
<p>Contenido del post...</p>
<section>
<h3>Comentarios</h3>
<article>
<p><strong>María López:</strong> Excelente artículo. Empecé a usar section correctamente.</p>
</article>
<article>
<p><strong>Carlos Ruiz:</strong> ¿Cuándo usarías div en lugar de section?</p>
</article>
</section>
</article>Atributos
<article> no tiene atributos propios. Acepta todos los atributos globales de HTML. class e id son los más usados en la práctica para estilos y como anclas de navegación.
Rol de landmark y accesibilidad
El rol ARIA implícito de <article> es article, siempre, sin importar el contexto de anidado. Los lectores de pantalla con soporte para el rol article permiten a los usuarios navegar entre artículos con atajos de teclado — en VoiceOver con el rotor de “artículos”, por ejemplo.
A diferencia del landmark region de <section>, el rol article se activa sin necesitar un nombre accesible explícito. Sin embargo, es buena práctica que cada <article> tenga un heading (<h2> o el nivel correspondiente al contexto) para identificar el contenido tanto para lectores de pantalla como para el outline del documento.
Cuándo usar <article> vs <section> vs <div>
La tabla de decisión del módulo, que coincide con las lecciones:
| Criterio | <article> | <section> | <div> |
|---|---|---|---|
| ¿Tiene sentido fuera de esta página? | Sí | No | No aplica |
| ¿Es redistribuible? (RSS, tarjeta, widget) | Sí | No | No |
| ¿Tiene heading temático? | Recomendado | Necesario | No aplica |
| ¿Genera landmark? | Siempre (article) | Solo con nombre accesible (region) | No |
| Uso principal | Post, noticia, comentario, tarjeta | Agrupación temática contextual | Agrupación para estilo/JS |
La heurística práctica: ¿puede este bloque publicarse en un feed RSS y tener sentido sin el contexto de la página? Si sí → <article>. Si solo tiene sentido en la página → <section>. Si no hay semántica relevante → <div>.
Notas, gotchas e interacción
- “Artículo” no significa literalmente un artículo periodístico. Un comentario, una tarjeta de producto, una entrada de calendario o un widget del clima son todos candidatos a
<article>si son autónomos y redistribuibles. <article>puede estar dentro de<section>y al revés. Ambas direcciones de anidado son válidas. Lo que importa es la semántica: ¿la unidad tiene autonomía (article) o solo contexto temático (section)?- Comentarios son
<article>dentro del<article>del post. Cada comentario es una pieza de contenido autónoma (tiene autor, contenido, fecha) anidada dentro del artículo al que responde. - Un
<article>no tiene que tener un heading. Es recomendado, pero la especificación no lo exige. Un comentario corto de usuario puede ser<article>sin heading. Lo que importa es la autonomía del contenido, no la presencia del heading.
Vigente / legacy
<article> está completamente vigente desde HTML5. No tiene formas legacy — no existía antes de HTML5, por lo que no reemplaza a ningún elemento antiguo (sí reemplaza el patrón <div class="post">, <div class="article"> o <div id="noticia">, que son funcionales pero no semánticos). No hay atributos propios de <article> marcados como legacy.