Utiliza la etiqueta <time> para HTML semántico

Introducción

En este laboratorio, explorarás la etiqueta semántica HTML5 <time> y aprenderás cómo usarla de manera efectiva para representar fechas y horas en documentos web. El laboratorio se centra en comprender las características clave de la etiqueta <time>, como proporcionar datos temporales legibles por máquina mientras se mantiene un texto legible por humanos, y demostrar su implementación en diversos contextos HTML.

A través de un enfoque paso a paso, crearás un archivo HTML, agregarás etiquetas <time> con atributos datetime y comprenderás cómo este elemento semántico mejora la accesibilidad web y proporciona información estructurada sobre fechas y horas. Al final del laboratorio, tendrás experiencia práctica en el uso de la etiqueta <time> para mejorar el significado semántico de los datos temporales en las páginas web.

Comprender los conceptos básicos de la etiqueta

En este paso, aprenderás sobre la etiqueta HTML5 <time>, un elemento semántico diseñado para representar fechas y horas en un formato legible por máquina. La etiqueta <time> ayuda a mejorar la accesibilidad web y proporciona información estructurada sobre los datos temporales.

Las características clave de la etiqueta <time> incluyen:

Representa un período específico de tiempo
Puede contener texto legible por humanos
Admite un atributo datetime legible por máquina
Mejora el significado semántico de la información de fecha y hora en las páginas web

A continuación, se muestra un ejemplo básico para ilustrar la etiqueta <time>:

<p>The conference is scheduled for <time>2023-09-15</time>.</p>

En este ejemplo, la etiqueta <time> permite tanto a los lectores humanos ver la fecha como a las máquinas analizar el formato exacto de la fecha.

Otro ejemplo que muestra diferentes formas de usar la etiqueta <time>:

<article>
  <h2>Lab Publication</h2>
  <p>Published on <time datetime="2023-06-20">June 20, 2023</time></p>
</article>

El atributo datetime proporciona un formato de fecha estándar legible por máquina, mientras que el texto visible sigue siendo amigable para el usuario.

Crear un archivo HTML con la etiqueta

En este paso, crearás un archivo HTML que demuestre el uso de la etiqueta <time>. Utilizarás el WebIDE para crear y editar un documento HTML en el directorio ~/project.

Primero, navega al directorio del proyecto y crea un nuevo archivo HTML llamado event-schedule.html:

cd ~/project

Abre el WebIDE y crea un nuevo archivo llamado event-schedule.html. Luego, agrega el siguiente contenido HTML:

touch event-schedule.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>The annual tech conference will be held on <time>2023-09-15</time>.</p>
    </article>
  </body>
</html>

Ejemplo de salida cuando se ve en un navegador web:

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Este ejemplo demuestra cómo usar la etiqueta <time> dentro de un párrafo para representar una fecha específica. La etiqueta proporciona un significado semántico a la fecha, lo que facilita que los navegadores y las tecnologías de asistencia comprendan la información temporal.

Agregar el atributo datetime a la etiqueta

En este paso, aprenderás cómo mejorar la etiqueta <time> agregando el atributo datetime. El atributo datetime proporciona un formato legible por máquina para fechas y horas, lo que hace que el contenido sea más accesible y tenga un significado semántico.

Abre el archivo event-schedule.html en el WebIDE y modifica la etiqueta <time> existente para incluir el atributo datetime:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Event Schedule</title>
  </head>
  <body>
    <h1>Upcoming Tech Conference</h1>
    <article>
      <h2>Conference Details</h2>
      <p>
        The annual tech conference will be held on
        <time datetime="2023-09-15">September 15, 2023</time>.
      </p>

      <h3>Session Timing</h3>
      <p>Morning keynote starts at <time datetime="09:00">9:00 AM</time>.</p>
    </article>
  </body>
</html>

El atributo datetime ofrece varios beneficios:

Proporciona un formato de fecha/hora estándar y legible por máquina
Permite un texto de visualización diferente al valor real de la fecha/hora
Admite varios formatos, como fechas completas, horas y combinaciones de fecha y hora

Ejemplos de formatos para el atributo datetime:

Fecha completa: 2023-09-15
Hora: 09:00
Fecha y hora: 2023-09-15T09:00
Con zona horaria: 2023-09-15T09:00Z

Ejemplo de salida cuando se ve en un navegador web:

Upcoming Tech Conference

Conference Details
The annual tech conference will be held on September 15, 2023.

Session Timing
Morning keynote starts at 9:00 AM.

Explorar la etiqueta con el atributo pubdate

En este paso, aprenderás sobre el atributo pubdate, un atributo booleano especial para la etiqueta <time> que indica la fecha de publicación de un artículo o una entrada de blog. Aunque ahora se considera obsoleto en HTML5, entender su uso histórico ofrece información sobre el HTML semántico.

Abre el archivo event-schedule.html en el WebIDE y modifica el contenido para incluir un ejemplo de entrada de blog con el atributo pubdate:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Blog Post</title>
  </head>
  <body>
    <article>
      <h1>Latest Tech Insights</h1>
      <header>
        <h2>HTML5 Semantic Elements</h2>
        <p>
          Published on
          <time datetime="2023-06-20" pubdate>June 20, 2023</time>
        </p>
      </header>

      <p>In this article, we explore the semantic meaning of HTML5 tags...</p>

      <footer>
        <p>
          Updated on
          <time datetime="2023-06-22">June 22, 2023</time>
        </p>
      </footer>
    </article>
  </body>
</html>

Puntos clave sobre el atributo pubdate:

Es un atributo booleano (no se requiere valor)
Indica la fecha de publicación de un artículo
Deprecado en HTML5, pero todavía es compatible con muchos navegadores
Típicamente se utiliza dentro de etiquetas <article>

Ejemplo de salida cuando se ve en un navegador web:

Latest Tech Insights

HTML5 Semantic Elements
Published on June 20, 2023

In this article, we explore the semantic meaning of HTML5 tags...

Updated on June 22, 2023

Nota: Si bien pubdate ahora se considera obsoleto, demuestra la evolución del HTML semántico y la importancia de proporcionar información de fecha legible por máquina.

Verificar la implementación de la etiqueta

En este último paso, revisarás y validarás la implementación de la etiqueta <time> en tu documento HTML. Crearás un ejemplo completo que demuestre las diversas formas de usar la etiqueta <time> con diferentes atributos y contextos.

Abre el archivo event-schedule.html en el WebIDE y actualízalo con un ejemplo completo:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tech Event Showcase</title>
  </head>
  <body>
    <article>
      <h1>Web Development Conference</h1>

      <section>
        <h2>Event Details</h2>
        <p>
          Conference Date:
          <time datetime="2023-09-15">September 15, 2023</time>
        </p>
        <p>
          Start Time:
          <time datetime="09:00">9:00 AM</time>
        </p>
      </section>

      <section>
        <h2>Blog Post</h2>
        <article>
          <h3>HTML5 Semantic Elements</h3>
          <p>
            Published on
            <time datetime="2023-06-20" pubdate>June 20, 2023</time>
          </p>
          <p>
            Last Updated:
            <time datetime="2023-06-22">June 22, 2023</time>
          </p>
        </article>
      </section>
    </article>
  </body>
</html>

Lista de verificación clave de la implementación:

Múltiples etiquetas <time> con diferentes contextos
Uso del atributo datetime para fechas legibles por máquina
Inclusión de texto de fecha legible por humanos
Demostración del atributo pubdate
Estructura HTML semántica con etiquetas <article> y <section>

Ejemplo de salida cuando se ve en un navegador web:

Web Development Conference

Event Details
Conference Date: September 15, 2023
Start Time: 9:00 AM

Blog Post
HTML5 Semantic Elements
Published on June 20, 2023
Last Updated: June 22, 2023

Resumen

En este laboratorio, los participantes aprendieron sobre la etiqueta HTML5 <time>, un elemento semántico diseñado para representar fechas y horas en un formato legible por máquina. El laboratorio guió a los aprendices a través de la comprensión de las características clave de la etiqueta, incluyendo su capacidad para contener texto legible por humanos y admitir un atributo datetime legible por máquina, lo que mejora la accesibilidad web y proporciona información temporal estructurada.

A través de ejercicios prácticos, los participantes crearon un archivo HTML que demostró la implementación de la etiqueta <time>, explorando su uso con diferentes atributos como datetime y pubdate. Practicaron la creación de marcado semántico que permite tanto a los lectores humanos como a las máquinas interpretar la información de fecha y hora de manera efectiva, reforzando la importancia de utilizar elementos HTML semánticos en el desarrollo web.