Etiqueta article en HTML

¿Qué es la etiqueta <article> en HTML?

La etiqueta <article> en HTML5 es utilizada para definir un contenido autónomo y de importancia en una página web. Por ejemplo, una entrada de blog, una revisión, una publicación en un foro, etc.

Este contenido se mostrará de forma independiente y será más fácil de distribuir o reutilizar en otros contextos, como feed de noticias o búsqueda en un motor.

La etiqueta <article> puede tener encabezados, párrafos, listas, imágenes y otros elementos HTML como hijos.

Características de la etiqueta <article>

Además de lo mencionado anteriormente, la etiqueta <article> de HTML5 tiene las siguientes características:

  • Es un contenedor semántico: La etiqueta <article> permite a los desarrolladores web definir el contenido principal en una página web, mejorando la estructura y accesibilidad del sitio.
  • Mejora el SEO: Al marcar claramente el contenido principal de una página web, se mejora la capacidad de los motores de búsqueda para indexar el contenido y mostrar los resultados de búsqueda más relevantes.
  • Reutilización: Debido a que el contenido dentro de una etiqueta <article> es autónomo, se puede reutilizar en otras partes del sitio o incluso en otras páginas web.
  • Accesibilidad: Al utilizar la etiqueta <article> para identificar contenido autónomo, se facilita la navegación por parte de los usuarios de lectores de pantalla y otros dispositivos de accesibilidad.

Ejemplo de uso

Aquí te muestro un ejemplo de uso de la etiqueta <article> de HTML5:

<!DOCTYPE html> <html> <head> <title>Ejemplo de uso de la etiqueta article en HTML5</title> </head> <body> <header> <h1>Bienvenido a mi blog</h1> </header> <nav> <ul> <li><a href="#intro">Introducción</a></li> <li><a href="#main-content">Contenido principal</a></li> <li><a href="#conclusion">Conclusión</a></li> </ul> </nav> <main> <article id="intro"> <header> <h2>Introducción al artículo</h2> </header> <p>Este es un artículo de ejemplo que muestra cómo utilizar la etiqueta article en HTML5.</p> </article> <article id="main-content"> <header> <h2>Contenido principal</h2> </header> <p>Aquí es donde se incluye el contenido principal del artículo.</p> <p>Puede incluir texto, imágenes, vídeos, tablas, etc.</p> </article> <article id="conclusion"> <header> <h2>Conclusión</h2> </header> <p>En conclusión, la etiqueta article es una herramienta útil para mejorar la estructura y accesibilidad de un sitio web.</p> </article> </main> <footer> <p>&copy; 2023 Por Mi Blog</p> </footer> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, utilizamos la etiqueta <article> para contener tres secciones distintas: introducción, contenido principal y conclusión.

Cada sección incluye un encabezado con un título y un párrafo de texto. Al utilizar la etiqueta <article> para identificar estas secciones, se mejora la estructura y accesibilidad de la página.

Atributos

La etiqueta <article> en HTML5 no tiene atributos específicos, pero puede utilizar los atributos globales como:

  • class: Este atributo se utiliza para identificar un estilo en un archivo CSS. Por ejemplo, <article class="news-story">
  • id: Este atributo se utiliza para identificar de manera única un elemento en una página HTML. Por ejemplo, <article id="main-story">
  • style: Este atributo se utiliza para aplicar estilos directamente a un elemento. Por ejemplo, <article style="background-color: lightgray;">
  • title: Este atributo se utiliza para proporcionar información adicional sobre el elemento. Por ejemplo, <article title="Artículo Principal">
  • lang: Este atributo se utiliza para especificar el idioma del contenido en un elemento. Por ejemplo, <article lang="es">

Cada uno de estos atributos se puede utilizar para personalizar el aspecto y la funcionalidad de la etiqueta <article> en HTML5.

Sin embargo, es importante tener en cuenta que la mayoría de los estilos y la funcionalidad se deben proporcionar a través de archivos CSS externos para mantener una separación clara entre el contenido y el diseño.

Ejemplos con atributos

A continuación, se muestra un ejemplo de uso de la etiqueta <article> con atributos en HTML5:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Ejemplo de etiqueta article con atributos</title> </head> <body> <!-- Artículo principal --> <article id="noticia-principal" class="noticia" lang="es" title="Artículo de Noticias"> <h2>Título de la Noticia</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis elit a sapien posuere, eu faucibus ante pharetra. Sed vel blandit velit. Aliquam rhoncus nulla vel velit commodo, vel rhoncus sapien bibendum.</p> <p>Donec euismod dui eu dui fringilla, in congue sem tempor. Nulla facilisi. Nunc id dictum eros. Maecenas at diam vestibulum, convallis mi sit amet, volutpat mi.</p> </article> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <article> para contener una noticia en la página. Además, se utilizan varios atributos para personalizar el elemento:

  • id: se utiliza para identificar de manera única el elemento con el valor noticia-principal.
  • class: se utiliza para identificar un estilo con el valor noticia.
  • lang: se utiliza para especificar el idioma del contenido con el valor es.
  • title: se utiliza para proporcionar información adicional sobre el elemento con el valor Artículo de Noticias.

Este ejemplo muestra cómo utilizar la etiqueta <article> junto con los atributos en HTML5 para crear una estructura de contenido clara y accesible para los usuarios.

Más ejemplos

Aquí hay tres ejemplos de código HTML5 que utilizan la etiqueta <article>:

Ejemplo 1:

<!DOCTYPE html> <html> <head> <title>Ejemplo de etiqueta article</title> </head> <body> <header> <h1>Noticias sobre tecnología</h1> </header> <nav> <ul> <li><a href="#noticia1">Noticia 1</a></li> <li><a href="#noticia2">Noticia 2</a></li> <li><a href="#noticia3">Noticia 3</a></li> </ul> </nav> <main> <article id="noticia1"> <header> <h2>Nuevo lanzamiento de smartphone</h2> <p>Publicado el: <time datetime="2022-01-01">01 de enero de 2022</time></p> </header> <p>Se ha anunciado el lanzamiento de un nuevo smartphone con características avanzadas, como una cámara de alta resolución y un procesador más rápido que su predecesor.</p> <p>Este nuevo dispositivo también incluye una batería de mayor duración y una pantalla de alta definición, lo que lo hace perfecto para aquellos que necesitan un teléfono potente y eficiente.</p> </article> <article id="noticia2"> <header> <h2>Lanzamiento de un nuevo sistema operativo</h2> <p>Publicado el: <time datetime="2022-02-01">01 de febrero de 2022</time></p> </header> <p>Se ha anunciado el lanzamiento de un nuevo sistema operativo que promete mejorar la experiencia de usuario y aumentar la seguridad de los dispositivos.</p> <p>Este sistema operativo incluye nuevas funciones y mejoras en el rendimiento, lo que lo hace ideal para aquellos que quieren un sistema más avanzado y seguro.</p> </article> <article id="noticia3"> <header> <h2>Presentación de un nuevo servicio en la nube</h2> <p>Publicado el: <time datetime="2022-03-01">01 de marzo de 2022</time></p> </header> <p>Se ha presentado un nuevo servicio en la nube que permite almacenar y compartir archivos de manera segura y eficiente en la nube.</p> <p>Este servicio incluye funciones avanzadas de colaboración y seguridadad.</p> </article> </main> </body> </html>
Lenguaje del código: HTML, XML (xml)

Ejemplo 2:

<!DOCTYPE html> <html> <head> <title>Ejemplo de artículos</title> </head> <body> <header> <h1>Noticias</h1> </header> <article> <header> <h2>Título del artículo 1</h2> <p>Fecha: <time>2022-12-31</time></p> </header> <p>Contenido del artículo 1.</p> <footer> <p>Autor: <a href="#">John Doe</a></p> </footer> </article> <article> <header> <h2>Título del artículo 2</h2> <p>Fecha: <time>2022-12-31</time></p> </header> <p>Contenido del artículo 2.</p> <footer> <p>Autor: <a href="#">Jane Doe</a></p> </footer> </article> </body> </html>
Lenguaje del código: HTML, XML (xml)

Ejemplo 3:

<!DOCTYPE html> <html> <head> <title>Ejemplo de artículo en HTML5</title> </head> <body> <header> <h1>Mi primer artículo en HTML5</h1> <nav> <ul> <li><a href="#seccion1">Sección 1</a></li> <li><a href="#seccion2">Sección 2</a></li> </ul> </nav> </header> <main> <article> <h2 id="seccion1">Sección 1</h2> <p>Este es el contenido de la sección 1 del artículo. Aquí se puede escribir todo tipo de información relevante para el usuario.</p> <h2 id="seccion2">Sección 2</h2> <p>Este es el contenido de la sección 2 del artículo. Aquí se puede escribir todo tipo de información relevante para el usuario.</p> </article> </main> <footer> <p>Copyright © 2023 por Mi nombre</p> </footer> </body> </html>
Lenguaje del código: HTML, XML (xml)