La question qu'on me pose le plus souvent quand quelqu'un apprend que je code : « Il faut vraiment apprendre le HTML et le CSS en 2026, ou on peut zapper ? » Et là, je vois deux réactions. Ceux qui pensent que l'IA écrit le code à leur place, donc pourquoi s'embêter. Et ceux qui ouvrent un éditeur pour la première fois, tétanisés à l'idée de voir un écran blanc.
Vérité peu élégante : créer son premier site web avec HTML et CSS reste le passage obligé, même à l'heure où Claude et ChatGPT pondent des balises en deux secondes. Parce qu'un code que vous ne comprenez pas, vous ne pouvez ni le corriger ni l'adapter. Vous subissez.
Dans cet article, je vous montre par où je passerais si je recommençais aujourd'hui. Environnement concret, code qui tourne, erreurs qui font perdre une soirée. Pas de survol théorique.
Points clés à retenir
- HTML = structure, CSS = apparence. Ne mélangez pas les deux dès le départ.
- Installez Visual Studio Code + l'extension Live Server : vous voyez vos modifications dans le navigateur à chaque sauvegarde.
- Votre premier fichier s'appelle
index.html. Toujours. - Pour publier gratuitement : GitHub Pages, Netlify ou Vercel. Aucune carte bancaire.
- L'inspecteur du navigateur (F12) est l'outil que vous utiliserez le plus, toute votre vie de codeur.
- Personne ne retient les balises par cœur. On les cherche. Tout le temps.
Avant d'écrire une ligne de code, réglez votre atelier
C'est le point que tous les tutos sautent. On vous balance « ouvrez un fichier HTML » comme si c'était évident. Sauf que pour un vrai débutant, c'est là que ça coince. J'ai vu une amie rester bloquée deux heures parce que son fichier s'appelait siteweb.txt et s'ouvrait dans le Bloc-notes.
Les trois outils à installer
- Visual Studio Code (gratuit, Windows/Mac/Linux). C'est l'éditeur que j'utilise tous les jours.
- L'extension Live Server, à installer en trois clics depuis le panneau Extensions.
- Un navigateur moderne. Chrome, Firefox, Edge, peu importe. Mais un navigateur à jour.
Live Server change la vie du débutant. Au lieu de sauvegarder, puis rafraîchir manuellement, vous cliquez sur « Go Live » en bas à droite de VS Code, et votre page se recharge seule à chaque Ctrl+S. Franchement, ce petit confort m'a fait gagner des heures quand j'ai commencé.
Le piège du nom de fichier
Windows cache les extensions par défaut. Résultat : vous croyez créer index.html, vous créez en réalité index.html.txt. Le navigateur affiche votre code brut, pas la page. Si ça vous arrive, activez l'affichage des extensions dans l'explorateur de fichiers. Ça m'a coûté une soirée entière, la première fois.
La structure HTML : la colonne vertébrale de votre page
Le HTML décrit ce que contient la page. Une image, un paragraphe, un titre. Rien de plus. C'est bête comme chou, mais on l'oublie vite.
Un squelette minimal qui fonctionne
Collez ceci dans votre index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bonjour</h1>
<p>Ma première page web.</p>
</body>
</html>Trois choses à retenir là-dedans.
lang="fr"indique la langue. Utile pour les lecteurs d'écran et le référencement.meta charset="UTF-8"évite les accents qui deviennent des petits carrés bizarres.<link rel="stylesheet" href="style.css">relie votre feuille CSS. Sans cette ligne, votre CSS ne sert à rien.
Ce dernier point, c'est l'erreur n°1 des débutants. On écrit un CSS magnifique, on ouvre la page, et rien ne change. Neuf fois sur dix, c'est le chemin du fichier qui est faux, ou le <link> oublié.
Le CSS : la couche qui change tout visuellement
Une page HTML sans CSS, c'est moche. Mais fonctionnel. Et c'est une bonne nouvelle : vous pouvez commencer par écrire du HTML pur, le tester, voir le contenu, puis seulement après vous soucier de l'apparence.
Les trois premières propriétés à maîtriser
Ne cherchez pas à tout apprendre d'un coup. Commencez avec color, font-size et background-color. C'est tout.
body {
font-family: system-ui, sans-serif;
background-color: #f5f5f5;
color: #222;
max-width: 700px;
margin: 40px auto;
padding: 0 20px;
}
h1 {
color: #0a4d8c;
}Le max-width: 700px avec margin: 40px auto centre votre contenu et empêche vos lignes de s'étirer sur toute la largeur d'un grand écran. En typographie web, au-delà de 80 caractères par ligne, l'œil décroche. Je ne le savais pas quand j'ai commencé, et je me demandais pourquoi mes longs paragraphes étaient épuisants à lire.
La spécificité CSS : le sujet qui fâche
Quand une règle ne s'applique pas, ce n'est presque jamais parce que vous avez mal écrit. C'est parce qu'une autre règle, plus spécifique, gagne la bataille. Le sélecteur #titre bat .titre, qui bat h1.
Ma méthode quand je bute : j'ouvre l'inspecteur (F12), je clique sur l'élément, et je regarde quel style est barré. Le navigateur me dit exactement qui gagne. Utilisez-le. Tout le temps.
| Sélecteur | Exemple | Poids |
|---|---|---|
| Élément | p | Faible |
| Classe | .intro | Moyen |
| Identifiant | #header | Fort |
| Style en ligne | style="…" | Très fort |
À éviter donc : le style en ligne et les identifiants pour styler. Réservez #id aux ancres et au JavaScript. Utilisez des classes.
Publier votre site : le chaînon que personne n'explique
Vous avez un fichier qui marche sur votre ordinateur. Bravo. Sauf que personne d'autre ne le voit. Et c'est là que la majorité des tutos s'arrêtent, en vous laissant avec un site invisible.
GitHub Pages, gratuit et sans carte bancaire
Créez un compte GitHub, un dépôt nommé mon-site, glissez-y votre index.html et votre style.css. Dans les paramètres du dépôt, section Pages, activez la publication depuis la branche principale. Vingt secondes plus tard, votre site est accessible à une adresse du type votrepseudo.github.io/mon-site.
Netlify et Vercel font la même chose, avec un glisser-déposer de dossier encore plus simple. Si vous voulez juste montrer un projet à quelqu'un, passez par là. Pour un vrai nom de domaine (monsite.fr), comptez une dizaine d'euros par an chez un registrar. Rien d'obligatoire au départ.
Le piège des chemins relatifs
En local, votre CSS se charge avec href="style.css". Sur le web, ça marche aussi. Mais si vous mettez votre CSS dans un sous-dossier, href="css/style.css", la casse compte. Sur votre Mac, Style.css et style.css sont deux fichiers différents selon le système. Sur un serveur Linux, non. Deux de mes anciens projets sont partis en production avec un CSS invisible pour cette raison.
Les erreurs qui font perdre des heures
Si je devais lister les seules choses qui m'ont vraiment ralenti quand j'apprenais :
- Balise non fermée. Un
<div>sans</div>et tout le reste de la page part en vrille. - Mélanger HTML et CSS. Un style écrit directement dans une balise, c'est une dette technique dès le premier jour.
- Ne pas sauvegarder avant de vérifier. Évident. On le fait tous.
- Vouloir apprendre Flexbox et Grid dès la première heure. Apprenez d'abord à afficher un titre et un paragraphe.
- Copier du code sans le lire. Ça marche une fois, puis vous êtes bloqué à la première modification.
Le point qu'on n'entend jamais : accepter d'être lent. Les trois premiers jours, tout semble confus. La quatrième journée, quelque chose se débloque. Ce n'est pas linéaire, c'est un palier après un autre.
Faut-il encore apprendre le HTML et le CSS quand l'IA code à notre place ?
Oui, et voici pourquoi. L'IA génère du code plausible, mais elle se trompe régulièrement sur les détails de contexte. Un chemin relatif mal deviné, une propriété CSS dépréciée, une structure sémantique bâclée. Si vous ne savez pas lire ce qu'elle produit, vous ne pouvez pas détecter l'erreur. Et un site qui ne s'affiche pas, c'est un site qui ne sert à rien.
Apprendre les bases vous donne un autre pouvoir : celui de décrire précisément ce que vous voulez. Demander « centre cette div verticalement » à une IA donne un résultat correct. Demander « fais-moi un beau site » donne un résultat générique et creux. La précision de votre vocabulaire technique est directement proportionnelle à la qualité de ce que vous obtenez.
Et après ?
Un jour, vous écrirez votre dixième fichier HTML et vous ne regarderez plus la documentation pour un <a href>. Ce jour-là, vous pourrez attaquer Flexbox, puis Grid, puis le responsive. Dans cet ordre. Pas avant.
Mais il y a une chose que je n'ai comprise qu'après plusieurs mois : le vrai apprentissage ne vient pas de la lecture, il vient du fait de casser quelque chose. Modifier un sélecteur, voir tout disparaître, comprendre pourquoi, corriger. C'est inconfortable. C'est aussi la seule méthode qui laisse une trace.
Alors plutôt que de chercher le énième cours PDF gratuit « complet », ouvrez un éditeur. Écrivez une page avec votre nom et trois paragraphes. Publiez-la. Vous en saurez plus en deux heures qu'en trois semaines de lecture passive.
