Dominando el HTML semántico con la etiqueta Article

Introducción

El HTML semántico es un concepto importante en el desarrollo web porque ayuda a los motores de búsqueda y a las tecnologías asistivas a comprender mejor el contenido de un sitio web. Una de las etiquetas que se pueden utilizar para crear HTML semántico es la etiqueta <article>. En este laboratorio, aprenderemos cómo utilizar la etiqueta <article> y cómo ayuda a crear páginas web accesibles.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Agrega la estructura HTML5

Crea un archivo index.html en tu editor de texto favorito y guarda el archivo.

Agrega la estructura básica HTML5 al archivo index.html. Esto incluye la declaración <!DOCTYPE html>, el elemento <html>, el elemento <head> y el elemento <body>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <!-- Agrega el contenido aquí -->
  </body>
</html>

Agrega una etiqueta

Dentro del elemento <body>, agrega una etiqueta <article>. Esta etiqueta contendrá el contenido principal de tu página web. La etiqueta <article> tiene una etiqueta de apertura y una de cierre.

<article>
  <!-- Agrega el contenido principal aquí -->
</article>

Agrega contenido al artículo

Dentro de la etiqueta <article>, agrega algo de contenido que represente el contenido principal de la página web. Esto puede ser cualquier cosa, como un artículo, una publicación de blog o una descripción de producto.

<article>
  <h1>Mi increíble artículo</h1>
  <p>
    Este es el contenido principal de mi página web. Es un artículo realmente
    genial que todos deberían leer.
  </p>
  <p>Aquí hay algunas razones por las que:</p>
  <ul>
    <li>Está bien escrito</li>
    <li>Es informativo</li>
    <li>Es divertido</li>
  </ul>
</article>

Agrega la etiqueta

Dentro de la etiqueta <article>, agrega una etiqueta <footer> para proporcionar información adicional sobre el contenido.

<article>
  <h1>Mi increíble artículo</h1>
  <p>
    Este es el contenido principal de mi página web. Es un artículo realmente
    genial que todos deberían leer.
  </p>
  <p>Aquí hay algunas razones por las que:</p>
  <ul>
    <li>Está bien escrito</li>
    <li>Es informativo</li>
    <li>Es divertido</li>
  </ul>
  <footer>
    <p>
      Publicado el
      <time datetime="2022-09-15">15 de septiembre de 2022</time> por
      <a href="#">John Doe</a>
    </p>
  </footer>
</article>

Guarda el archivo index.html y ábrelo en un navegador web para ver la página web final con la información de contacto.

Resumen

Usar la etiqueta <article> es una forma fácil de crear HTML semántico y hacer que tu sitio web sea más accesible. Al usar la etiqueta <article>, puedes proporcionar información adicional sobre el contenido principal de tu página web, lo que puede ayudar a los motores de búsqueda y a las tecnologías asistivas a entender mejor tu sitio web. Recuerda siempre validar tu código HTML para asegurarte de que está libre de errores y cumple con todos los estándares necesarios.

Sección de artículo HTML