Utiliser la balise <time> pour un HTML sémantique

Introduction

Dans ce laboratoire (lab), vous allez explorer la balise HTML5 sémantique <time> et apprendre à l'utiliser efficacement pour représenter les dates et les heures dans les documents web. Le laboratoire se concentre sur la compréhension des principales caractéristiques de la balise <time>, telles que la fourniture de données temporelles lisibles par machine tout en conservant un texte lisible par l'homme, et sur la démonstration de son implémentation dans différents contextes HTML.

Grâce à une approche étape par étape, vous allez créer un fichier HTML, ajouter des balises <time> avec des attributs datetime, et comprendre comment cet élément sémantique améliore l'accessibilité web et fournit des informations structurées sur les dates et les heures. À la fin du laboratoire, vous aurez acquis une expérience pratique dans l'utilisation de la balise <time> pour améliorer la signification sémantique des données temporelles dans les pages web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

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{{"Utiliser la balise pour un HTML sémantique"}} css/properties -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} html/lang_decl -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} css/text_styling -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} html/text_head -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} javascript/dom_select -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} javascript/dom_manip -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} javascript/dom_traverse -.-> lab-451085{{"Utiliser la balise pour un HTML sémantique"}} end

Comprendre les bases de la balise

Dans cette étape, vous allez apprendre à connaître la balise HTML5 <time>, un élément sémantique conçu pour représenter les dates et les heures dans un format lisible par machine. La balise <time> contribue à améliorer l'accessibilité web et fournit des informations structurées sur les données temporelles.

Les principales caractéristiques de la balise <time> sont les suivantes :

Représente une période spécifique dans le temps
Peut contenir un texte lisible par l'homme
Prend en charge un attribut datetime lisible par machine
Améliore la signification sémantique des informations de date et d'heure sur les pages web

Voici un exemple de base pour illustrer la balise <time> :

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

Dans cet exemple, la balise <time> permet aux lecteurs humains de voir la date et aux machines d'analyser le format exact de la date.

Un autre exemple montrant différentes façons d'utiliser la balise <time> :

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

L'attribut datetime fournit un format de date standardisé lisible par machine, tandis que le texte visible reste convivial pour l'utilisateur.

Créer un fichier HTML avec la balise

Dans cette étape, vous allez créer un fichier HTML qui illustre l'utilisation de la balise <time>. Vous utiliserez l'éditeur WebIDE pour créer et modifier un document HTML dans le répertoire ~/project.

Tout d'abord, accédez au répertoire du projet et créez un nouveau fichier HTML appelé event-schedule.html :

cd ~/project

Ouvrez l'éditeur WebIDE et créez un nouveau fichier nommé event-schedule.html. Ensuite, ajoutez le contenu HTML suivant :

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>

Exemple de rendu lorsqu'il est consulté dans un navigateur web :

Notes : En savoir plus sur Comment prévisualiser des fichiers HTML dans l'éditeur WebIDE.

Cet exemple montre comment utiliser la balise <time> dans un paragraphe pour représenter une date spécifique. La balise attribue un sens sémantique à la date, facilitant ainsi la compréhension de l'information temporelle par les navigateurs et les technologies d'assistance.

Ajouter l'attribut datetime à la balise

Dans cette étape, vous allez apprendre à améliorer la balise <time> en ajoutant l'attribut datetime. L'attribut datetime fournit un format de date et d'heure lisible par machine, rendant le contenu plus accessible et plus significatif sémantiquement.

Ouvrez le fichier event-schedule.html dans l'éditeur WebIDE et modifiez la balise <time> existante pour inclure l'attribut 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>

L'attribut datetime offre plusieurs avantages :

Fournit un format de date/heure standardisé et lisible par machine
Permet d'avoir un texte d'affichage différent de la valeur réelle de la date/heure
Prend en charge différents formats tels que les dates complètes, les heures et les combinaisons date-heure

Exemples de formats pour l'attribut datetime :

Date complète : 2023-09-15
Heure : 09:00
Date-heure : 2023-09-15T09:00
Avec fuseau horaire : 2023-09-15T09:00Z

Exemple de rendu lorsqu'il est consulté dans un navigateur 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.

Explorer la balise avec l'attribut pubdate

Dans cette étape, vous allez apprendre à connaître l'attribut pubdate, un attribut booléen spécial pour la balise <time> qui indique la date de publication d'un article ou d'un billet de blog. Bien qu'il soit maintenant considéré comme obsolète dans HTML5, comprendre son utilisation historique permet de mieux saisir le fonctionnement du HTML sémantique.

Ouvrez le fichier event-schedule.html dans l'éditeur WebIDE et modifiez le contenu pour inclure un exemple de billet de blog avec l'attribut 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>

Points clés concernant l'attribut pubdate :

C'est un attribut booléen (aucune valeur n'est requise)
Indique la date de publication d'un article
Désapprouvé dans HTML5, mais toujours pris en charge par de nombreux navigateurs
Généralement utilisé à l'intérieur des balises <article>

Exemple de rendu lorsqu'il est consulté dans un navigateur 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

Note : Bien que pubdate soit maintenant considéré comme obsolète, il illustre l'évolution du HTML sémantique et l'importance de fournir des informations de date lisibles par machine.

Vérifier l'implémentation de la balise

Dans cette étape finale, vous allez examiner et valider l'implémentation de la balise <time> dans votre document HTML. Vous allez créer un exemple complet qui illustre les différentes façons d'utiliser la balise <time> avec différents attributs et dans différents contextes.

Ouvrez le fichier event-schedule.html dans l'éditeur WebIDE et mettez-le à jour avec un exemple complet :

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

Liste de vérification clé pour l'implémentation :

Plusieurs balises <time> dans différents contextes
Utilisation de l'attribut datetime pour les dates lisibles par machine
Inclusion de texte de date lisible par l'homme
Démonstration de l'attribut pubdate
Structure HTML sémantique avec les balises <article> et <section>

Exemple de rendu lorsqu'il est consulté dans un navigateur 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

Résumé

Dans ce laboratoire (lab), les participants ont appris à connaître la balise HTML5 <time>, un élément sémantique conçu pour représenter les dates et les heures dans un format lisible par machine. Le laboratoire a guidé les apprenants dans la compréhension des caractéristiques clés de cette balise, notamment sa capacité à contenir un texte lisible par l'homme et à prendre en charge un attribut datetime lisible par machine, ce qui améliore l'accessibilité du web et fournit des informations temporelles structurées.

Grâce à des exercices pratiques, les participants ont créé un fichier HTML illustrant l'implémentation de la balise <time>, en explorant son utilisation avec différents attributs tels que datetime et pubdate. Ils ont pratiqué la création de balisage sémantique permettant aux lecteurs humains et aux machines d'interpréter efficacement les informations de date et d'heure, renforçant ainsi l'importance de l'utilisation d'éléments HTML sémantiques dans le développement web.