HTML et CSS : comprendre le rôle de chaque langage du Web

Par Sam Accolade · Publié le 21 septembre 2017 · Mis à jour le 11 août 2026

Quand j'ai commencé ma reconversion en 2017, en autodidacte, le soir et le week-end, ma première question a été : par quoi commencer ? La réponse n'a pas bougé depuis : par le HTML et le CSS. Ces deux langages n'ont pas de concurrent et se retrouvent à la base de tous les sites, du petit blog à la grande application. Cet article est une vue d'ensemble : à quoi sert chacun des deux, comment ils coopèrent dans le navigateur, et qui fait quoi exactement.

Un mot de vocabulaire avant de démarrer : le navigateur (Chrome, Firefox, Safari...) est le programme qui reçoit vos fichiers et les transforme en page visible. Si le trajet d'une page entre le serveur et votre écran reste flou, je vous recommande de lire d'abord comment fonctionne un site web.

Deux langages, deux rôles bien distincts

Le HTML (HyperText Markup Language, langage de balisage hypertexte), créé en 1991, décrit le contenu et lui donne du sens : ce texte est un titre, celui-là un paragraphe, cet élément une image, ce mot un lien. Il ne s'occupe pas de l'apparence.

Le CSS (Cascading Style Sheets, feuilles de style en cascade), apparu en 1996, s'occupe précisément de ce que le HTML ne fait pas : la mise en forme. Couleurs, tailles de texte, marges, disposition des blocs, adaptation aux écrans de téléphone : tout cela relève du CSS.

Le navigateur lit les deux et les combine : la structure d'un côté, les styles de l'autre. C'est ce que résume le schéma ci-dessous.

Ce que fait le HTML : structurer et donner du sens

Voici le fragment de HTML minimal que j'ai utilisé pour toutes les mesures de cet article :

<h1>Mon premier titre</h1>
<p>Un paragraphe avec un <a href="#">lien</a> et un mot <strong>important</strong>.</p>

Chaque balise annonce la nature de ce qu'elle contient : un titre principal, un paragraphe, un lien, un mot important. Détail intéressant : même sans une seule ligne de CSS, cette page ne s'affiche pas « brute ». Le navigateur applique sa propre feuille de style par défaut. Mesuré dans Chrome pendant la rédaction : le titre sort en 32 px et en gras (graisse 700), le paragraphe en 16 px noir, le lien en bleu (rgb(0, 0, 238)) et souligné, le mot en gras. Le HTML porte donc le sens, et le navigateur en déduit déjà un rendu de base.

Pour passer à la pratique, écrire votre première page et manipuler ces balises vous-même, direction les bases pour bien débuter en HTML : c'est l'article compagnon de celui-ci, entièrement consacré à l'écriture du HTML.

Ce que fait le CSS : la mise en forme

Reprenons exactement le même HTML et ajoutons cette feuille de style :

h1 {
  color: #1d4ed8;
  font-size: 40px;
}

p {
  font-size: 18px;
  color: #374151;
}

Sans toucher au contenu, le rendu change : mesuré dans Chrome pendant la rédaction, le titre passe de 32 px à 40 px et devient bleu (rgb(29, 78, 216)), le paragraphe passe en 18 px et en gris foncé (rgb(55, 65, 81)). Un même contenu peut ainsi prendre des apparences radicalement différentes selon la feuille de style qu'on lui applique.

Le « C » de CSS, la cascade, mérite une ligne d'explication : quand deux règles de même précision visent le même élément, la dernière déclarée l'emporte. Je l'ai vérifié dans le navigateur : en écrivant p { color: red; } puis p { color: green; }, le paragraphe s'affiche bien en vert (rgb(0, 128, 0) une fois la couleur calculée).

Là aussi, la suite logique est pratique : donner du style à une page grâce au CSS reprend ces notions pas à pas, sélecteurs et propriétés inclus.

Pourquoi séparer la structure et l'apparence ?

Cette séparation n'est pas un caprice de puristes, elle a des bénéfices très concrets :

• Un seul fichier CSS peut habiller toutes les pages d'un site : modifier une couleur à un endroit met à jour l'ensemble.
• On peut refondre entièrement l'apparence d'un site sans toucher à son contenu, et inversement corriger un texte sans risquer de casser la mise en page.
• Un HTML bien structuré est mieux compris par les moteurs de recherche et par les lecteurs d'écran, ce qui sert le référencement et l'accessibilité.
• En équipe, une personne peut travailler sur le contenu pendant qu'une autre travaille sur le style.

Et JavaScript, et les CMS dans tout ça ?

Il existe une troisième couche que je ne fais que mentionner ici : JavaScript, qui gère le comportement de la page (réagir à un clic, charger des données, animer un élément). Retenez la répartition : HTML pour la structure, CSS pour l'apparence, JavaScript pour l'interactivité.

Quant aux CMS comme WordPress, ils génèrent pour vous le HTML et le CSS, et ils font gagner un temps réel sur beaucoup de projets. Mais même en passant par un CMS, connaître ces deux langages reste un avantage : c'est ce qui permet de personnaliser un thème, de corriger une mise en page qui déborde, ou simplement de comprendre ce que l'outil produit à votre place.

Par où continuer

Vous avez maintenant la carte : le HTML structure, le CSS met en forme, le navigateur combine les deux. Le territoire, lui, se découvre en pratiquant, en commençant par les deux articles compagnons cités plus haut, celui sur les bases du HTML puis celui sur le CSS. Quand ces fondations seront posées, des notions comme le modèle de boîte vous ouvriront la porte des vraies mises en page.

Bonne découverte, et surtout : ouvrez un éditeur et essayez. C'est en écrivant vos premières lignes que ces deux langages deviennent concrets.