Sommaire
- Comprendre HTML : la structure d’une page web
- Découvrir CSS : la mise en forme
- Le modèle de boîte et les propriétés de mise en page
- Flexbox : la mise en page simplifiée
- Le responsive design : s’adapter à tous les écrans
- Mise en pratique : construire une page complète
- Après HTML et CSS : les prochaines étapes
- Outils de développement indispensables
- Héberger votre premier projet HTML/CSS
Dans cet article
- required : active la validation native du navigateur.
- <!DOCTYPE html> : indique au navigateur qu’il s’agit d’un document HTML5.
- block : occupe toute la largeur disponible (div, p, h1 par défaut).
- VS Code : l’éditeur de code le plus populaire.
- Can I Use : (caniuse.com) : vérifiez la compatibilité navigateur de chaque propriété CSS avant de l’utiliser.
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-décoration: 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
.élément {
/* 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-décoration: 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’adapté à 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 remplacé 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.
Après HTML et CSS : les prochaines étapes
Une fois les bases HTML et CSS maîtrisées, voici la suite logique de votre apprentissage :
JavaScript : l’interactivité
JavaScript est le troisième pilier du web. Il ajoute l’interactivité : menus déroulants, formulaires dynamiques, animations, requêtes AJAX. Commencez par les bases (variables, fonctions, DOM manipulation) avant de vous lancer dans un framework.
Un framework front-end
React, Vue.js ou Svelte. React domine le marché de l’emploi, Vue.js est le plus accessible pour les débutants, Svelte est le plus performant. Choisissez en fonction de votre objectif professionnel.
Le back-end
Le choix se pose entre PHP et Python (ou Node.js). PHP pour le web classique et WordPress, Python pour la data et les API modernes. Consultez notre article comparatif pour faire votre choix. Pour les frameworks PHP, Laravel est le plus accessible pour commencer.
WordPress : l’application pratique immédiate
Avec vos bases HTML/CSS, vous pouvez déjà créer un site WordPress et personnaliser un thème. C’est le moyen le plus rapide de passer de la théorie à la pratique et de montrer un résultat concret. Ajoutez les bons plugins et vous avez un site professionnel.
Outils de développement indispensables
- VS Code : l’éditeur de code le plus populaire. Extensions recommandées : Live Server (aperçu en temps réel), Emmet (raccourcis HTML/CSS), Prettier (formatage automatique).
- Chrome DevTools (F12) : l’outil de débogage CSS le plus puissant. Modifiez les styles en temps réel, inspectez le DOM, analysez les performances.
- Git et GitHub : le contrôle de version est indispensable dès vos premiers projets. Même pour du HTML/CSS simple, versionner votre code vous sauvera la vie.
- Figma (gratuit) : pour prototyper vos designs avant de coder. Un designer n’est pas obligatoire si vous partez d’un modèle Figma existant.
- Can I Use (caniuse.com) : vérifiez la compatibilité navigateur de chaque propriété CSS avant de l’utiliser.
Héberger votre premier projet HTML/CSS
Pour mettre votre site en ligne :
- GitHub Pages (gratuit) : la solution la plus simple pour un site statique HTML/CSS. Un
git pushet votre site est en ligne. Consultez notre guide sur l’hébergement web gratuit. - Netlify (gratuit) : déploiement automatique depuis GitHub, avec domaine personnalisé et SSL.
- Hébergement mutualisé : pour un site avec PHP (WordPress), un hébergeur comme o2switch (6 €/mois) ou Hostinger (3 €/mois) est la solution standard. Consultez notre comparatif des hébergeurs.
Pour un parcours complet du débutant au développeur professionnel, suivez notre roadmap développement web 2026.
Mettez votre premier site en ligne
De la théorie à la pratique : créez et hébergez votre site WordPress.
À retenir
- L’attribut required active la validation native du navigateur.
- La propriété box-sizing: border-box est essentielle.
- Comprendre HTML : la structure d’une page web : point clé développé dans cet article.
- Découvrir CSS : la mise en forme : point clé développé dans cet article.
Questions fréquentes
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.
Ingénieur système et expert hébergement web. Fondateur de web-city.fr, il partage guides pratiques, comparatifs objectifs et outils gratuits pour choisir le bon hébergeur et créer son site WordPress.