Html et CSS : les bases du développement web enfin démystifiées

Vous ouvrez l'inspecteur du navigateur sur une page qui s'affiche mal, et là, c'est le choc : une vraie soupe de balises. Des <div> partout, des styles en ligne. Et vous vous demandez comment on est arrivé là. Vous voulez comprendre les bases du développement web ? C'est une bonne question, et la réponse tient en deux langages : HTML et CSS.

Je forme des débutants sur ce sujet depuis un moment, et il y a un chiffre qui revient sans cesse : sur la centaine de personnes que j'ai accompagnées, une seule avait réellement lu une spécification du W3C avant de se lancer. Les autres ont commencé comme moi, en copiant-collant des bouts de code sans comprendre pourquoi ça marchait.

Ce n'est pas une mauvaise méthode. C'est juste qu'elle vous fait perdre des semaines. Alors reprenons depuis le début, proprement, mais sans le ton professoral.

Les bases du développement web : HTML et CSS expliqués sans jargon

Deux rôles, une seule page. Le HTML décrit ce qu'il y a sur la page : un titre, un paragraphe, une image, un formulaire. Le CSS décide de l'apparence : la couleur, l'espacement, la disposition. Point.

Quand j'ai commencé, je mettais des balises <font> directement dans mon HTML pour changer la couleur de mes titres. Ça marchait. Ça marchait tellement bien que j'ai continué pendant des mois. Puis un client m'a demandé de changer la charte graphique de son site. J'ai passé deux jours à faire des rechercher-remplacer dans 40 fichiers. Le CSS, c'est exactement ce qui évite cette galère.

Le HTML en pratique : structure minimale

Voici à quoi ressemble un fichier HTML de base. Rien d'impressionnant, mais chaque ligne a une raison d'être.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Bienvenue</h1>
  <p>Un paragraphe de texte.</p>
</body>
</html>

La balise <meta name="viewport"> est celle que tout le monde oublie et qui casse l'affichage sur mobile. Retenez-la.

Le CSS en pratique : premières propriétés

Le fichier style.css, lui, contient des règles. Un sélecteur, puis des propriétés entre accolades.

body {
  font-family: system-ui, sans-serif;
  color: #222;
  line-height: 1.6;
}

h1 {
  color: #0a4;
  margin-bottom: 0.5em;
}

Franchement, avec ces six lignes, on obtient déjà une page lisible. La suite, c'est de la nuance.

Le box model est le concept qui débloque tout. Chaque élément HTML est une boîte avec un contenu, du padding (espace intérieur), une border, et une margin (espace extérieur). Quand vous comprenez ça, vous arrêtez de vous battre contre les marges qui s'effondrent.

HTML et CSS sont-ils vraiment des langages de programmation ?

Non. Et cette distinction n'est pas un caprice de puriste.

Un langage de programmation exécute une logique : il compare, boucle, prend des décisions. Le HTML et le CSS ne font rien de tout ça. Le HTML est un langage de balisage : il décrit une structure. Le CSS est un langage de description de présentation : il décrit une apparence. Aucun des deux ne dit "si X alors Y".

Cela ne les rend pas moins intéressants. Cela explique juste pourquoi, quand vous ajoutez du JavaScript, vous avez l'impression de changer complètement de métier. C'est normal : vous passez de la description à l'exécution.

Créer un site web avec HTML et CSS : un exemple complet

Assez de théorie. Voici un mini-projet que je fais systématiquement faire à mes débutants : une page de présentation d'une seule colonne, avec un en-tête, du contenu et un pied de page.

Le HTML sémantique

<body>
  <header>
    <h1>Cabinet Dupont</h1>
    <nav>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="services">
      <h2>Nos services</h2>
      <p>Accompagnement comptable pour TPE.</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Cabinet Dupont</p>
  </footer>
</body>

Remarquez les balises <header>, <nav>, <main>, <section>, <footer>. Ce sont des balises HTML5 dites sémantiques. Elles ne changent rien visuellement à elles seules, mais elles disent au navigateur et aux lecteurs d'écran ce que fait chaque zone.

La mise en page avec Flexbox

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #f5f5f5;
}

nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #0a4;
}

Avec display: flex, le titre et le menu se placent automatiquement côte à côte, sans float, sans positionnement absolu. Il y a dix ans, cette même mise en page demandait une dizaine de lignes de CSS fragile. Aujourd'hui, trois.

Technique	Époque	Ce qu'elle coûtait
Tableaux imbriqués	années 2000	HTML illisible, inaccessible
Float + clearfix	années 2010	Un hack CSS par mise en page
Flexbox	aujourd'hui	Quelques propriétés, comportement prévisible

Sur les projets que je suis, Flexbox et Grid ont remplacé la quasi-totalité des anciens positionnements. Quand je reprends un vieux fichier avec du float, j'ai presque un mouvement de recul. Pas par snobisme : parce que ce code casse dès qu'on touche à la largeur d'un écran.

Apprendre HTML et CSS gratuitement : par où commencer réellement

La question que l'on me pose le plus souvent n'est pas "quel langage apprendre" mais "par où je commence, concrètement". Voici ma réponse, en quatre étapes.

1. Installez un éditeur de code. VS Code fait très bien l'affaire, il est gratuit et gère l'auto-complétion HTML et CSS.
2. Créez un fichier index.html et un fichier style.css. Reliez-les avec la balise <link>. C'est le geste fondateur.
3. Reproduisez une page existante. Pas de tutoriel à suivre à la lettre : ouvrez un site simple que vous aimez et essayez de refaire son en-tête.
4. Validez votre code. Le validateur du W3C signale les erreurs de structure. Je l'ai ignoré pendant des mois. Erreur : mes pages s'affichaient bien sur mon navigateur, mais de travers sur d'autres.

Comptez quelques semaines pour être à l'aise avec les bases, et beaucoup plus pour la maîtrise réelle. Ce n'est pas une course.

Faut-il apprendre JavaScript tout de suite ?

Pas nécessairement. Vous pouvez construire un site statique complet avec HTML et CSS seuls. Le JavaScript devient utile quand vous voulez du comportement : un menu qui s'ouvre, un formulaire validé côté client, un contenu chargé dynamiquement. Ma règle : apprenez JavaScript quand vous ressentez le manque, pas avant.

Les bonnes pratiques que personne ne vous dit au début

Mes débutants écrivent presque tous le même type de code pendant leurs premières semaines. Ce n'est pas grave, mais voici ce qui change tout quand on le corrige.

Séparez le fond de la forme

Aucun style dans le HTML. Pas de style="" en attribut, pas de balises de présentation. Tout va dans la feuille de style. Cette discipline paraît contraignante au début ; elle vous fera gagner des jours entiers sur un projet qui vit plus de six mois.

Pensez accessibilité dès le début

Une balise <nav> au lieu d'un <div>, un attribut alt sur chaque image, un contraste de couleurs suffisant. Ce sont trois habitudes qui prennent trente secondes chacune. Reprises après coup sur un site complet, elles demandent des heures. J'ai retapé un site entier pour ça une fois. Je ne l'ai pas refait depuis.

Un CSS qui ne devient pas ingérable

Sur un petit projet, un seul fichier suffit. Au-delà de quelques centaines de lignes, il faut organiser : un fichier pour les variables globales, un pour la mise en page, un pour les composants. Le CSS n'a pas de portée locale (sauf à utiliser des outils comme les modules ou Tailwind, mais c'est un autre sujet). Sans organisation, vous finirez par écrire des règles que vous n'oserez plus supprimer, de peur de casser quelque chose.

Bref, HTML et CSS ne sont pas compliqués. Ils sont juste plus profonds qu'ils n'en ont l'air. La bonne nouvelle : ils pardonnent les erreurs. Vous pouvez casser, recommencer, tester dans votre navigateur sans rien risquer.

Alors ouvrez un éditeur, écrivez trois lignes, regardez ce que ça donne. La suite viendra d'elle-même.