Etiqueta <article>
La etiqueta <article> en HTML se utiliza para definir contenido independiente que puede ser distribuido, reutilizado o sindicado de manera separada del resto del documento. Este contenido puede ser un artículo de un blog, una entrada en un foro, una noticia, un comentario, una publicación en redes sociales, entre otros.
¿Para qué se utiliza la etiqueta <article>?
El propósito principal de la etiqueta <article> es marcar un bloque de contenido autónomo que tiene sentido por sí mismo y puede ser comprendido fuera del contexto de la página. Un artículo es un fragmento de contenido que puede ser entendido y reutilizado independientemente de la página web en la que se encuentra.
Es útil para mejorar la accesibilidad y optimizar el SEO (Search Engine Optimization), ya que los motores de búsqueda pueden identificar y categorizar de manera más eficiente el contenido dentro de la página. Además, la etiqueta <article> ayuda a los desarrolladores a organizar mejor su código, lo que facilita la lectura y el mantenimiento.
Dentro de un <article>, puedes incluir otros elementos HTML como encabezados (<h1>, <h2>), párrafos (<p>), imágenes (<img>), enlaces (<a>), y más, dependiendo del contenido que desees mostrar.
Ejemplo básico de uso
A continuación, se muestra un ejemplo sencillo que muestra cómo se utiliza la etiqueta <article> para definir un artículo de blog:
<article>
<h2>
El impacto de la tecnología en la sociedad
</h2>
<p>
La tecnología mejora nuestras vidas.
</p>
<a href="leer-mas.html">
Leer más
</a>
</article>
En este ejemplo, el contenido dentro de la etiqueta <article> describe un artículo sobre el impacto de la tecnología. El título (<h2>) define el tema, el párrafo (<p>) proporciona detalles, y el enlace (<a>) permite al usuario acceder a más información.
¿Cuándo usar <article>?
La etiqueta <article> debe utilizarse para definir contenido que tenga un significado por sí mismo y que pueda ser distribuido o reutilizado fuera del contexto de la página web. Aquí algunos ejemplos de cuándo utilizarla:
- Entradas de blog: Cada publicación puede ser un
<article>separado. - Comentarios en un foro: Un comentario en un foro puede ser tratado como un artículo.
- Noticias: Un artículo de noticias o una actualización importante.
- Publicaciones en redes sociales: Algunas publicaciones pueden representarse de manera autónoma.
Ejemplos adicionales de uso
La etiqueta <article> puede incluir varios otros elementos, como imágenes y enlaces. Aquí tienes más ejemplos:
<article>
<h2>
Cómo hacer una receta de pastel de chocolate
</h2>
<p>
Aprende a preparar un delicioso pastel de chocolate en solo 30 minutos.
</p>
<img src="pastel-de-chocolate.jpg" alt="Imagen del pastel de chocolate">
<ahref="receta-completa.html">
Ver receta completa
</a>
</article>
En este caso, el <article> describe una receta de cocina, con una imagen y un enlace a la receta completa.
Consideraciones sobre accesibilidad y SEO
El uso adecuado de la etiqueta <article> no solo mejora la organización del contenido, sino que también tiene beneficios para la accesibilidad y el SEO:
- Accesibilidad: Al usar la etiqueta
<article>, los usuarios de tecnologías asistivas pueden identificar rápidamente los bloques de contenido relevantes y navegar más fácilmente. - SEO: Los motores de búsqueda pueden identificar y indexar mejor el contenido de cada artículo, lo que puede ayudar a mejorar el ranking de tu página en los resultados de búsqueda.
Más ejemplos de contenido en un <article>
Los artículos pueden incluir cualquier tipo de contenido que tenga un contexto independiente. Aquí tienes algunos ejemplos adicionales:
<article>
<h2>10 consejos para mejorar tu productividad</h2>
<p>Descubre cómo optimizar tu tiempo y ser más eficiente en tu día a día.</p>
<a href="leer-mas.html">Leer más</a>
</article>
Este artículo proporciona consejos prácticos sobre productividad y también incluye un enlace para obtener más información.