Coder en HTML consiste à écrire dans un fichier texte des balises qui décrivent le contenu d’une page, à enregistrer ce fichier avec l’extension .html, puis à l’ouvrir dans un navigateur. Un éditeur de texte et un navigateur suffisent pour commencer.
Ce guide suit cinq étapes : créer la structure, écrire le contenu, ajouter des liens et des images, ouvrir la page, puis la vérifier. Le HTML décrit la structure d’une page (titres, paragraphes, liens), pas son apparence.
Ce qu’il faut pour coder en HTML
Il faut deux outils : un éditeur qui enregistre du texte brut et un navigateur web. Le bloc-notes fourni avec le système fonctionne, de même qu’un éditeur de code gratuit, qui colore les balises et signale les oublis. Un traitement de texte est à éviter, car il ajoute une mise en forme cachée qui n’a rien à faire dans un fichier HTML.
Un éditeur en ligne convient aussi pour un premier essai : on tape le code d’un côté et le résultat s’affiche de l’autre, sans rien installer. Pour garder ses pages sur son ordinateur et les rouvrir plus tard, un éditeur de texte brut reste plus simple.
Étape 1 : créer le fichier et la structure de base
Créez un nouveau document dans l’éditeur et enregistrez-le sous le nom index.html, en choisissant l’encodage UTF-8 s’il est proposé. Cet encodage permet d’afficher correctement les accents et les caractères spéciaux.
Toute page HTML repose sur la même charpente. Elle commence par la déclaration <!DOCTYPE html>, qui indique au navigateur le type de document. L’élément <html lang= »fr »> enveloppe ensuite tout le reste et précise la langue de la page.
À l’intérieur se trouvent deux blocs. Le premier, <head>, contient les informations qui ne s’affichent pas dans la page : la balise <meta charset= »UTF-8″> qui déclare l’encodage, et <title>, le titre visible dans l’onglet du navigateur. Le second, <body>, contient tout ce que le visiteur voit.
La plupart des balises fonctionnent par paire, avec une balise ouvrante et une balise fermante qui reprend le même nom précédé d’une barre oblique : <p> ouvre un paragraphe et </p> le ferme. Retenez cette règle, elle revient dans chaque étape suivante.
Étape 2 : écrire le contenu avec les balises de base
Le HTML propose six niveaux de titres, de <h1> à <h6>. Un seul <h1> par page est la pratique conseillée : il décrit le contenu de la page, à la manière du <title>. Les sous-titres suivent dans l’ordre, <h2> puis <h3>, sans sauter de niveau, car les lecteurs d’écran s’appuient sur cette hiérarchie pour naviguer.
Les titres servent à structurer le texte, pas à agrandir des caractères : la taille se règle plus tard avec le CSS. Sous chaque titre, le texte se place dans des paragraphes <p>. Pour une énumération, la balise <ul> crée une liste à puces dont chaque élément s’écrit entre <li> et </li>.
Pour mettre un mot en valeur, <strong> marque une forte importance et <em> une insistance. Un espace supplémentaire entre deux mots n’est pas affiché par le navigateur, qui réduit les espaces consécutifs à un seul. Pour en forcer un, on écrit l’entité , qui produit une espace insécable.
Étape 3 : ajouter des liens et des images
Un lien s’écrit avec la balise <a> et son attribut href, qui contient l’adresse de destination : <a href= »contact.html »>Nous contacter</a>. Une adresse relative, comme contact.html, désigne un fichier placé à côté de la page. Une adresse absolue, qui commence par https://, désigne une page sur un autre site.
Une image s’insère avec <img src= »photo.jpg » alt= »Description de la photo »>. L’attribut src donne le chemin du fichier image, qu’il faut ranger dans le même dossier que la page ou dans un sous-dossier, comme images/photo.jpg. L’attribut alt est le texte de remplacement : les lecteurs d’écran le lisent et le navigateur l’affiche si l’image ne charge pas.
Décrivez ce que montre l’image, plutôt que d’écrire « image ». Pour une image purement décorative, on laisse alt vide (alt= » »), ce qui signale qu’elle n’apporte rien au contenu. Les liens ne servent pas qu’aux pages : les champs de saisie suivent d’autres règles, détaillées dans la syntaxe des formulaires HTML.
Étape 4 : ouvrir la page et lire son code
Enregistrez le fichier, puis ouvrez-le dans le navigateur par un double-clic ou en le glissant dans une fenêtre. La page s’affiche sans serveur ni connexion. Après chaque modification dans l’éditeur, enregistrez de nouveau puis rechargez la page pour voir le résultat.
Le navigateur permet aussi de lire le code de n’importe quelle page. Son menu propose d’afficher le code source, et l’inspecteur montre la structure de la page sous forme d’arbre. Le plus formateur est d’apprendre à afficher le code source d’une page de site connu et de repérer les balises vues plus haut.
Étape 5 : vérifier son code et éviter les erreurs de débutant
Le validateur de balisage du W3C contrôle qu’un document HTML est valide. Il accepte trois modes de saisie : l’adresse d’une page en ligne, le téléversement d’un fichier et le collage direct du code. Pour une page encore sur votre ordinateur, le téléversement ou le collage suffisent.
Les erreurs de débutant sont presque toujours les mêmes. Voici les points à contrôler quand la page ne s’affiche pas comme prévu :
- Une balise ouverte et jamais fermée, qui décale toute la suite de la page.
- Des balises mal imbriquées : la dernière balise ouverte doit être la première fermée.
- Une valeur d’attribut sans guillemets ou avec un guillemet manquant, comme dans href= »contact.html.
Pour afficher une balise telle quelle dans le texte, par exemple pour l’expliquer, on remplace le signe < par l’entité < et le signe > par >. Sans cela, le navigateur interprète la balise au lieu de l’afficher. Indenter le code et ajouter des commentaires entre <!– et –> aide à se relire.
Aller plus loin : CSS et apprentissage
Le HTML gère la structure, le CSS la présentation (couleurs, polices, mise en page) et JavaScript l’interactivité. Pour poursuivre, apprendre à coder en HTML et CSS ensemble est la suite logique : on garde le même fichier et on y relie une feuille de style.
Les petits projets font progresser plus vite que la théorie : une page de présentation personnelle, un CV en ligne ou la page d’une association. Pour situer ces langages dans l’ensemble du métier, lisez les bases de la programmation web.
Une première page de quelques lignes, validée et ouverte dans le navigateur, suffit pour passer de la lecture à la pratique. Chaque nouvelle balise s’ajoute ensuite au même fichier et se teste d’un simple rechargement.
