HTML Academy · Leçon

`time`, `address` et `mark`

Baliserez sémantiquement les dates, les coordonnées et le texte mis en évidence.

`time`, `address` et `mark` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément time

L’élément <time> balise les dates et les heures dans un format lisible par machine :

<p>Published on <time datetime="2025-01-15">January 15, 2025</time>.</p>
<p>The meeting is at <time datetime="14:30">2:30 PM</time>.</p>
<p>The event runs from
  <time datetime="2025-01-15">Jan 15</time> to
  <time datetime="2025-01-20">Jan 20</time>.
</p>

Formats de l’attribut datetime

L’attribut datetime doit contenir une chaîne valide représentant une date ou une heure :

<time datetime="2025-01-15">January 15</time>        <!-- date -->
<time datetime="14:30">2:30 PM</time>               <!-- time -->
<time datetime="2025-01-15T14:30">Meeting time</time> <!-- date+time -->
<time datetime="2025-W03">Week 3, 2025</time>        <!-- week -->
<time datetime="2025-01">January 2025</time>         <!-- year-month -->
<time datetime="P3D">3 days</time>                  <!-- duration -->

Pourquoi time est important

Avantages de l’utilisation de <time> :

Les moteurs de recherche comprennent la date de votre contenu
Les navigateurs et les applications peuvent ajouter la date à un calendrier
Les lecteurs d’écran peuvent prononcer correctement les dates
JavaScript peut analyser l’attribut datetime pour formater l’affichage

Formatage dynamique des dates

Utilisez JavaScript pour formater les dates de l’attribut datetime :

<time id="event-time" datetime="2025-06-15T10:00">June 15, 2025</time>

<script>
const el = document.getElementById('event-time');
const date = new Date(el.getAttribute('datetime'));
el.textContent = date.toLocaleDateString('en-US', {
  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
});
// Output: Sunday, June 15, 2025
</script>

L’élément address

L’élément <address> balise les coordonnées de contact de l’élément <article> ou <body> le plus proche :

<address>
  <p>Jane Smith</p>
  <p><a href="mailto:jane@example.com">jane@example.com</a></p>
  <p><a href="tel:+15555550100">(555) 555-0100</a></p>
  <p>123 Main Street, New York, NY 10001</p>
</address>

address pour les coordonnées d’un article

Utilisez address dans un article pour baliser les coordonnées de l’auteur :

<article>
  <h2>HTML Guide</h2>
  <address>
    Written by
    <a href="mailto:jane@example.com" rel="author">Jane Smith</a>
  </address>
  <p>Content...</p>
</article>

Ce à quoi address ne sert pas

L’élément <address> sert uniquement aux informations de contact, et non aux adresses quelconques :

<!-- BAD: address for a location with no contact info -->
<address>
  Empire State Building, New York
</address>

<!-- Better: use p or a structured element -->
<p>Empire State Building, New York</p>

<!-- GOOD: address for contact information -->
<address>
  <a href="mailto:support@example.com">Contact Support</a>
</address>

L’élément mark

L’élément  met en évidence un texte pertinent dans son contexte :

<p>
  Search results for "HTML5":
  The <mark>HTML5</mark> specification was finalized in 2014.
  <mark>HTML5</mark> introduced many new semantic elements.
</p>
<!-- Default styling: yellow background -->
<!-- Semantic use: highlighting search terms, annotations -->
<!-- NOT for general styling — use span for that -->

Mise en forme de mark

Personnalisez la surbrillance jaune par défaut de mark :

mark {
  background-color: #fef08a;
  color: inherit;  /* keep text color from parent */
  padding: 0.1em 0.2em;
  border-radius: 3px;
}

/* High contrast mode: */
@media (forced-colors: active) {
  mark {
    background-color: Highlight;
    color: HighlightText;
  }
}

mark ou strong ou em

Choisir entre les éléments de mise en évidence :

 — mis en évidence parce qu’il est pertinent dans le contexte actuel (résultats de recherche)
 — contenu important en toutes circonstances
 — accentuation qui modifie le sens
 — mise en forme purement visuelle, sans sémantique

Rechercher et mettre en évidence

Mise en œuvre pratique : mettez en évidence les termes recherchés dans les résultats :

function highlightText(text, query) {
  if (!query) return text;
  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escaped})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}
// document.getElementById('result').innerHTML =
//   highlightText(result.title, searchQuery);

Vérification rapide

À quoi sert l’attribut datetime lisible par machine ?

Récapitulatif : time, address et mark

Éléments sémantiques en ligne :

<time datetime=""> — dates et heures lisibles par machine
<address> — coordonnées de contact de l’article ou de la page la plus proche
 — mises en évidence pertinentes dans leur contexte (termes recherchés)
datetime utilise le format ISO 8601 : YYYY-MM-DD, HH:MM
mark utilise par défaut un arrière-plan jaune ; personnalisez-le avec CSS

Questions Fréquemment Posées

La leçon « `time`, `address` et `mark` » est-elle gratuite ?

Oui — le texte complet de « `time`, `address` et `mark` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « `time`, `address` et `mark` » ?

Baliserez sémantiquement les dates, les coordonnées et le texte mis en évidence. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « `time`, `address` et `mark` » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy