frontend / html

Structure de base d'une page HTML

Leçon 11 exercice

Explication

Un peu d'histoire

HTML est inventé par Tim Berners-Lee au CERN en 1991, en même temps que le World Wide Web lui-même. Son objectif initial était de permettre à des chercheurs de relier facilement des documents scientifiques entre eux grâce à des hyperliens — l'ancêtre direct du "clic" qu'on fait aujourd'hui des dizaines de fois par jour. Le W3C, organisme qui standardise le langage, est fondé par Berners-Lee lui-même en 1994. La version HTML5, sortie en 2014, apporte une sémantique moderne (des balises qui décrivent le sens du contenu) ainsi que la vidéo et l'audio natifs, sans avoir besoin de plugins comme Flash.

Pourquoi apprendre HTML aujourd'hui

HTML est la fondation absolue de toute page web : c'est lui qui définit la structure du contenu (titres, paragraphes, liens, images, formulaires...), avant même de parler d'apparence (CSS) ou d'interactivité (JavaScript). On peut en apprendre les bases en quelques heures, mais bien le maîtriser (sémantique correcte, accessibilité pour les personnes en situation de handicap, référencement naturel) prend plus de temps et fait une vraie différence sur la qualité d'un site. Aucun développeur web, frontend comme backend, ne peut s'en passer.

Ce que vous allez apprendre

Écrire le squelette minimal valide d'un document HTML5, dans le bon ordre
Comprendre le rôle exact de <!DOCTYPE html> et ce qui se passe s'il est absent
Distinguer ce qui va dans <head> (métadonnées invisibles) de ce qui va dans <body> (contenu visible)
Expliquer pourquoi <meta charset="UTF-8"> doit être la toute première balise du <head>
Configurer correctement la balise viewport pour un rendu mobile propre

Dans quel contexte ?

Un développeur junior reçoit une maquette Figma pour une landing page et crée son fichier index.html à partir de zéro. Il oublie la balise viewport : sur le téléphone du client, la page s'affiche minuscule, comme si elle était vue depuis un écran d'ordinateur de bureau. Ce genre de bug, invisible sur son propre écran de développeur, est justement ce que ce squelette de base permet d'éviter dès la première ligne de code.

Étape 1 : une page, ce n'est d'abord que du texte

Ouvrez n'importe quel fichier HTML dans un simple éditeur de texte : vous ne verrez ni couleur ni dessin, juste des mots entourés de balises. C'est la base à retenir avant tout le reste : un document HTML est un document texte structuré.

Étape 2 : les balises donnent un rôle à chaque morceau

Imaginez la construction d'une maison : avant de poser la déco (les couleurs, les meubles, c'est le rôle de CSS), il faut couler les fondations et monter la charpente. HTML, c'est cette charpente : il dit "ici il y a un titre", "ici un paragraphe", sans se soucier de l'apparence.

Étape 3 : pourquoi une structure aussi stricte

Le navigateur qui affiche votre page n'est pas le seul à la lire. Google l'indexe, et un lecteur d'écran la lit à voix haute pour une personne malvoyante. Tous ces "lecteurs" doivent comprendre le document de la même façon, sinon chacun l'interprète à sa manière.

Étape 4 : le squelette minimal, brique par brique

Voici comment HTML répond à ce besoin. D'abord, <!DOCTYPE html> dit au navigateur "affiche selon les règles modernes du HTML5" : sans lui, le navigateur peut basculer dans un mode de compatibilité imprévisible avec d'anciennes pages.

Ensuite vient <html lang="fr">, qui définit la langue du document — c'est ce qui permet à un lecteur d'écran de choisir la bonne prononciation.

Une fois la racine posée, on distingue deux zones : <head> contient les informations invisibles à l'écran mais essentielles (titre de l'onglet, encodage, réglages pour mobile), tandis que <body> contient tout ce que l'utilisateur voit et avec quoi il interagit.

Balise	Emplacement	Visible à l'écran ?	Rôle
`<!DOCTYPE html>`	Première ligne du fichier	Non	Active le mode standard HTML5
`<html lang="fr">`	Racine du document	Non	Conteneur global + langue déclarée
`<meta charset="UTF-8">`	Début de `<head>`	Non	Encodage des caractères (accents)
`<title>`	Dans `<head>`	Onglet du navigateur	Titre de la page
`<body>`	Après `<head>`	Oui	Contenu affiché et interactif

Prérequis

Aucune connaissance préalable n'est nécessaire pour cette toute première leçon : un simple éditeur de texte (VS Code, par exemple) et un navigateur suffisent pour suivre les exemples.

Étape 5 : le piège classique à connaître dès maintenant

Il reste un détail sur lequel presque tous les débutants trébuchent : l'ordre des balises compte. Le <meta charset> doit arriver tout au début du <head>, sinon le navigateur peut avoir déjà commencé à lire le texte avec le mauvais encodage.

Résultat concret de cette erreur : vos accents français se transforment en caractères bizarres à l'écran. Prenez ce réflexe dès maintenant : en HTML, la position d'une balise n'est jamais anodine.

Piège fréquent

Oublier <meta name="viewport" content="width=device-width, initial-scale=1.0"> est l'erreur la plus courante chez un débutant : sans elle, un mobile affiche la page comme un écran desktop de 980px de large, réduit et zoomé arrière, obligeant l'utilisateur à zoomer manuellement pour lire le moindre texte.

Et ensuite ?

Une fois ce squelette maîtrisé, la prochaine étape consiste à remplir le <body> avec du vrai contenu textuel — titres, paragraphes, emphases — en choisissant toujours la bonne balise selon le SENS du texte, jamais selon son apparence.

Commandes & code

Structure de base d'une page HTML

Le squelette minimal que tout document HTML doit respecter, et ce que fait chaque ligne.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
</head>
<body>
    <h1>Bienvenue</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>

<!-- Anatomie détaillée, ligne par ligne -->
<!DOCTYPE html>
<!-- ↑ obligatoire en 1ère ligne : force le "standards mode" du navigateur
     (sans ça, le navigateur bascule en "quirks mode" -> rendu imprévisible) -->

<html lang="fr">
<!-- ↑ lang est lu par les lecteurs d'écran (prononciation) et par les moteurs
     de recherche. Sans lang, un lecteur d'écran anglais lira du français
     avec un accent anglais. -->

<head>
    <!-- Rien ici n'est visible directement dans la page -->
    <meta charset="UTF-8">
    <!-- ↑ DOIT être dans les 1024 premiers octets : sinon le navigateur peut
         avoir déjà commencé à parser avec le mauvais encodage -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ↑ sans cette ligne, les mobiles affichent la page "zoomée arrière"
         comme sur un écran desktop de 980px -->

    <title>Titre affiché dans l'onglet du navigateur</title>
</head>

<body>
    <!-- Tout le contenu visible et interactif vit ici -->
</body>
</html>

<!-- Commentaires HTML : invisibles à l'affichage, visibles dans le code source -->
<!-- Un commentaire peut tenir sur plusieurs lignes -->

<!--
    Utile pour :
    - documenter une section complexe
    - désactiver temporairement du markup pendant le dev
-->
<!-- <div class="ancienne-version">...</div> -->

Élément	Rôle
`<!DOCTYPE html>`	Active le mode standard HTML5
`<html lang="...">`	Racine du document + langue
`<head>`	Métadonnées non visibles
`<body>`	Contenu visible/interactif

Résumé

<!DOCTYPE html> en toute première ligne, sans exception.
<meta charset="UTF-8"> doit être la première balise du <head>.
lang sur <html> n'est pas cosmétique : accessibilité + SEO.
Le viewport meta est obligatoire pour un rendu mobile correct.

Exercices pratiques

1 disponible

Mission : sauver la page corrompue d'un client

Objectif : Diagnostiquer puis corriger les erreurs de squelette HTML qui cassent l'encodage et l'affichage mobile d'une page reçue d'un ancien prestataire.

Contexte

Un client transmet le fichier contact.html d'un ancien prestataire : les accents s'affichent comme des caractères bizarres, et sur mobile la page apparaît minuscule, comme vue depuis un écran d'ordinateur. Le fichier commence directement par <html><head><title>Contact</title><meta charset="UTF-8">..., sans <!DOCTYPE html> ni balise viewport.

Ta mission : identifier précisément ce qui cloche dans ce squelette et reconstruire un <head> valide.

Résoudre l’exercice →