La question qu'on me pose le plus souvent quand quelqu'un apprend à coder, c'est : « mais par où je commence, concrètement ? ». Pas « quel langage est le meilleur », pas « faut-il faire une école ». Non : par où je commence. Et la réponse est plus simple qu'on ne le croit. Pour créer son premier site, il vous faut deux choses : le HTML pour poser le contenu, le CSS pour lui donner une allure. Rien d'autre. Pas de framework, pas de Node, pas de terminal. Un éditeur de texte, un navigateur, et une après-midi devant vous.
Je le dis d'autant plus volontiers que ma première page web était un désastre. Un fond gris, un titre en Comic Sans par défaut, et une image qui ne s'affichait pas parce que j'avais écrit le chemin en majuscules alors que mon fichier commençait par une minuscule. J'ai mis quarante minutes à comprendre l'erreur. Quarante minutes pour une lettre. C'est ça, apprendre le HTML et le CSS : des erreurs minuscules et des déclics énormes.
Points clés à retenir
- Le HTML structure le contenu, le CSS le met en forme. Ces deux rôles ne se mélangent pas.
- Vous n'avez besoin d'aucun logiciel payant : un éditeur gratuit et un navigateur suffisent.
- La première page tient en vingt lignes. Le reste vient en ajoutant des balises, une par une.
- Le CSS s'écrit dans un fichier séparé, jamais directement dans le HTML.
- Un projet fil rouge (votre CV, une page de recettes, un portfolio) vaut mieux que dix exercices isolés.
- La mise en ligne est gratuite et prend une quinzaine de minutes une fois la page terminée.
Comment fonctionnent vraiment le HTML et le CSS ?
La plupart des débutants mélangent les deux dès la deuxième heure. C'est l'erreur de départ la plus fréquente, et elle coûte cher plus tard. Alors prenons une image simple.
Le HTML, c'est le squelette d'une maison : les murs, les portes, les fenêtres. Il dit « ici il y a un titre », « ici il y a un paragraphe », « ici il y a une image ». Il ne dit jamais « ce titre est en bleu et en gros ». Le CSS, lui, s'occupe de la décoration : la peinture, les rideaux, la couleur des portes. Il dit « tous les titres de niveau 1 sont en bleu, en gras, avec de l'espace en dessous ».
Le rôle du HTML : donner du sens
Une page HTML n'est qu'un fichier texte. Vous l'écrivez, vous l'enregistrez avec l'extension .html, vous l'ouvrez dans votre navigateur. C'est tout. Le navigateur lit votre texte et l'interprète selon les balises que vous avez posées.
Chaque balise a un sens précis. Un <h1> signale le titre principal de la page. Un <p> signale un paragraphe. Une balise <nav> signale une zone de navigation. Ce n'est pas de la décoration : c'est de la sémantique. Un lecteur d'écran pour personne malvoyante s'appuie sur cette sémantique pour restituer correctement le contenu. J'y reviendrai, parce que c'est l'angle que presque personne n'aborde quand on débute, et c'est une vraie lacune.
Le rôle du CSS : gérer l'apparence
Le CSS vit dans un fichier séparé, nommé par convention style.css. On le relie au HTML par une seule ligne dans l'en-tête du document. À partir de là, une règle CSS s'applique à toutes les pages qui pointent vers ce fichier. Vous changez une couleur à un endroit, elle change partout.
C'est ce qui rend le CSS puissant. Et c'est aussi ce qui le rend déroutant au début : on ne sait pas toujours pourquoi une règle ne s'applique pas. Spoiler : dans neuf cas sur dix, c'est une question de priorité entre deux règles qui se contredisent. On y vient plus bas.
Votre premier fichier HTML, ligne par ligne
Créons quelque chose de réel. Ouvrez votre éditeur, créez un fichier nommé index.html. Le nom index n'est pas un hasard : c'est le fichier que les serveurs web cherchent en priorité quand on visite un site.
Voici la structure minimale, et je vous conseille de la taper à la main plutôt que de la copier. Vos doigts doivent mémoriser les balises.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Ma première page</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Bonjour</h1> <p>Ceci est mon premier paragraphe.</p> </body> </html>
Décortiquons, parce que chaque ligne compte.
- <!DOCTYPE html> : annonce au navigateur qu'il lit du HTML moderne. Sans elle, il bascule dans un mode de compatibilité hérité et votre mise en page part de travers.
- lang="fr" : indique la langue du contenu. Utile pour les moteurs de recherche, pour la synthèse vocale, et pour les règles de césure.
- meta charset="utf-8" : sans cette ligne, vos accents s'affichent en charabia. C'est la cause n°1 des « é » qui apparaissent à la place des « é ».
- <head> vs <body> : tout ce qui décrit la page va dans head, tout ce qui s'affiche va dans body. Ne confondez jamais les deux.
Enregistrez, double-cliquez sur le fichier. Le navigateur s'ouvre avec votre titre et votre paragraphe. Vous venez de créer un site. Bon, il est moche. Passons au CSS.
Donner une allure correcte avec le CSS
Créez maintenant un fichier style.css dans le même dossier. Reliez-le au HTML avec la balise link déjà présente dans l'exemple ci-dessus. Puis écrivez ceci :
body {
font-family: system-ui, sans-serif;
max-width: 700px;
margin: 0 auto;
padding: 2rem;
line-height: 1.6;
color: #222;
}
h1 {
color: #1a5fb4;
border-bottom: 2px solid #ddd;
padding-bottom: 0.5rem;
} Rechargez la page. La différence est immédiate : le texte respire, il est centré dans une colonne lisible, la police est celle de votre système, le titre est bleu avec un filet en dessous. Six propriétés CSS, et la page ne ressemble plus à un document brut des années 90.
Le modèle des boîtes, la notion à ne pas rater
En CSS, chaque élément est une boîte rectangulaire. Cette boîte a un contenu, une marge intérieure (padding), une bordure, et une marge extérieure (margin). Comprendre ce modèle, c'est comprendre 80 % des problèmes de mise en page.
Le piège classique : vous donnez une largeur de 100 % à un élément, vous ajoutez un padding de 20 pixels, et l'élément déborde de l'écran. Pourquoi ? Parce que par défaut, la largeur ne compte que le contenu, pas le padding. La solution tient en une ligne, à placer en haut de votre feuille de style :
* { box-sizing: border-box; } Cette règle change la façon dont le navigateur calcule les largeurs. Avec elle, une largeur de 100 % inclut le padding et la bordure. Je l'ajoute systématiquement sur tous mes projets. Sans elle, on passe son temps à faire des soustractions à la main, ce qui est absurde en 2026.
Quel éditeur et quel hébergement choisir ?
On me demande souvent de comparer les éditeurs. Franchement, au niveau débutant, la différence est marginale. Le vrai critère, c'est celui qui vous fera ouvrir votre fichier le plus souvent.
| Outil | Ce qu'il apporte | Pour qui |
|---|---|---|
| Visual Studio Code | Coloration du code, aperçu intégré, milliers d'extensions gratuites | Le choix par défaut, très bien documenté |
| Notepad++ ou TextEdit | Rien de spécial, mais immédiatement disponible | Pour tester si vous ne voulez rien installer |
| Éditeurs en ligne type CodePen | Aucune installation, un rendu visible en direct | Pour partager un exemple ou bricoler sur un ordinateur emprunté |
Côté mise en ligne, deux options gratuites suffisent largement. GitHub Pages héberge un site statique directement depuis un dépôt de code, ce qui vous force à apprendre Git au passage — un bonus, pas une punition. Netlify fait la même chose avec une interface plus simple et un glisser-déposer de dossier. Dans les deux cas, comptez quinze minutes la première fois, cinq les suivantes.
Le nom de domaine, lui, se paie. Une dizaine d'euros par an pour une adresse en .fr ou .com. Vous pouvez commencer sans, avec l'adresse fournie par l'hébergeur, puis basculer plus tard.
Les erreurs qui font perdre des heures aux débutants
Après avoir accompagné pas mal de gens sur leurs premiers pas, je vois revenir les mêmes blocages. Les voici, avec la solution à chacun.
Mon image ou ma feuille de style ne se charge pas
Dans la grande majorité des cas, le chemin est faux. Vérifiez trois choses dans cet ordre : les majuscules (le serveur fait la différence, votre ordinateur parfois non), le dossier de destination, et l'extension du fichier. Un styles.css au lieu de style.css et rien ne s'applique, sans aucun message d'erreur. Ouvrez la console du navigateur (touche F12) : les fichiers manquants y apparaissent en rouge.
Ma règle CSS est ignorée
Deux règles se disputent le même élément, et la plus spécifique gagne. Une règle ciblant une classe bat une règle ciblant une balise. Une règle avec !important bat tout le reste — raison pour laquelle il faut l'éviter absolument : il masque le problème au lieu de le résoudre.
J'ai tout mis dans des <div>
C'est l'erreur que je vois le plus chez ceux qui apprennent le code HTML gratuitement en ligne, parce que la plupart des tutoriels montrent des <div> partout. Réservez-les aux regroupements sans sens particulier. Pour le reste, utilisez <header>, <nav>, <main>, <article>, <footer>. Votre page sera plus lisible pour vous, mieux comprise par les moteurs de recherche, et utilisable par les lecteurs d'écran.
Ce dernier point mérite qu'on s'y arrête. Rendre une page accessible n'est pas un supplément d'âme réservé aux grosses structures : c'est une conséquence directe d'un HTML bien écrit. Un texte alternatif sur chaque image, un contraste suffisant entre le texte et le fond, des titres hiérarchisés dans le bon ordre. Trois habitudes à prendre dès le premier jour, parce qu'on ne les rajoute jamais après coup.
Un projet de bout en bout plutôt que dix exercices
Voici ce qui a le plus changé ma façon d'apprendre, et ce que je recommande systématiquement : choisissez un projet unique et menez-le jusqu'à sa mise en ligne.
Un CV en ligne est le candidat idéal. Il contient assez d'éléments pour tout pratiquer, sans être décourageant.
- Un en-tête avec votre nom et un titre de poste.
- Une section expérience, avec des paragraphes et des listes.
- Une photo, donc la gestion des chemins et du texte alternatif.
- Un lien vers votre profil professionnel, stylisé.
- Une mise en page en deux colonnes sur grand écran, empilée sur mobile.
Chacune de ces étapes vous fera buter sur une notion précise. C'est exactement ce qu'on veut. Un déclic se produit quand on a un problème à résoudre, jamais quand on lit une explication abstraite.
Quand tout tient debout sur votre machine, publiez. Le passage en ligne change tout : vous envoyez une vraie adresse à quelqu'un, et le rapport au projet devient sérieux. C'est à ce moment-là que la plupart des gens comprennent enfin pourquoi ils apprenaient tout ça.
Et après, on apprend quoi ?
Une fois votre page posée, deux chantiers naturels s'ouvrent. Le premier, c'est la mise en page moderne : Flexbox pour aligner des éléments sur une ligne ou une colonne, Grid pour les grilles en deux dimensions. Comptez une semaine pour être à l'aise avec Flexbox, deux pour Grid. Ce sont les deux seules choses de CSS qui justifient qu'on s'y attarde longtemps.
Le second chantier, c'est le responsive. Une page doit tenir sur un téléphone. Les requêtes de média vous permettent d'appliquer des règles différentes selon la largeur de l'écran. La bonne méthode, en 2026, c'est de concevoir d'abord pour mobile, puis d'élargir. L'inverse produit des pages qu'on finit par rafistoler.
Ce que je ne vous conseille pas, en revanche, c'est de sauter immédiatement vers un framework. J'ai vu trop de débutants apprendre React avant d'avoir compris ce qu'est une balise. Ils savent faire fonctionner une application, mais pas expliquer pourquoi elle fonctionne. Ça finit toujours par se voir.
Le HTML et le CSS ne sont pas des technologies spectaculaires. Elles ne vous feront pas décrocher un entretien parce que vous les connaissez. Mais elles sont la base de tout ce qui s'affiche dans un navigateur, y compris des interfaces que vous admirez et qui vous paraissent inaccessibles. La première page que vous mettrez en ligne ne sera probablement pas belle. Gardez-la quand même quelque part. Dans six mois, vous l'ouvrirez et vous comprendrez exactement ce que vous avez appris.
