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.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

Aprende HTML y CSS en un fin de semana (Spanish Edition)

Ver Ofertas en Amazon

HTML5: La Guía Completa para Formatear Sitios Web...

Ver Ofertas en Amazon

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)