HTML5 est aujourd'hui le langage de référence pour construire des pages web. Plus qu'une simple version de HTML, c'est un ensemble de balises, de fonctionnalités et d'API qui ont transformé la façon dont nous créons des sites. Ce tutoriel d'introduction fait le tour de l'essentiel, depuis ses origines jusqu'à son état actuel, pour vous donner des bases solides avant d'approfondir chaque thème.
Histoire de HTML5
Au début des années 2000, le web était partagé entre HTML 4.01 et XHTML, une variante stricte fondée sur la syntaxe XML. XHTML imposait des règles rigides (toutes les balises fermées, attributs entre guillemets) et bloquait la page entière à la moindre erreur. Cette approche freinait l'évolution du web.
En 2004, un groupe nommé WHATWG (regroupant Apple, Mozilla et Opera) a lancé le chantier qui allait devenir HTML5, avec l'idée d'un langage plus souple, orienté vers les applications web réelles. Le W3C a rejoint l'effort, et HTML5 a été officiellement recommandé en 2014.
Depuis, le modèle a changé. HTML n'est plus publié par versions numérotées figées mais sous forme de HTML Living Standard, une norme vivante maintenue en continu par le WHATWG. En 2019, le W3C et le WHATWG ont signé un accord faisant du Living Standard la seule référence officielle. XHTML, lui, n'est plus développé.
Parler de « HTML 5.1 » ou « HTML 5.2 » n'a plus vraiment de sens aujourd'hui. On dit simplement HTML, qui désigne la norme vivante mise à jour en permanence.
La structure de base d'un document
L'une des premières bonnes nouvelles de HTML5 fut la simplification radicale du doctype. Fini les longues déclarations de XHTML, une seule ligne suffit désormais :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma première page HTML5</title>
</head>
<body>
<p>Bonjour le monde !</p>
</body>
</html>Trois éléments méritent l'attention. La balise <meta charset="utf-8"> déclare l'encodage des caractères, indispensable pour afficher correctement les accents français. Le <meta name="viewport"> indique au navigateur d'adapter l'affichage à la largeur de l'écran, c'est la base du responsive design sur mobile. Enfin, l'attribut lang="fr" renseigne la langue du document, utile pour l'accessibilité et le référencement.
Les balises sémantiques
Avant HTML5, on structurait les pages avec une multitude de <div> portant des classes comme class="header" ou class="footer". HTML5 a introduit des balises au sens explicite qui décrivent le rôle de chaque zone :
<header>: l'en-tête d'une page ou d'une section<nav>: un bloc de navigation (menu, liens principaux)<main>: le contenu principal, unique dans la page<article>: un contenu autonome (un billet de blog, une fiche)<section>: un regroupement thématique de contenu<aside>: un contenu annexe (encart, barre latérale)<footer>: le pied de page ou de section<figure>et<figcaption>: une illustration et sa légende
<body>
<header>
<h1>Mon site</h1>
<nav><a href="/">Accueil</a></nav>
</header>
<main>
<article>
<h2>Titre de l'article</h2>
<p>Le contenu...</p>
</article>
</main>
<footer><p>Mentions légales</p></footer>
</body>Ces balises comptent pour deux raisons. Côté accessibilité, les lecteurs d'écran utilisent ces repères pour permettre aux personnes malvoyantes de naviguer rapidement entre les régions de la page. Côté SEO, elles aident les moteurs de recherche à comprendre la hiérarchie et la nature de vos contenus. Pour aller plus loin sur la structuration des données, consultez les microdata.
Les améliorations des formulaires
HTML5 a enrichi les formulaires avec de nouveaux types de champ <input> qui adaptent le clavier mobile et activent une validation native, sans JavaScript. Parmi les plus utiles : email, tel, url, date, number et range.
<form>
<input type="email" placeholder="votre@email.fr" required>
<input type="tel" placeholder="06 12 34 56 78">
<input type="number" min="0" max="100">
<input type="date">
<button type="submit">Envoyer</button>
</form>L'attribut placeholder affiche un texte indicatif dans le champ vide. L'attribut required empêche l'envoi du formulaire tant que le champ n'est pas rempli, et le navigateur affiche lui-même un message d'erreur. Avec type="email", il vérifie en plus que la saisie ressemble à une adresse valide.
La validation native est pratique mais ne remplace pas une vérification côté serveur. Ne faites jamais confiance aux seules contraintes du navigateur pour sécuriser vos données.
Le multimédia et le graphisme
HTML5 a définitivement enterré Flash. On peut désormais intégrer du son et de la vidéo directement avec les balises <audio> et <video>, lues nativement par le navigateur :
<video controls width="640">
<source src="film.mp4" type="video/mp4">
Votre navigateur ne lit pas la vidéo.
</video>Pour le graphisme, deux technologies cohabitent. La balise <canvas> offre une zone de dessin pilotée en JavaScript, idéale pour les jeux et les visualisations dynamiques. Le format SVG permet, lui, des images vectorielles qui restent nettes à toutes les tailles, parfaites pour les logos et les icônes.
Les API JavaScript de HTML5
HTML5 ne se limite pas au balisage, il apporte aussi un ensemble d'API JavaScript qui donnent aux pages des capacités proches des applications natives :
- Géolocalisation : obtenir la position de l'utilisateur, voir la géolocalisation HTML5
- Web Storage : stocker des données dans le navigateur avec
localStorage(persistant) etsessionStorage(le temps de la session) - Mode hors-ligne : faire fonctionner une page sans connexion, aujourd'hui via les Service Workers
- Glisser-déposer (drag and drop) : déplacer des éléments à la souris
// Sauvegarder puis relire une valeur
localStorage.setItem('theme', 'sombre');
const theme = localStorage.getItem('theme');Le vieux mécanisme de cache hors-ligne (AppCache) a été supprimé des navigateurs. En 2026, le mode hors-ligne repose entièrement sur les Service Workers, bien plus puissants et fiables.
Compatibilité et état en 2026
HTML5 n'est plus une nouveauté, c'est tout simplement le HTML d'aujourd'hui. Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent en charge l'ensemble des balises et la grande majorité des API.
Les anciens polyfills, ces scripts qui ajoutaient le support des balises sémantiques aux navigateurs dépassés comme Internet Explorer, ne servent plus à rien. Internet Explorer a été abandonné par Microsoft, et vous pouvez écrire du HTML5 propre sans vous soucier de ces vieilles contournements.
L'évolution se poursuit néanmoins au sein du Living Standard, avec des ajouts réguliers comme les éléments <dialog> pour les fenêtres modales ou les attributs natifs de chargement différé des images (loading="lazy"). En somme, apprendre HTML5 aujourd'hui, c'est apprendre le web tel qu'il fonctionne réellement, et vous disposez maintenant d'une vue d'ensemble pour explorer chaque sujet en détail.