Lis attentivement ce cours dans son intégralité. Prends le temps d'analyser chaque exemple de code présenté et de comprendre pourquoi chaque élément est placé à cet endroit précis. Mémorise en particulier le rôle de chaque section (DOCTYPE, html, head, body) et les balises incontournables du head. Un QCM suivra immédiatement ce cours : les questions porteront directement sur les notions, définitions et exemples présentés ici. Aucune ressource externe ne sera nécessaire pour répondre au QCM.

Un document HTML est la brique fondamentale de toute page web. Avant d'écrire une seule ligne de contenu visible, il faut comprendre comment ce document est structuré, pourquoi chaque partie existe, et ce qu'elle fait concrètement. Ce cours te donne une vue complète et précise de cette structure.

Le langage HTML, dont le nom complet est HyperText Markup Language, est un langage de balisage. Il ne s'agit pas d'un langage de programmation : il ne calcule rien, n'exécute pas de logique conditionnelle. Son rôle est de décrire la structure et le sens du contenu d'une page web. Les navigateurs (Chrome, Firefox, Edge, Safari) lisent ces balises et les interprètent pour afficher une page à l'écran.

Tout document HTML valide suit une structure précise, composée de quatre éléments essentiels :
- La déclaration du type de document (doctype)
- La balise racine html
- La section head (en-tête du document)
- La section body (corps du document)

Voici un exemple minimal mais complet d'un document HTML valide :






Ma première page

Bienvenue sur ma page

Ceci est mon premier paragraphe.

Analysons maintenant chaque partie en détail.

--- LA DÉCLARATION DOCTYPE ---

La toute première ligne d'un document HTML doit toujours être la déclaration DOCTYPE. Elle s'écrit ainsi :



Cette déclaration n'est pas une balise HTML à proprement parler. C'est une instruction destinée au navigateur qui lui indique quelle version du langage HTML est utilisée dans ce document. Dans le cas de la version HTML5 (la version actuelle et standard depuis 2014), la déclaration est volontairement courte et simple : .

Dans les versions antérieures d'HTML (comme HTML 4.01 ou XHTML 1.0), les déclarations DOCTYPE étaient beaucoup plus longues et complexes, car elles référençaient des fichiers de définition externe. Avec HTML5, cette complexité a été supprimée.

Pourquoi est-ce important ? Sans cette déclaration, le navigateur entre dans un mode appelé "quirks mode" (mode de compatibilité ancienne), dans lequel il applique des règles héritées des débuts du web, parfois incohérentes selon les navigateurs. Avec la déclaration DOCTYPE correcte, le navigateur utilise le mode standard, garantissant un rendu cohérent et prévisible.

Règle absolue : doit toujours être la première ligne du fichier, sans espace ni ligne vide avant elle.

--- LA BALISE HTML : LA RACINE DU DOCUMENT ---

Immédiatement après le DOCTYPE vient la balise . C'est l'élément racine du document : tous les autres éléments HTML sont imbriqués à l'intérieur de cette balise. Elle ouvre le document avec et le ferme avec .

L'attribut le plus important à placer sur cette balise est l'attribut lang, qui indique la langue principale du contenu de la page. Exemple :

pour un contenu en français
pour un contenu en anglais

Cet attribut est crucial pour plusieurs raisons :
- Il aide les lecteurs d'écran (utilisés par les personnes malvoyantes) à adopter la bonne prononciation.
- Il est pris en compte par les moteurs de recherche pour le référencement.
- Il permet aux navigateurs de proposer la traduction automatique pertinente.

Negliger cet attribut est une erreur courante mais évitable. En contexte professionnel, un document HTML sans attribut lang est considéré comme incomplet.

--- LA SECTION HEAD : LES MÉTADONNÉES ---

La balise contient toutes les métadonnées du document. Les métadonnées sont des informations sur la page qui ne sont pas affichées directement dans la fenêtre du navigateur, mais qui sont essentielles au bon fonctionnement et à la bonne interprétation de la page.

Voici les éléments les plus importants que l'on trouve dans le head :

1. La balise meta charset



Cette balise indique au navigateur l'encodage des caractères utilisé dans le document. UTF-8 est l'encodage universel qui supporte pratiquement tous les caractères de toutes les langues du monde, y compris les accents français (é, à, ù, ç...), les caractères arabes, chinois, etc. Sans cette déclaration, les accents et caractères spéciaux peuvent s'afficher de manière incorrecte (carrés, points d'interrogation, symboles bizarres). Cette balise doit être placée le plus tôt possible dans le head, idéalement en première position.

2. La balise meta viewport



Cette balise est indispensable pour le design responsive, c'est-à-dire l'adaptation... (télécharger pour lire la suite 👇)