HTML5 (HyperText Markup Language version 5) est la cinquième révision majeure du langage HTML, utilisée pour structurer et présenter le contenu des pages web.
Il constitue la base de tout document web, aux côtés de CSS3 (mise en forme) et JavaScript (interaction).
HTML5 a été conçu pour :
| Période | Événement clé |
|---|---|
| 1991-1995 | Premières versions d’HTML (jusqu’à HTML 2.0). |
| 1997-1999 | HTML 3.2 et 4.01 — normalisation W3C, apparition du CSS. |
| 2000-2004 | XHTML 1.0 / 1.1 : syntaxe stricte dérivée de XML. |
| 2004 | Création du WHATWG (Web Hypertext Application Technology Working Group) par Apple, Mozilla et Opera. |
| 2008 | Première ébauche d’HTML5. |
| 2014 | HTML5 devient standard officiel du W3C. |
| 2017+ | HTML devient un Living Standard (évolutif en continu). |
<header>, <article>, <footer>).<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple HTML5</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Présentation</h2>
<p>HTML5 permet de structurer et d’enrichir les pages web.</p>
</article>
</main>
<footer>
<p>© 2025 Mon Site Web</p>
</footer>
</body>
</html>
🧱 Les nouvelles balises sémantiques
Balise Rôle Exemple
<header> En-tête d’un document ou d’une section Bannière, logo, menu principal
<nav> Zone de navigation Liste de liens
<main> Contenu principal de la page Zone centrale
<section> Regroupe un ensemble logique de contenu Chapitre, bloc thématique
<article> Contenu indépendant et autonome Article, fiche produit
<aside> Contenu secondaire ou contextuel Barre latérale, publicité
<footer> Pied de page Mentions légales, contacts
<figure> / <figcaption> Illustration et légende Image + description
<mark> Met en surbrillance un texte mot-clé
<time> Représente une date ou heure <time datetime="2025-10-09">9 octobre 2025</time>
🎥 Balises multimédia
Audio
<audio controls>
<source src="musique.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio.
</audio>
Vidéo
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
Canvas (dessin 2D / 3D)
<canvas id="dessin" width="200" height="100"></canvas>
<script>
const c = document.getElementById("dessin");
const ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
💾 Les API majeures d’HTML5
API Fonctionnalité Exemple d’usage
Canvas Dessins, jeux, animations 2D/3D Graphiques dynamiques
Audio/Video Lecture multimédia native Lecteurs intégrés
Geolocation API Position GPS de l’utilisateur Applications cartographiques
Web Storage Sauvegarde locale (localStorage, sessionStorage) Données persistantes
Web Workers Exécution de scripts en arrière-plan Calculs lourds sans bloquer l’interface
Drag and Drop Glisser-déposer natif Interfaces interactives
Offline / Manifest Mise en cache hors ligne Applications PWA
WebSockets Communication temps réel Chats, jeux en ligne
File API Lecture/écriture de fichiers locaux Uploads et traitements clients
Device APIs Capteurs, caméras, orientation, etc. Applications mobiles hybrides
🔒 Sécurité & accessibilité
• Toujours utiliser pour activer le mode standard.
• Définir pour éviter les problèmes d’encodage.
• Respecter les normes ARIA (aria-label, role, etc.) pour l’accessibilité.
• Valider ses pages via validator.w3.org.
📱 HTML5 et le web moderne
HTML5 est au cœur du Web responsive et des Progressive Web Apps (PWA) :
• Fonctionne sur tous les écrans et systèmes.
• Compatible avec les frameworks modernes (React, Vue, Angular…).
• Sert de socle aux technologies web natives (Electron, Cordova, Capacitor).
🧠 À retenir
• HTML5 = structure + sémantique + multimédia + API.
• Il remplace les plugins externes et améliore les performances.
• Il standardise les pratiques web modernes et garantit l’accessibilité.
📚 Ressources officielles :
• MDN Web Docs – Introduction à HTML5
• Spécification WHATWG HTML Living Standard
• W3C Validator
Cette formation est proposée par Deladev, studio web de Loïc D. — création de sites et d'applications, accompagnement et formation sur mesure.
Les projets réalisés · Prestations et tarifs · Le blog tech · Me contacter
Écrite par Loïc D. avec l'assistance de Claude (Anthropic) — un travail à deux.
© 2026 Deladev — publiée sous licence CC BY-NC-ND 4.0. Vous pouvez la lire, y renvoyer par un lien, la partager et la citer en créditant la source. La revendre, l'utiliser dans une prestation ou une formation payante, la republier même partiellement ailleurs, en diffuser une version modifiée ou l'exploiter pour entraîner un modèle d'IA nécessitent une autorisation écrite — pour un usage interne en entreprise, c'est souvent oui, il suffit de demander.