Les bases pour bien débuter en HTML
Pour écrire vos premières pages HTML dans de bonnes conditions, il faut deux choses : un éditeur de code correct et une bonne compréhension du rôle des balises. Ce guide reprend ces bases une par une. Il a été entièrement mis à jour : la première version datait de 2017 et recommandait des outils qui n’existent plus aujourd’hui.
Si vous ne savez pas encore ce qui se passe entre votre navigateur et un serveur quand vous ouvrez une page, commencez par comment fonctionne un site web, puis revenez ici.
Choisir son éditeur de code en 2026
Une page HTML n’est qu’un fichier texte. Techniquement, le Bloc-Notes de Windows suffit pour en écrire une. Mais sans coloration du code, sans indentation automatique et sans détection des erreurs de frappe, vous allez perdre un temps précieux dès que la page dépassera quelques lignes.
Ma recommandation pour débuter (et bien au-delà) : Visual Studio Code, dit VS Code. Il est gratuit, fonctionne sous Windows, macOS et Linux, et c’est de très loin l’éditeur le plus utilisé par les développeurs selon les enquêtes annuelles de Stack Overflow. Tout ce que vous apprendrez dedans vous resservira ensuite, quel que soit le langage.
La version 2017 de cet article recommandait Brackets : Adobe en a arrêté le développement en 2021, ne l’installez plus. Si vous cherchez une alternative à VS Code, les deux options sérieuses sont Sublime Text (payant, avec une période d’évaluation illimitée) et Notepad++ (gratuit, Windows uniquement).
Pour voir votre page se recharger automatiquement à chaque enregistrement, installez dans VS Code l’extension Live Preview (éditée par Microsoft) ou Live Server. Côté navigateur, Chrome, Firefox ou Edge se valent pour débuter : tous les trois embarquent des outils de développement complets, accessibles avec la touche F12.
Comment fonctionne le langage HTML
HTML signifie HyperText Markup Language. Ce n’est pas un langage de programmation mais un langage de balisage : il sert à structurer le contenu d’une page et à donner du sens à chaque morceau (ceci est un titre, ceci est un paragraphe, ceci est une image).
La brique de base est l’élément : une balise ouvrante, du contenu, une balise fermante. Par exemple, pour un paragraphe on utilise la balise p :
<p>Bienvenue sur mon site !</p> Certaines balises n’ont pas de contenu et s’écrivent seules, sans balise fermante : on les appelle balises orphelines (ou void elements). C’est le cas de <br>, qui force un retour à la ligne, ou de <img>, qui insère une image :
<p>Première ligne<br>Seconde ligne</p> J’ai vérifié ce comportement dans Chrome 150 en préparant cette mise à jour : le texte s’affiche bien sur deux lignes, alors que sans le <br> il resterait sur une seule.
Dernière notion : les attributs, des informations supplémentaires placées dans la balise ouvrante. Une image se déclare par exemple <img src="photo.jpg" alt="Description de la photo"> : l’attribut src indique le fichier à afficher, l’attribut alt le texte de remplacement. Sachez aussi que les balises se répartissent en deux grandes familles d’affichage, détaillées dans les balises de type block et inline.
La structure de base d’une page HTML
Toute page web, du plus petit exercice au plus gros site, repose sur le même squelette :
<!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</title>
</head>
<body>
<p>Bienvenue sur mon site !</p>
</body>
</html> La première ligne, <!DOCTYPE html>, indique au navigateur que la page est écrite en HTML moderne. Les anciennes versions du langage exigeaient une déclaration interminable avec l’adresse d’un document de définition (la fameuse DTD) ; HTML5 a réduit tout cela à une seule ligne, toujours identique.
Vient ensuite la balise <html lang="fr">, l’élément racine qui englobe toute la page. L’attribut lang annonce la langue du contenu : les lecteurs d’écran s’en servent pour choisir la bonne voix, et les moteurs de recherche pour comprendre à qui s’adresse la page.
À l’intérieur, la page a une tête et un corps. Le <head> contient les informations sur la page, qui ne s’affichent pas dans son contenu : le <title> (le titre visible dans l’onglet du navigateur), la balise <meta charset="UTF-8"> (l’encodage des caractères) et la balise <meta name="viewport">, indispensable pour que la page s’affiche correctement sur mobile.
Le charset n’est pas une option décorative. Test réalisé pour cette mise à jour : la même page servie sans <meta charset="UTF-8">, Chrome 150 retombe sur un vieil encodage par défaut (windows-1252) et « l’été » s’affiche « lété ». Une ligne dans le head vous évite ce genre de surprise. Pour aller plus loin, j’ai détaillé les balises utiles de cette section dans 5 balises à connaître pour le head.
Le <body>, enfin, contient tout ce que le navigateur affiche. En ouvrant l’exemple ci-dessus dans Chrome, on obtient exactement ce qu’on attend : « Ma première page » dans l’onglet, « Bienvenue sur mon site ! » dans la page.
Indenter son code dès le début
Prenez tout de suite l’habitude de décaler chaque sous-élément d’un niveau, comme dans l’exemple : head et body sont décalés par rapport à html, title par rapport à head. On voit d’un coup d’œil qui contient quoi, et les erreurs de balise mal fermée sautent aux yeux.
Bonne nouvelle : vous n’avez pas à le faire à la main. Dans VS Code, le raccourci Maj + Alt + F (sous Windows) reformate tout le document d’un coup, et l’éditeur indente automatiquement pendant la frappe.
Et maintenant ?
Vous avez un éditeur installé, le vocabulaire (élément, balise, attribut) et le squelette d’une page qui fonctionne. L’étape suivante consiste à structurer un vrai contenu : c’est le rôle des 6 balises d’architecture comme header, nav ou footer.
Un point de ce guide reste flou, ou un exemple ne fonctionne pas chez vous ? Dites-le-moi en commentaire, je mets l’article à jour en fonction de vos retours.