La Etiqueta ARTICLE

La etiqueta <article> es un elemento semántico de HTML5 que representa contenido independiente y autónomo. Es ideal para estructurar información que puede ser reutilizada o distribuida por separado, como publicaciones de blog, noticias o comentarios.

Sintaxis básica

<article>
  <!-- Contenido independiente -->
</article>

• Es un elemento de bloque.

• Puede contener otros elementos semánticos (<header>, <section>, <footer>, etc.).

Casos de uso comunes

Publicaciones de blog o noticias

<article>
  <header>
    <h2>Inteligencia Artificial en Medicina</h2>
    <p>Publicado el <time datetime="2023-10-15">15 de octubre de 2023</time></p>
  </header>
  <section>
    <p>La IA está revolucionando el diagnóstico médico...</p>
  </section>
  <footer>
    <p>Autor: Dra. Ana Torres</p>
  </footer>
</article>

Comentarios en foros

<article class="comentario">
  <h3>Usuario: TechLover22</h3>
  <p>Excelente artículo, ¡gracias por compartir!</p>
  <footer>
    <button>Responder</button>
    <button>Me gusta</button>
  </footer>
</article>

Productos en un catálogo

<article class="producto">
  <img src="zapatos.jpg" alt="Zapatos deportivos">
  <h3>Zapatos Runner Pro</h3>
  <p>Precio: $120.000</p>
  <button>Agregar al carrito</button>
</article>

Reglas clave

Usos correctos

• Contenido que tiene sentido por sí mismo fuera del contexto de la página.

• Elementos reutilizables en sindicación (RSS/Atom).

• Componentes que pueden ser compartidos independientemente.

Usos incorrectos

• Contenedor genérico para cualquier contenido.

• Elementos que dependen del contexto circundante:

<!-- Incorrecto -->
<article>
  <p>Este párrafo solo tiene sentido dentro de su sección padre</p>
</article>

Accesibilidad

• Los lectores de pantalla reconocen <article> como contenido independiente.

• Buenas prácticas:

  • Usar encabezados jerárquicos (<h2>, <h3>, etc.) dentro del artículo.

  • Añadir etiquetas ARIA si es necesario:

<article aria-labelledby="articulo1-titulo">
  <h2 id="articulo1-titulo">Título del artículo</h2>
  <!-- Contenido -->
</article>

Estilización con CSS

Personaliza la apariencia para destacar los artículos:

article {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 2rem 0;
  padding: 1.5rem;
}

article header {
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}

article footer {
  color: #666;
  font-size: 0.9em;
  margin-top: 1rem;
}

SEO y semántica

Los motores de búsqueda priorizan contenido estructurado con <article>.

Mejores prácticas:

Usar datos estructurados (Schema.org) dentro de artículos:

<article itemscope itemtype="http://schema.org/Article">
  <h2 itemprop="headline">Título del artículo</h2>
  <meta itemprop="datePublished" content="2023-10-15">
  <div itemprop="articleBody">Contenido principal...</div>
</article>

Evitar contenido duplicado: Cada <article> debe ser único.

Errores comunes

Anidación incorrecta

<!-- Incorrecto -->
<article>
  <article> <!-- Artículo dentro de otro sin relación -->
    <h3>Subartículo</h3>
  </article>
</article>

Usar como contenedor genérico

<!-- Incorrecto -->
<article>
  <nav>Menú de navegación</nav> <!-- No es contenido independiente -->
</article>

Omisión de encabezados

<!-- Poco semántico -->
<article>
  <p>Contenido sin título...</p> <!-- Falta <h2>-<h6> -->
</article>

Ejemplos prácticos

Ejemplo 1: Blog con múltiples artículos

<main>
  <h1>Últimas publicaciones</h1>
  
  <article class="post">
    <header>
      <h2>Desarrollo Web en 2024</h2>
      <p>Categoría: Tecnología</p>
    </header>
    <section>
      <p>Las tendencias actuales incluyen...</p>
    </section>
    <footer>
      <a href="post.html">Leer más</a>
    </footer>
  </article>

  <article class="post">
    <!-- Segundo artículo -->
  </article>
</main>

Ejemplo 2: Galería de productos

<section class="productos">
  <h2>Novedades</h2>
  
  <article class="producto">
    <img src="camara.jpg" alt="Cámara profesional">
    <h3>Cámara X-Pro 2024</h3>
    <p>Resolución 4K, 20MP</p>
    <button>Comprar</button>
  </article>

  <article class="producto">
    <!-- Otro producto -->
  </article>
</section>

Comparación: <article> vs <section> vs <div>

Elemento	Propósito	Semántica
<article>	Contenido independiente	Alta (específico)
<section>	Agrupación temática	Media (genérico)
<div>	Contenedor sin significado	Nula

Buenas prácticas

• Un artículo por archivo RSS: Si usas sindicación, cada <article> debería poder ser un ítem individual.

• Jerarquía de encabezados: Mantén un orden lógico (<h1> para el título de la página, <h2> para artículos).

• Microformatos: Usa <time datetime> para fechas dentro de artículos.

Conclusión:

La etiqueta <article> es esencial para crear contenido estructurado y semántico. Úsala para:

• Publicaciones autónomas (blog, noticias).

• Elementos reutilizables (comentarios, productos).

• Mejorar SEO y accesibilidad.

¡Transforma tu marcado HTML en contenido significativo!