LabEx
Iniciar SesiónÚnete Gratis

Utiliza la etiqueta <time> para HTML semántico

CSSCSSBeginner
Practicar Ahora

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") css/BasicStylingGroup -.-> css/text_styling("Text Styling") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills css/selectors -.-> lab-451085{{"Utiliza la etiqueta

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.

HTML file with time tag example

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 <time>

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

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.

Relacionado CSS Cursos
Inicio rápido con CSS

Inicio rápido con CSS

CSS
Principiante
Construir una aplicación web de Tres en Raya

Construir una aplicación web de Tres en Raya

HTMLCSSJavaScript
Principiante
Creación de un juego web de Golpear al Topo

Creación de un juego web de Golpear al Topo

HTMLCSSJavaScript
Principiante