HTML5 : les bases d’un document fiable, du doctype à la compatibilité

HTML5 est le langage de balisage utilisé pour créer les pages web actuelles. Il ne remplace ni CSS, qui gère la présentation, ni JavaScript, qui ajoute les comportements interactifs. Il donne au navigateur une structure et un sens au contenu. Pour partir sur une base fiable, quelques choix suffisent : un doctype simple, un encodage UTF-8, une langue déclarée et une séparation nette entre les métadonnées et le contenu visible.

HTML5 n’est plus seulement une « version » du HTML

HTML5 a succédé à HTML 4.01 et aux pratiques issues de XHTML 1.x. Son objectif était de simplifier l’écriture des documents, de mieux décrire leur structure et d’intégrer les usages modernes du web, notamment les médias et les formulaires. Aujourd’hui, le terme HTML5 désigne couramment le HTML moderne, dont la spécification évolue en continu comme un standard vivant.

Cette évolution ne demande pas de réapprendre tout le langage. Les balises fondamentales restent les mêmes : paragraphes, titres, liens, listes et images conservent leur rôle. HTML5 améliore surtout l’organisation d’une page et limite le recours aux balises génériques lorsque le contenu possède une fonction identifiable.

Le document minimal : les fondations à poser dès le premier fichier

Un document HTML5 commence par <!doctype html>. Cette déclaration indique au navigateur qu’il doit interpréter la page selon le mode de rendu standard. Son absence peut déclencher le mode quirks, un mode de compatibilité ancien dans lequel certaines règles d’affichage deviennent imprévisibles, notamment pour les mises en page CSS.

La référence officielle complète du standard HTML : Consultez la spécification HTML officielle pour comprendre la structure, les éléments, les API et les fonctionnalités du Web.

La balise <html> englobe tout le document. Elle reçoit idéalement l’attribut lang, par exemple lang="fr" pour une page en français. Cette indication aide les lecteurs d’écran à choisir la bonne synthèse vocale, facilite certains traitements automatiques et précise la langue principale du contenu.

Ce qui appartient au head

La section <head> contient les informations destinées au navigateur, aux moteurs de recherche et aux outils techniques. Elles ne s’affichent pas dans la zone de lecture de la page. On y place notamment le titre affiché dans l’onglet, les métadonnées, les liens vers les feuilles de style et, selon le projet, certains scripts.

La déclaration <meta charset="utf-8"> doit être placée très tôt dans le head. UTF-8 permet d’afficher correctement les accents, les apostrophes, les symboles et les caractères non latins. Si l’encodage du fichier et celui attendu par le navigateur ne correspondent pas, un mot comme « intégration » peut se transformer en une suite de caractères illisibles.

Ce qui appartient au body

La section <body> rassemble ce que l’internaute consulte et utilise : navigation, titres, textes, formulaires, images, vidéos et liens. Une règle simple permet d’éviter de nombreuses erreurs : si un élément doit être lu ou manipulé dans la page, il va généralement dans le body ; s’il décrit le document ou charge une ressource, il va plutôt dans le head.

Le head regroupe les consignes nécessaires au navigateur : langue, encodage, styles et ressources. Un head négligé ne rend pas forcément la page vide, mais il peut provoquer des défauts silencieux, comme des caractères mal affichés, une feuille CSS absente, un aperçu social incomplet ou un comportement différent selon l’environnement.

Donner du sens au contenu avec les éléments HTML5

Le bénéfice le plus visible de HTML5 est sa dimension sémantique. Au lieu de multiplier les conteneurs neutres, il devient possible de décrire la fonction d’une zone de page. Les navigateurs affichent parfois ces éléments comme de simples blocs, mais ils transmettent des informations utiles aux technologies d’assistance, aux moteurs de recherche et aux personnes qui maintiennent le code.

• <header> identifie l’en-tête d’une page ou d’une section ;
• <nav> encadre un ensemble de liens de navigation majeur ;
• <main> désigne le contenu principal, unique dans la page ;
• <article> convient à un contenu autonome, comme un article ou une fiche ;
• <section> regroupe un contenu autour d’un thème, généralement introduit par un titre ;
• <aside> accueille un contenu complémentaire ;
• <footer> clôt une page ou une section.

Ces balises ne servent pas de décoration. Une zone sans sujet propre n’a pas besoin d’être un <section>, et une simple ligne de liens n’est pas automatiquement une navigation principale. La question à poser est simple : quelle fonction ce bloc remplit-il pour le lecteur ? Lorsque la réponse est claire, le choix de la balise l’est souvent aussi.

Relier CSS et JavaScript sans alourdir le balisage

Une feuille de style externe se relie dans le head avec <link>, l’attribut rel="stylesheet" et l’adresse du fichier dans href. Cette séparation entre HTML et CSS garde la structure lisible, permet de réutiliser la même présentation sur plusieurs pages et simplifie la maintenance.

JavaScript s’ajoute avec la balise <script>. L’attribut type n’est plus obligatoire pour un script JavaScript classique. Pour éviter qu’un fichier externe ne bloque l’analyse de la page, l’attribut defer est souvent adapté : le fichier est téléchargé pendant le chargement, puis exécuté après l’analyse du document.

HTML5 comprend aussi des éléments natifs tels que <audio>, <video> et <canvas>, ainsi que des capacités de formulaires enrichies. Leur présence ne dispense pas de respecter l’accessibilité : une vidéo a besoin de sous-titres adaptés, une image informative doit disposer d’un texte alternatif pertinent et un formulaire doit conserver des libellés explicites.

Tester la compatibilité et partir d’une base fiable

La structure fondamentale d’un document HTML5 est largement prise en charge par les navigateurs modernes. En revanche, le support de certains attributs, contrôles de formulaire ou API peut varier. Avant d’intégrer une fonctionnalité moins courante, consultez Caniuse.com pour vérifier sa prise en charge selon les navigateurs visés. HTML5Please peut aussi orienter vers des solutions de repli lorsque cela est nécessaire.

Pour un nouveau projet, un boilerplate évite d’oublier les bases : doctype, langue, charset, réglages d’affichage et liens vers les ressources. HTML5 Boilerplate fournit une base de départ, tandis qu’Initializr peut aider à générer un premier ensemble de fichiers. Il est préférable de supprimer ce qui ne sert pas, de comprendre chaque ligne conservée et d’adapter l’architecture à la taille du projet.

1. Déclarez le doctype HTML5 en première ligne.
2. Ajoutez la langue sur l’élément html et UTF-8 dans le head.
3. Rédigez un titre de page précis, puis séparez les métadonnées du contenu visible.
4. Choisissez les balises selon le rôle réel de chaque bloc.
5. Testez la page dans plusieurs navigateurs et vérifiez les fonctions moins classiques avant la mise en ligne.