Maîtriser la Sémantique et les APIs HTML5 — Niveau Intermédiaire

Name: Maîtriser la Sémantique et les APIs HTML5 — Niveau Intermédiaire
Author: Admin Preparetoi.academy

HTML5 a transformé le développement web en offrant des outils natifs puissants qui éliminent le besoin de bibliothèques tierces pour de nombreuses fonctionnalités clés. Ce cours vous guide pas à pas dans la maîtrise des mécanismes avancés de HTML5, des formulaires intelligents aux APIs de stockage, en passant par le dessin 2D sur canvas et les techniques d'accessibilité professionnelles.

Intermédiaire Français 30 min

01 La sémantique HTML5 avancée : structurer le contenu avec précision

La sémantique en HTML5 va bien au-delà de simples balises de présentation. Chaque élément sémantique communique une signification précise aux navigateurs, aux moteurs de recherche et aux technologies d'assistance. Imaginez un document HTML comme un journal imprimé : il n'est pas constitué d'un seul bloc de texte indifférencié, mais d'articles, de titres, de colonnes, d'encadrés et de pieds de page. HTML5 reproduit cette organisation naturelle dans le monde numérique. Les éléments <article>, <section>, <aside>, <nav>, <header>, <footer> et <main> constituent la colonne vertébrale d'une architecture HTML bien pensée. Utiliser <div> pour tout est comparable à étiqueter chaque tiroir de votre bureau avec le même mot "divers" : fonctionnel, mais catastrophique pour la lisibilité. Un balisage sémantique correct améliore le référencement naturel, facilite la maintenance du code et rend votre application accessible à tous les utilisateurs, y compris ceux qui utilisent des lecteurs d'écran.

L'élément <article> représente un contenu autonome et redistribuable (billet de blog, fiche produit). L'élément <section> regroupe des contenus thématiquement liés. Attention : ⚠ ne jamais utiliser <main> plus d'une fois par document. Bonne pratique : ✓ inclure un titre h2-h6 dans chaque <section> pour garantir une hiérarchie logique.

Élément	Rôle sémantique	Cas d'usage typique
<article>	Contenu autonome et redistribuable	Billet de blog, fiche produit, commentaire
<section>	Regroupement thématique	Chapitre de page, onglet de contenu
<aside>	Contenu complémentaire indirect	Barre latérale, encadré, publicité
<nav>	Bloc de navigation principal	Menu, fil d'Ariane, pagination
<figure> + <figcaption>	Média avec légende associée	Image illustrative, graphique, extrait de code

HTML5 page-actualite.html

<!-- Structure sémantique d'une page d'actualités -->
<body>
  <header>
    <nav aria-label="Menu principal">...</nav>
  </header>
  <main>
    <section aria-labelledby="titre-une">
      <h2 id="titre-une">À la une</h2>
      <article>
        <h3>Lancement de la mission spatiale Orion-7</h3>
        <time datetime="2025-09-22T10:30">22 septembre 2025</time>
        <figure>
          <img src="orion7-lancement.webp" alt="Décollage de la fusée Orion-7">
          <figcaption>La fusée Orion-7 au décollage © ESA 2025</figcaption>
        </figure>
        <p>Contenu détaillé de l'article...</p>
      </article>
    </section>
    <aside aria-label="Articles populaires">
      <!-- Liens vers les articles les plus lus -->
    </aside>
  </main>
  <footer>
    <!-- Mentions légales et liens secondaires -->
  </footer>
</body>

💡

Sémantique et SEO : Les moteurs de recherche modernes analysent la hiérarchie sémantique pour extraire automatiquement les informations clés d'une page. Un balisage cohérent peut améliorer votre positionnement dans les résultats de recherche, sans aucune ligne de JavaScript supplémentaire.

02 Formulaires HTML5 avancés et validation native

Les formulaires HTML5 constituent l'une des évolutions les plus impactantes de la spécification. Avant HTML5, toute validation de données nécessitait obligatoirement du JavaScript côté client ou une soumission au serveur pour détecter les erreurs. Désormais, le navigateur prend en charge nativement des dizaines de règles de validation, des types de champs spécialisés et des interfaces adaptées à chaque contexte d'entrée. Pensez-y comme à un formulaire papier intelligent : il sait automatiquement si vous avez oublié de renseigner un champ obligatoire, si votre adresse e-mail est mal formatée ou si le nombre saisi dépasse une limite. Parmi les nouveaux types de champs, on trouve email, url, tel, number, range, date, time, color et search. Les attributs de validation comme required, min, max, pattern, minlength et maxlength permettent de définir des contraintes précises sans écrire une seule ligne de code JavaScript. La méthode setCustomValidity() permet d'aller encore plus loin en personnalisant les messages d'erreur affichés.

L'attribut pattern accepte une expression régulière pour valider le format d'un champ. L'attribut autocomplete améliore l'expérience utilisateur en activant la complétion automatique. Attention : ⚠ la validation HTML5 ne remplace pas la validation côté serveur. Toujours valider les données des deux côtés. Bonne pratique : ✓ associer chaque input à un <label> via l'attribut for/id.

Type / Attribut	Comportement natif	Exemple de valeur
type="email"	Vérifie la structure d'une adresse mail	contact@exemple.fr
type="number" + min/max	Contrôle la plage de valeurs numériques	min="1" max="99"
pattern	Valide selon une expression régulière	pattern="[A-Z]{2}[0-9]{4}"
required	Bloque la soumission si vide	Attribut booléen
type="date"	Affiche un sélecteur de date natif	min="2025-01-01"

HTML5 formulaire-reservation.html

<!-- Formulaire de réservation avec validation HTML5 native -->
<form id="form-reservation" novalidate>
  <fieldset>
    <legend>Informations du voyageur</legend>

    <label for="email-voyageur">Adresse e-mail</label>
    <input
      type="email"
      id="email-voyageur"
      name="email"
      required
      autocomplete="email"
      placeholder="vous@exemple.fr"
    />

    <label for="code-promo">Code promotionnel (format : XX-0000)</label>
    <input
      type="text"
      id="code-promo"
      name="promo"
      pattern="[A-Z]{2}-[0-9]{4}"
      title="Exemple valide : FR-2025"
    />

    <label for="date-depart">Date de départ</label>
    <input
      type="date"
      id="date-depart"
      name="depart"
      min="2025-01-01"
      required
    />
  </fieldset>
  <button type="submit">Confirmer la réservation</button>
</form>

💡

L'attribut novalidate : Ajouter novalidate sur le formulaire désactive la validation native du navigateur, ce qui vous permet de gérer les messages d'erreur vous-même en JavaScript tout en conservant les sélecteurs CSS :valid et :invalid pour le style.

03 Les attributs data-* : des métadonnées personnalisées dans le HTML

Les attributs data-* constituent l'une des fonctionnalités les plus élégantes de HTML5. Ils permettent d'embarquer des informations personnalisées directement dans les balises HTML, sans recourir à des conventions de nommage détournées comme les classes CSS fantaisistes ou les commentaires HTML. Imaginons que vous construisez une interface de gestion de stock : chaque ligne de votre tableau de produits doit connaître l'identifiant du produit, sa catégorie et son niveau d'alerte. Avec les attributs data-*, vous pouvez stocker toutes ces informations directement sur l'élément DOM correspondant, puis les lire facilement depuis JavaScript via la propriété dataset. La convention de nommage est simple : l'attribut commence obligatoirement par data- suivi d'un nom en minuscules et tirets. Côté JavaScript, ce nom devient accessible en camelCase via element.dataset.nomDeLAttribut. Cette approche évite de polluer le DOM avec des champs cachés ou des variables globales, et rend le code HTML plus auto-descriptif. Les data-* sont également très utilisés pour piloter des comportements CSS via le sélecteur d'attribut.

La propriété JavaScript dataset renvoie un objet DOMStringMap donnant accès à tous les attributs data de l'élément. L'attribut data-action est très utilisé pour connecter des éléments à des comportements JavaScript. Attention : ⚠ ne pas stocker de données sensibles dans data-* car elles sont visibles dans le code source. Bonne pratique : ✓ utiliser des noms data-* sémantiques et cohérents dans tout le projet.

HTML5 catalogue-produits.html

<!-- Fiche produit enrichie avec attributs data-* -->
<div
  class="carte-produit"
  data-produit-id="SKU-4892"
  data-categorie="electronique"
  data-stock="3"
  data-alerte-stock="true"
>
  <h3>Casque audio sans fil Pro-X</h3>
  <p>Stock restant : 3 unités</p>
  <button data-action="ajouter-panier">Ajouter au panier</button>
</div>

<!-- Lecture des data-* en JavaScript -->
<script>
document.querySelector("[data-action='ajouter-panier']")
  .addEventListener("click", function(e) {
    const carte = e.target.closest(".carte-produit");
    const id     = carte.dataset.produitId;
    const stock  = Number(carte.dataset.stock);
    console.log(`Ajout produit ${id} — stock restant : ${stock}`);
  });
</script>

💡

data-* et CSS : Vous pouvez cibler des éléments selon leurs attributs data en CSS avec le sélecteur d'attribut. Par exemple, [data-alerte-stock="true"] { border: 2px solid orange; } mettra automatiquement en évidence les produits en rupture imminente, sans JavaScript.

04 L'API Web Storage : localStorage et sessionStorage

L'API Web Storage offre aux applications web un mécanisme de persistance de données côté client sans passer par les cookies. Elle propose deux espaces de stockage distincts aux comportements complémentaires : localStorage et sessionStorage. Imaginez deux bureaux : le premier dispose d'un tiroir verrouillé qui conserve vos affaires même après la fermeture des locaux (localStorage), tandis que le second se vide automatiquement chaque soir à la fermeture (sessionStorage). Cette analogie illustre parfaitement leur différence principale : la durée de vie des données. localStorage persiste jusqu'à ce que l'utilisateur ou le code la supprime explicitement, même après fermeture du navigateur. sessionStorage se réinitialise dès que l'onglet est fermé. Les deux partagent la même API synchrone (get, set, remove, clear) et une capacité de stockage d'environ 5 Mo par origine, contre quelques kilo-octets pour les cookies. Les données sont stockées sous forme de paires clé-valeur en format texte uniquement, ce qui nécessite l'utilisation de JSON.stringify() et JSON.parse() pour les objets complexes.

La méthode setItem(clé, valeur) enregistre une donnée. La méthode getItem(clé) la récupère. Attention : ⚠ Web Storage n'est accessible qu'en navigation normale, pas en mode privé sur certains navigateurs. Bonne pratique : ✓ toujours entourer les appels Storage dans un try/catch pour gérer les exceptions de quota dépassé.

Caractéristique	localStorage	sessionStorage
Durée de vie	Permanente (jusqu'à suppression)	Jusqu'à fermeture de l'onglet
Partage entre onglets	Oui (même origine)	Non (isolé par onglet)
Capacité typique	~5 Mo	~5 Mo
Cas d'usage idéal	Préférences utilisateur, thème	Formulaire multi-étapes en cours

HTML5 + JS preferences-utilisateur.html

// Sauvegarde des préférences de l'interface utilisateur
function sauvegarderPreferences(prefs) {
  try {
    localStorage.setItem(
      "prefs_interface",
      JSON.stringify(prefs)
    );
  } catch (err) {
    console.warn("Stockage impossible :", err);
  }
}

function chargerPreferences() {
  const brut = localStorage.getItem("prefs_interface");
  return brut ? JSON.parse(brut) : { theme: "clair", taille: 16 };
}

// Utilisation
sauvegarderPreferences({ theme: "sombre", taille: 18, langue: "fr" });
const config = chargerPreferences();
console.log(config.theme); // "sombre"

Terminal — Console navigateur

$ localStorage.setItem("session_id", "abc-789-xyz")
undefined
$ localStorage.getItem("session_id")
"abc-789-xyz"
$ localStorage.length
2
$ localStorage.removeItem("session_id")
undefined

💡

Événement storage : Lorsqu'un onglet modifie le localStorage, les autres onglets de la même origine reçoivent un événement window.addEventListener("storage", callback). C'est un canal de communication inter-onglets entièrement natif, sans serveur.

05 L'élément <canvas> : dessiner en 2D dans le navigateur

L'élément <canvas> transforme votre navigateur en véritable surface de dessin vectorielle et matricielle. Contrairement aux éléments HTML classiques dont l'apparence est pilotée par CSS, <canvas> est une toile vierge sur laquelle vous dessinez pixel par pixel via l'API JavaScript 2D Context. C'est l'équivalent numérique d'une feuille de papier quadrillée : le navigateur vous fournit la surface et les outils (crayon, règle, compas, pinceau), et vous composez librement. L'API 2D du canvas supporte les formes géométriques (rectangles, cercles, polygones), les tracés de courbes (Bézier, quadratiques), le texte stylisé, les dégradés, les ombres et le compositing d'images. L'élément est particulièrement adapté à la visualisation de données en temps réel, aux mini-jeux, aux éditeurs d'images embarqués, aux graphiques animés et aux signatures numériques. La performance est remarquable pour les rendus complexes grâce à l'accélération GPU disponible dans les navigateurs modernes. Il faut cependant garder à l'esprit que le contenu d'un canvas est intrinsèquement inaccessible aux lecteurs d'écran, ce qui impose d'ajouter des alternatives textuelles pour les cas d'usage critiques.

Le contexte CanvasRenderingContext2D est l'objet qui expose toutes les méthodes de dessin. Les propriétés fillStyle et strokeStyle définissent respectivement la couleur de remplissage et de contour. Attention : ⚠ toujours appeler ctx.beginPath() avant de dessiner une nouvelle forme pour éviter que les formes précédentes ne soient redessinées. Bonne pratique : ✓ utiliser requestAnimationFrame() pour les animations fluides.

HTML5 indicateur-progression.html

<!-- Anneau de progression animé avec Canvas -->
<canvas id="anneau-progres" width="160" height="160"
  aria-label="Progression de la mission : 72%">
</canvas>

<script>
const canevas = document.getElementById("anneau-progres");
const ctx     = canevas.getContext("2d");
const cx      = 80, cy = 80, rayon = 60;
const progression = 0.72;

// Cercle de fond gris
ctx.beginPath();
ctx.arc(cx, cy, rayon, 0, Math.PI * 2);
ctx.strokeStyle = "#e5e7eb";
ctx.lineWidth   = 14;
ctx.stroke();

// Arc de progression bleu
ctx.beginPath();
ctx.arc(cx, cy, rayon, -Math.PI / 2,
  -Math.PI / 2 + Math.PI * 2 * progression);
ctx.strokeStyle = "#3b82f6";
ctx.lineCap    = "round";
ctx.stroke();

// Texte central
ctx.fillStyle  = "#1e40af";
ctx.font        = "bold 22px sans-serif";
ctx.textAlign   = "center";
ctx.fillText("72%", cx, cy + 8);
</script>

💡

Canvas vs SVG : Privilégiez le canvas pour les rendus avec un grand nombre d'éléments dynamiques (particules, jeux), et SVG pour les graphiques statiques ou peu nombreux qui doivent rester accessibles et zoomables. Les deux technologies sont complémentaires.

06 Les Web Workers : calcul parallèle sans bloquer l'interface

JavaScript est historiquement un langage à fil d'exécution unique (single-threaded). Cela signifie que toute opération longue — traitement de fichier massif, algorithme de tri sur un million de lignes, calcul cryptographique — bloque l'interface et la rend non réactive le temps du traitement. L'utilisateur voit alors son navigateur "geler". Les Web Workers résolvent ce problème en permettant d'exécuter du code JavaScript dans des threads d'arrière-plan séparés du thread principal. Imaginez un restaurant : le thread principal est le serveur qui interagit avec les clients, et les Web Workers sont les cuisiniers en cuisine qui préparent les plats sans interrompre le service en salle. La communication entre le thread principal et les workers se fait exclusivement par échange de messages via postMessage() et l'événement onmessage. Les workers n'ont pas accès au DOM, mais peuvent utiliser fetch(), XMLHttpRequest, setTimeout, les Typed Arrays et de nombreuses APIs Web. Les Dedicated Workers sont les plus courants et sont liés à une seule page. Les Shared Workers peuvent être partagés entre plusieurs onglets de la même origine. Les Service Workers, eux, sont une catégorie spéciale permettant le hors-ligne et le cache.

La méthode postMessage() envoie des données vers le worker ou le thread principal. L'événement onmessage reçoit les réponses. Attention : ⚠ les données échangées sont copiées (pas partagées) sauf si on utilise des Transferable Objects. Bonne pratique : ✓ toujours terminer un worker inutilisé avec worker.terminate().

Type de Worker	Portée	Cas d'usage principal
Dedicated Worker	Une seule page	Calcul lourd, parsing de CSV
Shared Worker	Plusieurs onglets	État partagé entre onglets
Service Worker	Toute l'origine	Cache réseau, mode hors-ligne

HTML5 + JS calcul-worker.js / page.html

// ─── calcul-worker.js ───────────────────────────
// Trouve tous les nombres premiers jusqu'à N
self.onmessage = function(evt) {
  const limite   = evt.data;
  const premiers = [];
  for (let n = 2; n <= limite; n++) {
    let estPremier = true;
    for (let i = 2; i <= Math.sqrt(n); i++) {
      if (n % i === 0) { estPremier = false; break; }
    }
    if (estPremier) premiers.push(n);
  }
  self.postMessage(premiers);
};

// ─── page.html (script principal) ───────────────
const worker = new Worker("calcul-worker.js");
worker.postMessage(500000);
worker.onmessage = (evt) => {
  console.log(`${evt.data.length} nombres premiers trouvés`);
  worker.terminate();
};

💡

Transferable Objects : Pour transférer de gros buffers binaires (ArrayBuffer, ImageBitmap) entre le thread principal et un worker sans les copier, passez-les en second argument de postMessage. La propriété est transférée et devient inaccessible dans le contexte d'origine, ce qui évite la duplication mémoire.

07 Médias HTML5 : audio et vidéo avancés

Les éléments <audio> et <video> de HTML5 ont révolutionné la diffusion de médias sur le web en éliminant la dépendance à des plugins propriétaires comme Flash. Mais au-delà du simple lecteur par défaut, leur API JavaScript offre un contrôle fin sur chaque aspect de la lecture : position temporelle, volume, vitesse, sous-titres, événements de lecture et gestion des erreurs réseau. Un lecteur multimédia personnalisé est en réalité un élément <video> dont les contrôles natifs sont masqués, piloté entièrement via JavaScript. L'élément <source> permet de proposer plusieurs formats pour maximiser la compatibilité : le navigateur choisit automatiquement le premier format qu'il sait lire. L'élément <track> ajoute des sous-titres, des descriptions audio ou des métadonnées temporisées au format WebVTT. L'API Media Session permet même de personnaliser les informations affichées dans les contrôles système de l'appareil (notification Android, TouchBar Mac) lorsque votre contenu est en lecture en arrière-plan. La propriété readyState expose l'état de chargement du flux en temps réel, avec des valeurs allant de HAVE_NOTHING (0) à HAVE_ENOUGH_DATA (4).

L'attribut preload contrôle le comportement de chargement anticipé. La propriété currentTime lit ou définit la position de lecture en secondes. Attention : ⚠ l'autoplay est bloqué par défaut dans la plupart des navigateurs sans l'attribut muted. Bonne pratique : ✓ toujours fournir les formats WebM et MP4 pour une compatibilité maximale.

Attribut / Propriété	Type	Description
controls	Attribut HTML	Affiche les contrôles natifs du navigateur
currentTime	Propriété JS	Position de lecture en secondes (lecture/écriture)
playbackRate	Propriété JS	Vitesse de lecture (1.0 = normale, 1.5 = 50% plus rapide)
<track>	Élément enfant	Sous-titres et pistes texte en WebVTT
ended	Événement JS	Déclenché à la fin de la lecture

HTML5 lecteur-cours.html

<!-- Lecteur vidéo avec sous-titres et vitesse variable -->
<figure class="lecteur-media">
  <video
    id="video-cours"
    width="960"
    preload="metadata"
    poster="vignette-cours.webp"
  >
    <source src="cours-html5.webm" type="video/webm">
    <source src="cours-html5.mp4"  type="video/mp4">
    <track
      kind="subtitles"
      src="sous-titres-fr.vtt"
      srclang="fr"
      label="Français"
      default
    >
  </video>
  <figcaption>
    <label for="vitesse">Vitesse :</label>
    <select id="vitesse" onchange="document.getElementById('video-cours').playbackRate = this.value">
      <option value="0.75">0.75x</option>
      <option value="1" selected>1x</option>
      <option value="1.5">1.5x</option>
      <option value="2">2x</option>
    </select>
  </figcaption>
</figure>

💡

Pictogramme de chargement : Écoutez l'événement waiting sur votre élément vidéo pour détecter les moments où la lecture s'interrompt faute de données suffisantes, et affichez un spinner. L'événement playing signale la reprise et vous permet de le masquer.

08 L'élément <template> : composants natifs réutilisables

L'élément <template> est l'un des éléments les moins connus de HTML5, mais également l'un des plus puissants pour architecturer des interfaces dynamiques sans framework. Son fonctionnement est unique : le contenu placé à l'intérieur d'un <template> n'est jamais rendu par le navigateur, ni parsé comme du HTML actif. Les images ne sont pas téléchargées, les scripts ne s'exécutent pas, les styles ne s'appliquent pas. C'est une "recette" dormante stockée dans un fragment de document inerte. On parle de DocumentFragment. Pour utiliser ce contenu, on clone le fragment via template.content.cloneNode(true), on personnalise les valeurs clonées, puis on insère le clone dans le DOM réel. Cette approche est particulièrement efficace pour générer dynamiquement des listes, des cartes, des lignes de tableau ou tout composant répétitif. Comparé à la création d'éléments un par un avec createElement(), l'approche template est plus lisible, plus maintenable et plus proche du HTML final attendu. Le HTML dans le template est pleinement validé par l'éditeur de code, ce qui évite les fautes de balisage. Cette technique est la brique fondatrice des Web Components natifs.

La propriété template.content expose le DocumentFragment inerte. La méthode cloneNode(true) crée une copie profonde du fragment avec tous ses descendants. Attention : ⚠ modifier template.content directement affecte toutes les futures utilisations du template. Bonne pratique : ✓ toujours travailler sur le clone, jamais sur template.content.

HTML5 galerie-recettes.html

<!-- Template de carte de recette —  non rendu par défaut -->
<template id="tpl-recette">
  <article class="carte-recette">
    <img class="recette-photo" alt="">
    <h3 class="recette-nom"></h3>
    <p  class="recette-duree"></p>
    <span class="recette-difficulte"></span>
  </article>
</template>

<section id="galerie"></section>

<script>
const recettes = [
  { nom: "Tajine d'agneau", duree: "90 min", niveaux: "Intermédiaire", photo: "tajine.webp" },
  { nom: "Pastilla au poulet", duree: "60 min", niveaux: "Avancé", photo: "pastilla.webp" }
];
const tpl     = document.getElementById("tpl-recette");
const galerie  = document.getElementById("galerie");

recettes.forEach(r => {
  const clone = tpl.content.cloneNode(true);
  clone.querySelector("img").src             = r.photo;
  clone.querySelector(".recette-nom").textContent   = r.nom;
  clone.querySelector(".recette-duree").textContent  = `Durée : ${r.duree}`;
  clone.querySelector(".recette-difficulte").textContent = r.niveaux;
  galerie.appendChild(clone);
});
</script>

💡

Performance de rendu : Pour insérer plusieurs clones d'un coup, accumulez-les d'abord dans un DocumentFragment avec fragment.appendChild(clone), puis faites un seul conteneur.appendChild(fragment). Cela minimise le nombre de reflows du navigateur.

09 Accessibilité avancée avec les attributs ARIA

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs HTML standardisés par le W3C qui permettent de communiquer la nature et l'état des widgets interactifs aux technologies d'assistance comme les lecteurs d'écran. Lorsque vous construisez une interface riche avec des onglets personnalisés, des menus déroulants, des modales ou des accordéons, le navigateur ne sait pas automatiquement comment décrire ces composants à un utilisateur non-voyant. ARIA comble ce vide en ajoutant une couche de sémantique comportementale. La règle d'or d'ARIA est la règle numéro 1 : utiliser les éléments HTML natifs sémantiques chaque fois que possible, et n'avoir recours à ARIA que lorsque le comportement désiré ne peut pas être obtenu avec le HTML standard. ARIA n'ajoute aucun comportement fonctionnel : il ne gère pas le focus clavier, n'ajoute pas d'interactivité et ne corrige pas les défauts d'un composant inaccessible. Il se contente d'annoncer aux technologies d'assistance ce que votre JavaScript fait déjà. Les attributs ARIA se regroupent en trois familles : les rôles (role), les propriétés (aria-label, aria-required) et les états (aria-expanded, aria-checked, aria-disabled).

L'attribut aria-live crée des régions dynamiques annoncées automatiquement par les lecteurs d'écran sans prise de focus. L'attribut aria-expanded indique si un widget pliable est ouvert ou fermé. Attention : ⚠ une mauvaise utilisation d'ARIA peut rendre l'interface moins accessible qu'un balisage vide. Bonne pratique : ✓ tester systématiquement avec un lecteur d'écran réel (NVDA, VoiceOver).

Attribut ARIA	Famille	Utilisation typique
aria-label	Propriété	Nomme un élément sans texte visible
aria-expanded	État	Accordéon, menu, modale ouverte/fermée
aria-live="polite"	Propriété	Zone mise à jour dynamiquement (notifications)
role="dialog"	Rôle	Boîte de dialogue modale personnalisée
aria-describedby	Propriété	Associe un message d'aide à un champ

HTML5 accordeon-accessible.html

<!-- Accordéon accessible avec gestion ARIA complète -->
<section aria-labelledby="faq-titre">
  <h2 id="faq-titre">Questions fréquentes</h2>

  <div class="item-faq">
    <button
      aria-expanded="false"
      aria-controls="rep-1"
      id="q-1"
    >
      Quelle est la durée du cours ?
    </button>
    <div
      id="rep-1"
      role="region"
      aria-labelledby="q-1"
      hidden
    >
      <p>Ce cours dure environ 30 minutes en lecture continue.</p>
    </div>
  </div>
</section>

<script>
document.querySelectorAll("[aria-expanded]").forEach(btn => {
  btn.addEventListener("click", () => {
    const ouvert  = btn.getAttribute("aria-expanded") === "true";
    const panneau = document.getElementById(btn.getAttribute("aria-controls"));
    btn.setAttribute("aria-expanded", String(!ouvert));
    panneau.hidden = ouvert;
  });
});
</script>

💡

L'attribut hidden vs display:none : Utilisez l'attribut booléen hidden pour masquer un panneau d'accordéon : il est reconnu nativement par les lecteurs d'écran et supprime l'élément de l'ordre de lecture. Contrairement à visibility:hidden, il retire également l'élément du flux de navigation au clavier.

10 Optimisation des performances HTML5 et bonnes pratiques

La performance d'une page web n'est pas uniquement l'affaire du JavaScript ou du CSS. Le HTML lui-même offre des leviers natifs puissants pour accélérer le chargement et améliorer l'expérience perçue par l'utilisateur. Le premier levier est le chargement différé des images via l'attribut loading="lazy" : les images hors de la fenêtre visible ne sont téléchargées que lorsque l'utilisateur s'en approche en scrollant. L'attribut decoding="async" sur les images indique au navigateur de décoder les données d'image en dehors du thread principal, évitant ainsi les freeze d'interface lors du décodage de grandes images. Pour les scripts JavaScript, les attributs defer et async sur la balise <script> contrôlent le moment de téléchargement et d'exécution par rapport au parsing HTML. Avec defer, le script est téléchargé en parallèle mais n'est exécuté qu'après la fin du parsing HTML complet, dans l'ordre de déclaration. Avec async, le script est exécuté dès qu'il est téléchargé, sans garantie d'ordre. L'élément <link rel="preload"> permet d'annoncer au navigateur les ressources critiques à télécharger en priorité avant qu'elles ne soient découvertes naturellement dans le code, qu'il s'agisse de polices, de feuilles de styles ou d'images héros. Le format d'image WebP avec l'élément <picture> et ses sous-éléments <source> permet de servir le format optimal selon les capacités du navigateur.

L'attribut loading="lazy" active le chargement différé natif des images sans JavaScript. L'attribut fetchpriority="high" force le téléchargement prioritaire d'une ressource critique. Attention : ⚠ ne jamais mettre loading="lazy" sur l'image héros visible au-dessus de la ligne de flottaison. Bonne pratique : ✓ toujours spécifier les attributs width et height sur les images pour prévenir le Layout Shift (CLS).

Technique HTML5	Impact	Priorité
loading="lazy" sur <img>	Réduit le poids initial de la page	Haute
defer sur <script>	Evite le blocage du rendu HTML	Haute
<link rel="preload">	Anticipe les ressources critiques	Haute
<picture> + WebP	Format optimal selon le navigateur	Moyenne
width + height sur <img>	Élimine le saut de mise en page (CLS)	Haute

HTML5 head-optimise.html

<!-- Modèle de <head> optimisé pour les performances HTML5 -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Préchargement de la police critique -->
  <link rel="preload" href="inter-v13-latin.woff2"
    as="font" type="font/woff2" crossorigin>

  <!-- CSS non bloquant -->
  <link rel="stylesheet" href="styles.css">

  <!-- Script différé : ne bloque pas le rendu HTML -->
  <script src="app.js" defer></script>
</head>

<!-- Image héros : haute priorité, dimensions explicites -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <img
    src="hero.jpg"
    alt="Vue panoramique du campus de formation"
    width="1440" height="600"
    fetchpriority="high"
    decoding="async"
  >
</picture>

<!-- Images secondaires : chargement différé -->
<img
  src="formateur-profil.webp"
  alt="Photo du formateur"
  width="320" height="320"
  loading="lazy"
  decoding="async"
>

Terminal — Audit Lighthouse CLI

$ npx lighthouse https://monsite.fr --output=json --only-categories=performance
Lancement de Chrome headless...
Audit en cours : performance
✓ First Contentful Paint :   0.8 s
✓ Largest Contentful Paint : 1.4 s
✓ Cumulative Layout Shift :  0.02
✓ Score performance global  : 98 / 100

💡

Core Web Vitals : Google mesure la performance perçue à travers trois métriques clés : LCP (temps d'affichage du plus grand élément), CLS (stabilité visuelle) et INP (réactivité aux interactions). Les optimisations HTML5 décrites dans cette section agissent directement sur ces trois scores, ce qui améliore à la fois l'expérience utilisateur et le référencement.

🎯 Conclusion

Félicitations ! Vous avez parcouru l'essentiel des fonctionnalités avancées de HTML5 qui distinguent un développeur intermédiaire d'un développeur débutant. De la sémantique rigoureuse aux APIs de stockage, en passant par le canvas, les Web Workers et l'accessibilité ARIA, vous disposez maintenant d'une boîte à outils complète pour construire des applications web modernes, performantes et inclusives. La prochaine étape naturelle est d'approfondir les Web Components natifs (Custom Elements + Shadow DOM) et les Service Workers pour la création d'applications web progressives (PWA).

✅ Maîtriser la sémantique HTML5 pour structurer des pages accessibles et référencées
✅ Créer des formulaires avec validation native et types de champs avancés
✅ Utiliser les attributs data-* pour enrichir le HTML de métadonnées personnalisées
✅ Stocker des données côté client avec localStorage et sessionStorage
✅ Dessiner des visuels 2D dynamiques avec l'API Canvas
✅ Déléguer les calculs intensifs aux Web Workers pour préserver la fluidité
✅ Intégrer des médias audio et vidéo avec contrôle JavaScript avancé
✅ Créer des composants réutilisables avec l'élément <template>
✅ Implémenter l'accessibilité ARIA sur des widgets interactifs complexes
✅ Appliquer les bonnes pratiques de performance HTML5 pour améliorer les Core Web Vitals

Maîtriser la Sémantique et les APIs HTML5 — Niveau Intermédiaire

Maîtriser la Sémantique et les APIs HTML5 — Niveau Intermédiaire

01 La sémantique HTML5 avancée : structurer le contenu avec précision

02 Formulaires HTML5 avancés et validation native

03 Les attributs data-* : des métadonnées personnalisées dans le HTML

04 L'API Web Storage : localStorage et sessionStorage

05 L'élément <canvas> : dessiner en 2D dans le navigateur

06 Les Web Workers : calcul parallèle sans bloquer l'interface

07 Médias HTML5 : audio et vidéo avancés

08 L'élément <template> : composants natifs réutilisables

09 Accessibilité avancée avec les attributs ARIA

10 Optimisation des performances HTML5 et bonnes pratiques

🎯 Conclusion

Examens associés