Analizamos qué es el <article>, por qué es importante para la semántica y la accesibilidad de las páginas web, y cómo usarlo de manera eficiente.

¿Qué es el <article> y para qué sirve?

El <article> es un elemento semántico de HTML5 que marca un fragmento de contenido independiente y completo, como una noticia, una publicación de blog o un comentario en un foro. Al usar este elemento, se indica a los navegadores, motores de búsqueda y tecnologías de asistencia (como lectores de pantalla) que el contenido dentro del <article> es una unidad lógica y autónoma.

Importancia:

  • Motores de búsqueda: Permite a los robots entender mejor la estructura de la página, lo que facilita mostrar fragmentos en resultados como Google News.
  • Accesibilidad: Los lectores de pantalla identifican y leen los bloques <article> de forma clara, mejorando la experiencia para usuarios con discapacidades visuales.
  • Código limpio: Mejora la legibilidad y estructura en proyectos grandes.

Lee también: ¿Qué es HTML?: Una Introducción al Lenguaje

Ejemplos de uso ideal:

  • Publicaciones de blog
  • Noticias
  • Comentarios de usuarios
  • Reseñas de productos
  • Widgets independientes, como un informe del tiempo

Cómo se escribe el <article>: sintaxis y atributos

El <article> es un elemento par, con una etiqueta de apertura <article> y una de cierre </article>. El contenido relacionado se coloca entre ambas.

Sintaxis básica:

<article>
  <h2>Título del artículo</h2>
  <p>Primer párrafo del artículo y otro contenido...</p>
  <p>Continuación del artículo...</p>
  <footer>
    <p>Publicado: <time datetime="2025-06-26">26 de junio de 2025</time></p>
  </footer>
</article>

Atributos compatibles:

  • id: Identificador único del elemento.
  • class: Clases para estilos CSS o interacción con JavaScript.
  • style: Estilos CSS en línea (mejor usar hojas de estilo externas).
  • title: Texto para tooltips.
  • Atributos aria-* para mejorar la accesibilidad.

Ejemplo con múltiples artículos:

<body>
  <h1>Mi sitio de noticias</h1>

  <article class="news-item">
    <h2>Noticia destacada del día</h2>
    <p>Hoy ocurrió un evento importante...</p>
    <a href="/noticias/evento-importante">Leer más</a>
  </article>

  <article class="news-item">
    <h2>Análisis de mercado</h2>
    <p>Los expertos analizaron la situación actual del mercado...</p>
    <a href="/analisis/mercado">Leer completo</a>
  </article>

  <section id="user-comments">
    <h2>Comentarios de lectores:</h2>
    <article class="comment">
      <h3>Comentario de Lector1</h3>
      <p>¡Noticia muy interesante, gracias!</p>
      <footer>Publicado: <time datetime="2025-05-27T10:30:00">27.05.2025</time></footer>
    </article>
  </section>
</body>

Cómo funciona el <article>: semántica y accesibilidad

Semántica:
El <article> organiza el contenido en bloques independientes, como capítulos en un libro. Esto ayuda a los navegadores, motores de búsqueda y lectores de pantalla a identificar las partes principales de una página.

Beneficios para SEO:
Aunque no afecta directamente el posicionamiento, el <article> facilita la indexación al destacar bloques completos de contenido, que pueden aparecer en snippets, recomendaciones o feeds de noticias.

Accesibilidad:
Los lectores de pantalla reconocen el <article> como una unidad lógica, anunciando su inicio y fin. Para maximizar la accesibilidad, siempre incluye un encabezado (<h2> o superior) que describa el tema del bloque.

Diferencias entre <article>, <section> y <div>

Diagrama de la estructura básica de una página web HTML con sus principales etiquetas semánticas como header, nav, main, article, aside, section y footer.
Una guía visual para entender cómo las etiquetas HTML organizan y dan significado a tu contenido web.
  • <article>: Para contenido independiente y completo, como noticias o publicaciones que podrían publicarse solas.
  • <section>: Para secciones temáticas dentro de una página, como «Historia» o «Equipo» en una página «Acerca de». No necesariamente son autónomas.
  • <div>: Contenedor genérico sin valor semántico, usado para agrupar elementos o aplicar estilos.

Ejemplo: En un sitio de noticias, cada noticia es un <article>, las categorías como «Economía» son <section>, y la cuadrícula de tarjetas o fondos decorativos son <div>.

Cuándo usar <article> y cuándo no

Usa <article> cuando:

  • El contenido es independiente y tiene sentido por sí solo (noticias, posts, comentarios).
  • Tiene un encabezado, texto, autor o fecha, y no depende del contexto circundante.

No uses <article> para:

  • Agrupar elementos sin un significado unificado (usa <div>).
  • Contenido dependiente del contexto (usa <section>).
  • Navegación, encabezados o pies de página (usa <nav>, <header>, <footer>).
  • Elementos puramente decorativos o de diseño (usa <div>).

¿Se puede anidar un <article> dentro de otro?

Sí, es posible y útil para mostrar contenido anidado, como comentarios dentro de un artículo:

<article>
  <h2>Artículo principal</h2>
  <p>Contenido del artículo...</p>
  <article>
    <h3>Comentario del lector</h3>
    <p>Texto del comentario...</p>
  </article>
</article>

Limita la anidación a uno o dos niveles para mantener la estructura clara.

Cómo estilizar <article> con CSS

El <article> es un elemento de bloque que ocupa todo el ancho de su contenedor padre y comienza en una nueva línea. Se puede estilizar como cualquier otro elemento con CSS.

Ejemplo de estilización de una tarjeta:

<article class="content-card">
  <img src="feature-image.jpg" alt="Imagen del artículo" width="300" height="300">
  <div class="card-body">
    <h2>Título interesante del artículo</h2>
    <p>Descripción breve del contenido...</p>
    <a href="#" class="read-more-btn">Saber más</a>
  </div>
</article>
.content-card {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 25px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  width: 300px;
}

.content-card img {
  width: 100%;
  height: auto;
  display: block;
}

.content-card .card-body {
  padding: 20px;
}

.content-card h2 {
  margin-top: 0;
  font-size: 1.6em;
  color: #2c3e50;
}

.content-card p {
  font-size: 1em;
  color: #34495e;
  line-height: 1.7;
}

.content-card .read-more-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 18px;
  background-color: #3498db;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.content-card .read-more-btn:hover {
  background-color: #2980b9;
}
Una imagen promocional de CodigoNautas sobre la etiqueta HTML article, seguida por un ejemplo de cómo se vería un artículo estilizado con CSS, incluyendo título, descripción y botón "Saber más".
Visualiza cómo la etiqueta article toma vida con CSS para crear componentes de contenido atractivos.

Errores comunes al usar <article>

  1. Uso excesivo: Envolver cada bloque o elemento decorativo en <article> elimina su significado semántico. Úsalo solo para contenido independiente.
  2. Confusión con <section>: No uses <article> para secciones temáticas que no son autónomas, como «Nuestros servicios».
  3. Falta de encabezado: Sin un <h2> o similar, los lectores de pantalla y usuarios pierden contexto.
  4. Envolver toda la página: No uses <article> como contenedor del <body> o <main>. Usa <main> para el contenido principal.

Consejos útiles y trucos

  • Valida tu HTML con herramientas como el validador de W3C para evitar errores.
  • Combina <article> con otros elementos semánticos (<aside>, <section>) para mejorar la estructura.
  • Usa encabezados claros dentro de cada <article> para guiar a los usuarios y lectores de pantalla.

Enlaces útiles:

Categorizado en:

HTML,