HTML et CSS sont les deux piliers de toute page web. Le premier structure le contenu, le second le met en forme. Chaque site que vous consultez, du plus simple au plus sophistiqué, repose sur ces deux langages. Et la bonne nouvelle : ils sont accessibles à quiconque sait utiliser un ordinateur.
Contrairement aux langages de programmation comme JavaScript ou Python, HTML et CSS ne nécessitent aucune notion préalable en informatique. Pas de logique complexe, pas d’algorithmes, pas de mathématiques. Vous écrivez du code, vous enregistrez le fichier, vous l’ouvrez dans un navigateur, et vous voyez immédiatement le résultat. Cette boucle de feedback instantanée rend l’apprentissage concret et motivant.
Ce guide vous accompagne de la première ligne de code jusqu’à la création d’une page web responsive complète. Chaque concept est illustré par un exemple que vous pouvez copier, modifier et tester. En fin de lecture, vous aurez les bases nécessaires pour construire vos propres pages et poursuivre vers JavaScript et les frameworks modernes.
Comprendre HTML : la structure d’une page web
HTML signifie HyperText Markup Language. Ce n’est pas un langage de programmation, c’est un langage de balisage. Il définit la structure et le sens du contenu : ceci est un titre, cela est un paragraphe, voici une image, là c’est un lien.
La structure de base d’un document HTML
Tout document HTML suit la même ossature :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde</h1>
<p>Ceci est mon premier paragraphe HTML.</p>
</body>
</html>Décortiquons chaque élément :
- <!DOCTYPE html> : indique au navigateur qu’il s’agit d’un document HTML5
- <html lang= »fr »> : l’élément racine, avec la langue du document
- <head> : les métadonnées (encodage, titre, liens vers les feuilles de style)
- <body> : le contenu visible de la page
Les balises HTML essentielles
HTML compte plus de 100 balises, mais une vingtaine suffisent pour la majorité des pages. Voici les indispensables :
<!-- Titres (6 niveaux) -->
<h1>Titre principal (un seul par page)</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<!-- Texte -->
<p>Un paragraphe de texte.</p>
<strong>Texte important (gras)</strong>
<em>Texte accentué (italique)</em>
<!-- Liens et images -->
<a href="https://example.com">Un lien</a>
<img src="photo.jpg" alt="Description de l'image">
<!-- Listes -->
<ul>
<li>Élément de liste non ordonnée</li>
</ul>
<ol>
<li>Élément de liste ordonnée</li>
</ol>
<!-- Structure sémantique -->
<header>En-tête de page</header>
<nav>Navigation</nav>
<main>Contenu principal</main>
<section>Section thématique</section>
<article>Contenu autonome</article>
<footer>Pied de page</footer>Les balises sémantiques (header, nav, main, section, article, footer) n’ont aucun effet visuel par défaut. Elles indiquent au navigateur et aux moteurs de recherche le rôle de chaque bloc de contenu. Utilisez-les systématiquement.
Les formulaires HTML
Les formulaires permettent de collecter des informations auprès de l’utilisateur :
<form action="/envoyer" method="POST">
<label for="nom">Votre nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Votre email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Votre message :</label>
<textarea id="message" name="message" rows="4"></textarea>
<button type="submit">Envoyer</button>
</form>L’attribut required active la validation native du navigateur. Les types d’input (email, tel, url, number, date) ajoutent des contraintes de format automatiques.
Découvrir CSS : la mise en forme
CSS signifie Cascading Style Sheets (feuilles de style en cascade). Il contrôle l’apparence visuelle de tout ce que HTML a structuré : couleurs, polices, espacement, mise en page, animations.
Les trois méthodes pour appliquer du CSS
Vous pouvez intégrer du CSS de trois manières. La troisième est la seule recommandée en production :
<!-- 1. CSS inline (à éviter) -->
<p style="color: red; font-size: 18px;">Texte rouge</p>
<!-- 2. CSS interne (pour les tests) -->
<style>
p { color: blue; }
</style>
<!-- 3. CSS externe (recommandé) -->
<link rel="stylesheet" href="style.css">Les sélecteurs CSS
Les sélecteurs déterminent quels éléments HTML sont ciblés par vos règles de style :
/* Sélecteur d'élément */
p {
color: #333;
line-height: 1.6;
}
/* Sélecteur de classe (le plus utilisé) */
.card {
background: #fff;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Sélecteur d'ID (un seul par page) */
#header {
background: #0F172A;
color: #E2E8F0;
}
/* Sélecteur combiné */
.card p {
margin-bottom: 0.5rem;
}
/* Pseudo-classes */
a:hover {
color: #2563EB;
text-decoration: underline;
}
button:focus {
outline: 2px solid #2563EB;
outline-offset: 2px;
}La spécificité détermine quelle règle l’emporte en cas de conflit. L’ordre de priorité : inline > ID > classe > élément. En pratique, utilisez principalement les classes pour éviter les problèmes de spécificité.
Le modèle de boîte et les propriétés de mise en page
Chaque élément HTML est un rectangle invisible. Le modèle de boîte (box model) définit comment ce rectangle est dimensionné.
Les quatre couches du box model
.element {
/* Contenu */
width: 300px;
height: 200px;
/* Espacement intérieur */
padding: 20px;
/* Bordure */
border: 2px solid #E5E7EB;
/* Espacement extérieur */
margin: 16px;
/* IMPORTANT : inclure padding et border dans le calcul de la largeur */
box-sizing: border-box;
}La propriété box-sizing: border-box est essentielle. Sans elle, un élément de 300px de large avec 20px de padding occupe en réalité 340px. Avec border-box, la largeur totale reste 300px. Appliquez-la globalement :
/* Appliquer border-box à tous les éléments */
*, *::before, *::after {
box-sizing: border-box;
}
/* Reset de base recommandé */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1F2937;
}Display et positionnement
La propriété display contrôle le comportement de chaque élément :
- block : occupe toute la largeur disponible (div, p, h1 par défaut)
- inline : s’inscrit dans le flux du texte (span, a, strong par défaut)
- inline-block : comme inline, mais accepte width et height
- none : masque complètement l’élément
- flex et grid : les outils de mise en page modernes (voir section suivante)
Flexbox : la mise en page simplifiée
Flexbox est la méthode de mise en page la plus utilisée en CSS moderne. Elle permet d’aligner, distribuer et réorganiser des éléments dans un conteneur avec une simplicité remarquable.
Les bases de Flexbox
/* Conteneur flex */
.container {
display: flex;
gap: 1rem; /* Espacement entre les éléments */
}
/* Alignement horizontal */
.container-center {
display: flex;
justify-content: center; /* centre, flex-start, flex-end, space-between, space-around */
}
/* Alignement vertical */
.container-vertical {
display: flex;
align-items: center; /* center, flex-start, flex-end, stretch, baseline */
}
/* Centrer parfaitement un élément */
.container-perfect-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Retour à la ligne automatique */
.container-wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
/* Élément flexible */
.item {
flex: 1; /* Occupe l'espace disponible proportionnellement */
}
.item-fixed {
flex: 0 0 300px; /* Largeur fixe de 300px */
}Exemple pratique : une barre de navigation
<nav class="navbar">
<a href="/" class="logo">MonSite</a>
<ul class="nav-links">
<li><a href="/about">À propos</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #0F172A;
color: #E2E8F0;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
}
.nav-links a {
color: #E2E8F0;
text-decoration: none;
}
.nav-links a:hover {
color: #60A5FA;
}
</style>Exemple pratique : grille de cartes
<div class="cards-grid">
<div class="card">
<h3>Projet 1</h3>
<p>Description du projet.</p>
</div>
<div class="card">
<h3>Projet 2</h3>
<p>Description du projet.</p>
</div>
<div class="card">
<h3>Projet 3</h3>
<p>Description du projet.</p>
</div>
</div>
<style>
.cards-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 2rem;
}
.card {
flex: 1 1 300px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>Le responsive design : s’adapter à tous les écrans
Un site responsive s’adapte à la taille de l’écran, du smartphone au grand moniteur. En 2026, plus de 60% du trafic web provient des mobiles. Un site non responsive perd des visiteurs et du référencement.
Les media queries
Les media queries appliquent des styles conditionnels selon la largeur de l’écran :
/* Styles par défaut (mobile first) */
.container {
padding: 1rem;
}
.cards-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Tablettes (768px et plus) */
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 768px;
margin: 0 auto;
}
.cards-grid {
flex-direction: row;
flex-wrap: wrap;
}
.card {
flex: 1 1 calc(50% - 0.5rem);
}
}
/* Desktop (1024px et plus) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
.card {
flex: 1 1 calc(33.333% - 1rem);
}
}Les unités responsives
Préférez les unités relatives aux unités fixes :
- rem : relatif à la taille de police racine (1rem = 16px par défaut). Utilisez-le pour les marges, paddings, tailles de police.
- % : relatif au parent. Utile pour les largeurs.
- vw / vh : relatif à la largeur / hauteur de la fenêtre. 100vw = largeur totale de l’écran.
- em : relatif à la taille de police du parent. Utile pour les composants autonomes.
/* Images responsives */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Typographie fluide */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
p {
font-size: clamp(0.9rem, 2vw, 1.125rem);
max-width: 65ch; /* Largeur de lecture optimale */
}La fonction clamp() définit une taille minimale, une taille idéale proportionnelle, et une taille maximale. Elle remplace avantageusement les media queries pour la typographie.
Mise en pratique : construire une page complète
Voici un squelette de page qui combine tous les concepts vus dans ce guide. Copiez ce code dans un fichier index.html, ouvrez-le dans votre navigateur, et modifiez-le à votre guise :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon portfolio</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #1F2937;
}
.header {
background: #0F172A;
color: #E2E8F0;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.hero {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, #1E3A5F, #0F172A);
color: #fff;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.section { max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; }
.cards { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.card {
flex: 1 1 300px;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 1.5rem;
}
.footer {
background: #0F172A;
color: #9CA3AF;
text-align: center;
padding: 2rem;
}
</style>
</head>
<body>
<header class="header">
<span>Mon Portfolio</span>
<nav>
<a href="#projets" style="color:#E2E8F0;margin-left:1.5rem;">Projets</a>
<a href="#contact" style="color:#E2E8F0;margin-left:1.5rem;">Contact</a>
</nav>
</header>
<section class="hero">
<h1>Développeur web junior</h1>
<p>Je crée des sites modernes, rapides et accessibles.</p>
</section>
<section id="projets" class="section">
<h2>Mes projets</h2>
<div class="cards">
<div class="card">
<h3>Projet 1</h3>
<p>Un site e-commerce responsive.</p>
</div>
<div class="card">
<h3>Projet 2</h3>
<p>Une application de gestion de tâches.</p>
</div>
<div class="card">
<h3>Projet 3</h3>
<p>Un tableau de bord analytique.</p>
</div>
</div>
</section>
<footer class="footer">
<p>2026 Mon Portfolio. Tous droits réservés.</p>
</footer>
</body>
</html>Expérimentez avec ce code. Changez les couleurs, ajoutez des sections, modifiez les tailles de police. La meilleure façon d’apprendre CSS, c’est de casser des choses et de comprendre pourquoi elles cassent. Une fois ces bases acquises, vous pouvez passer à la pratique en suivant notre guide pour créer un site WordPress en 2026, qui exploite directement vos connaissances HTML et CSS.
Pour continuer votre parcours après HTML et CSS, consultez notre roadmap complète pour apprendre le développement web en 2026. Vous pouvez aussi explorer l’ensemble de nos ressources dans la section développement web.
FAQ
Quelle est la différence entre HTML et CSS ?
HTML définit la structure et le contenu d'une page web : textes, images, liens, formulaires. CSS contrôle l'apparence visuelle de ces éléments : couleurs, polices, espacement, mise en page. Les deux fonctionnent ensemble ; HTML sans CSS produit une page fonctionnelle mais visuellement brute, CSS sans HTML n'a rien à styliser.
Faut-il apprendre HTML et CSS avant JavaScript ?
Oui, c'est fortement recommandé. JavaScript manipule les éléments HTML et modifie les styles CSS. Sans comprendre la structure d'une page et le fonctionnement du DOM, vous naviguerez à l'aveugle. Comptez 4 à 8 semaines pour maîtriser les bases HTML/CSS avant de passer à JavaScript.
Quel éditeur de code utiliser pour HTML et CSS ?
Visual Studio Code (VS Code) est le choix de référence en 2026. Il est gratuit, léger, et dispose d'extensions indispensables : Live Server (prévisualisation en temps réel), Prettier (formatage automatique), Emmet (raccourcis HTML/CSS intégrés par défaut). Les alternatives incluent Sublime Text et WebStorm, mais VS Code reste le standard de l'industrie.
Qu'est-ce que le mobile first en CSS ?
Le mobile first consiste à écrire d'abord les styles pour les petits écrans, puis à ajouter des adaptations pour les écrans plus larges via des media queries min-width. Cette approche est recommandée parce que la majorité du trafic est mobile, et qu'il est plus facile d'ajouter de la complexité (grand écran) que d'en retirer (petit écran).
Flexbox ou CSS Grid : lequel utiliser ?
Flexbox est idéal pour les mises en page unidimensionnelles (une ligne ou une colonne) : barres de navigation, listes de cartes, alignement d'éléments. CSS Grid excelle pour les mises en page bidimensionnelles (lignes et colonnes simultanément) : layouts de page complets, tableaux de bord. En pratique, la plupart des projets utilisent les deux. Commencez par Flexbox, qui couvre 80% des besoins.
Combien de temps faut-il pour apprendre HTML et CSS ?
Les bases (structure HTML, sélecteurs CSS, box model) s'acquièrent en 2 à 3 semaines de pratique régulière. La maîtrise de Flexbox, Grid, du responsive design et des bonnes pratiques demande 6 à 8 semaines. Pour atteindre un niveau permettant de reproduire n'importe quel design, comptez 3 à 4 mois. La clé est la pratique quotidienne : construisez des pages, reproduisez des sites existants.