Comment fonctionne le Web ?
Avant d'écrire la moindre ligne de code, comprendre ce qui se passe entre le navigateur et un fichier HTML — les bases de tout développeur web.
Quand tu tapes une URL dans ton navigateur, il envoie une requête HTTP à un serveur distant. Ce serveur répond en renvoyant un fichier texte — ton code HTML. Le navigateur lit ce fichier ligne par ligne et construit la page visuellement : c'est le rendu.
Les trois langages du Web
Le squelette — les balises organisent l'information
Couleurs, polices, espacements, layout
Animations, formulaires, requêtes dynamiques
Structure d'un projet
mon-projet/
├── index.html ← page principale (toujours ce nom)
├── style.css ← feuille de styles CSS
├── script.js ← JavaScript (optionnel au début)
└── images/
└── photo.jpg Pour tester tes fichiers : ouvre index.html directement dans Chrome ou Firefox, ou installe l'extension Live Server dans VS Code pour un rechargement automatique à chaque sauvegarde.
Comment le navigateur lit ton code
Le navigateur lit le HTML de haut en bas, ligne par ligne. Quand il rencontre une balise <link> vers un CSS, il charge et applique les styles. Quand il rencontre un <script>, il stoppe le rendu, exécute le JS, puis reprend. C'est pourquoi l'ordre dans le <head> compte.
DOCTYPE & structure de base
Chaque fichier HTML commence par des lignes obligatoires. Voici ce que signifie exactement chaque ligne du gabarit de départ — et pourquoi on ne peut pas les sauter.
Le gabarit minimal complet
<!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, monde !</h1> <p>Ma toute première page web.</p> </body> </html>
Explication ligne par ligne
| Ligne | Rôle & explication |
|---|---|
| <!DOCTYPE html> | Déclaration de type. Indique HTML5 au navigateur. Sans elle, le navigateur entre en "quirks mode" — un mode de compatibilité hérité d'IE qui peut casser ton rendu de manière imprévisible. |
| <html lang="fr"> | Élément racine. Contient toute la page. L'attribut lang déclare la langue : utilisé par les lecteurs d'écran et Google pour l'indexation géographique. |
| <head> | En-tête invisible. Métadonnées, titre, liens CSS. Rien ici n'est directement affiché dans la page. |
| <body> | Corps visible. Tout le contenu vu par l'utilisateur se place ici. |
Un seul <h1> par page. La hiérarchie fonctionne comme un plan de document : un titre principal unique (<h1>), des sections (<h2>), des sous-sections (<h3>). Ne saute jamais de niveau pour des raisons visuelles — utilise le CSS pour la taille.
Anatomie d'une balise HTML
<!-- balise attribut valeur --> <a href="https://exemple.com">Cliquer</a> <!-- ouvrante fermante --> <!-- Balises auto-fermantes (pas de contenu) --> <img src="photo.jpg" alt="Description"> <meta charset="UTF-8"> <br> <!-- retour à la ligne --> <hr> <!-- séparateur thématique -->
Le <head> en détail
L'en-tête est invisible pour l'utilisateur, mais fondamental — il configure le navigateur, le SEO, les polices et les styles avant d'afficher la première ligne de la page.
Le head complet et commenté
<head> <!-- 1. Encodage — TOUJOURS en premier --> <meta charset="UTF-8"> <!-- 2. Responsive mobile --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 3. Description Google (max 155 caractères) --> <meta name="description" content="Résumé affiché dans les résultats Google"> <!-- 4. Auteur --> <meta name="author" content="Votre Nom"> <!-- 5. Titre de l'onglet (max 60 caractères) --> <title>Page — Nom du Site</title> <!-- 6. Favicon --> <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- 7. Google Fonts — préconnexion puis police --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"> <!-- 8. Feuille de styles CSS — en dernier --> <link rel="stylesheet" href="style.css"> </head>
Référence complète
| Balise / attribut | Rôle & impact |
|---|---|
| charset="UTF-8" | Encodage universel. Gère accents, emojis, caractères spéciaux. À placer avant le <title> — le navigateur doit connaître l'encodage pour afficher le titre correctement. |
| name="viewport" | Responsive. Sans cette ligne, un mobile affiche la page à 980px et la réduit — illisible. Indique d'utiliser la vraie largeur de l'écran. |
| name="description" | SEO indirect. Texte visible dans les résultats Google sous le titre. Pas un facteur de ranking direct, mais améliore le taux de clic. Max 155 caractères. |
| <title> | Onglet + Google. Le seul texte visible du <head> dans le navigateur. Format : Page — Site. Google affiche ~60 caractères. |
| rel="preconnect" | Performance. Lance la connexion au serveur de polices en avance. Réduit le temps de chargement des Google Fonts. |
| rel="stylesheet" | CSS. Lie la feuille de style. Le navigateur bloque l'affichage jusqu'à son chargement — évite le flash de page non stylisée (FOUC). |
| rel="icon" | Favicon. Icône dans l'onglet et les favoris. Format .ico pour la compatibilité max, .svg pour la modernité. |
Ordre des <link> CSS : quand plusieurs feuilles de styles sont liées, la dernière chargée écrase les règles identiques des précédentes. C'est la cascade — le C de CSS.
L'importance de la sémantique HTML
Choisir la bonne balise, c'est donner du sens au contenu — pas seulement le mettre en forme. C'est le fondement d'un code professionnel, accessible et bien référencé.
Une balise sémantique décrit la nature de son contenu, pas son apparence. Par exemple, <nav> signifie "zone de navigation" — ce n'est pas juste un bloc qui contiendrait des liens. Le navigateur, Google et les technologies d'assistance comprennent cette information.
Le mauvais réflexe du débutant : utiliser <div> pour tout. Un <div> est un conteneur générique neutre — il ne signifie rien. À utiliser seulement quand aucune balise sémantique ne convient.
Comparaison : avec et sans sémantique
<div id="header">
<div id="logo">...</div>
<div id="menu">
<div><a>Accueil</a></div>
<div><a>Blog</a></div>
</div>
</div>
<div id="content">
<div class="article">
<div class="title">Titre</div>
<div class="text">...</div>
</div>
</div>
<div id="footer">...</div> <header>
<img src="logo.svg" alt="Logo">
<nav>
<ul>
<li><a>Accueil</a></li>
<li><a>Blog</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Titre</h1>
<p>Contenu...</p>
</article>
</main>
<footer>...</footer> Pourquoi c'est crucial — 4 raisons
<main> ou listent tous les <nav>. Sans sémantique, impossible. <article> est perçu comme plus important que dans un <div> générique. container-inner-wrap. querySelector('nav') est plus robuste que '#menu-top-wrap'. Moins de classes arbitraires. Les balises sémantiques HTML5 à connaître
| Balise | Rôle & usage |
|---|---|
| <header> | En-tête du site ou d'une section — logo, titre, navigation principale. Peut apparaître plusieurs fois. |
| <nav> | Bloc de navigation principal. Contient des liens de menu. Un nav secondaire (fil d'Ariane) est aussi valide. |
| <main> | Contenu principal et unique de la page. Un seul par page. Exclut header, nav, footer. |
| <article> | Contenu autonome et redistribuable : billet de blog, carte produit, commentaire. Peut fonctionner seul. |
| <section> | Groupe thématique de contenu avec un titre. Plus spécifique que <div>, moins autonome qu'<article>. |
| <aside> | Contenu secondaire : encart, publicité, liens connexes, biographie de l'auteur. |
| <footer> | Pied de page du site ou d'une section — copyright, liens légaux, contact. |
| <figure> + <figcaption> | Illustration autonome avec légende. L'image et sa description forment une unité indépendante. |
Balises HTML essentielles
Les briques de base pour structurer texte, liens, listes et images — avec le bon usage de chaque balise et les pièges courants à éviter.
Titres & paragraphes
<h1>Titre principal — un seul par page</h1> <h2>Titre de section</h2> <h3>Sous-section</h3> <p>Paragraphe de texte courant.</p> <!-- Mise en valeur sémantique --> <p>Utilisez <strong>gras important</strong> et <em>italique emphase</em> pour le sens, pas pour le style.</p> <hr> <!-- Séparateur thématique --> <br> <!-- Retour à la ligne (parcimonie) -->
Liens <a>
<!-- Lien externe — nouvel onglet + sécurité --> <a href="https://example.com" target="_blank" rel="noopener noreferrer">Visiter</a> <!-- Lien interne (même site) --> <a href="contact.html">Page contact</a> <!-- Ancre — lien vers une section de la page --> <a href="#section-2">Aller à la section 2</a> <section id="section-2">...</section> <!-- Liens spéciaux --> <a href="mailto:contact@exemple.fr">M'écrire</a> <a href="tel:+33612345678">Appeler</a>
Sécurité obligatoire : tout lien avec target="_blank" doit avoir rel="noopener noreferrer". Sans ça, la page ouverte peut accéder à ta fenêtre via window.opener — une faille connue permettant le détournement de ta page.
Listes <ul> <ol> <li>
<!-- Liste non ordonnée (puces) — ordre non important --> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Liste ordonnée (numérotée) — ordre important --> <ol> <li>Créer index.html</li> <li>Lier style.css</li> <li>Ouvrir dans le navigateur</li> </ol> <!-- Navigation = liste de liens (sémantique correcte) --> <nav> <ul> <li><a href="/">Accueil</a></li> <li><a href="/blog">Blog</a></li> </ul> </nav>
Images <img> <figure>
<!-- Image simple --> <img src="images/photo.jpg" alt="Description précise pour les lecteurs d'écran" width="800" height="450"> <!-- Image avec légende (sémantique recommandée) --> <figure> <img src="schema.png" alt="Schéma de l'architecture réseau"> <figcaption>Fig. 1 — Architecture du réseau local</figcaption> </figure> <!-- Image décorative : alt vide (ignorée par les lecteurs d'écran) --> <img src="decoration.png" alt="">
L'attribut alt n'est pas optionnel. Une image sans alt est inaccessible aux malvoyants, pénalisée par Google et invalide W3C. Si l'image est purement décorative, utilise alt="" (vide) — les lecteurs d'écran l'ignoreront.
Introduction au CSS
CSS (Cascading Style Sheets) contrôle l'apparence de chaque élément HTML — couleur, taille, police, espacement, mise en page. Sans CSS, une page ressemble à un document texte brut.
Syntaxe de base
/* Sélecteur par balise — cible TOUS les h1 */ h1 { color: #1a1a2e; font-size: 2rem; /* 1rem = 16px par défaut */ font-weight: 700; /* 400=normal, 700=gras */ } /* Sélecteur de classe — cible class="carte" */ .carte { background: white; border-radius: 8px; padding: 1.5rem; border: 1px solid #eee; } /* Sélecteur d'id — unique par page */ #entete { position: sticky; top: 0; } /* Pseudo-classe — au survol */ a:hover { color: #0066cc; text-decoration: underline; } /* Sélecteur descendant — p dans article */ article p { line-height: 1.8; }
Variables CSS — bonne pratique absolue
/* Définir les variables dans :root (portée globale) */ :root { --couleur-principale: #0066cc; --couleur-fond: #f8fafc; --couleur-texte: #1e293b; --police: 'Inter', sans-serif; --rayon: 8px; } /* Utiliser les variables avec var() */ body { background: var(--couleur-fond); color: var(--couleur-texte); font-family: var(--police); } .bouton { background: var(--couleur-principale); border-radius: var(--rayon); }
Définis toujours tes couleurs et polices dans des variables :root. Pour changer le thème entier de ton site, tu modifies 3 lignes au lieu de faire un rechercher-remplacer dans tout le fichier.
La cascade et la spécificité
| Priorité | Type de règle | Exemple |
|---|---|---|
| 1 (+ élevée) | Style inline | style="color:red" |
| 2 | Sélecteur par id | #titre { color: blue } |
| 3 | Sélecteur par classe | .titre { color: green } |
| 4 (- élevée) | Sélecteur par balise | h1 { color: gray } |
Le Box Model
Chaque élément HTML est une boîte composée de 4 couches concentriques. Comprendre ce modèle est indispensable pour maîtriser tous les espacements et éviter les décalages mystérieux.
Représentation visuelle
width × height
| Couche | Rôle | Exemple CSS |
|---|---|---|
| content | Le contenu réel. width et height définissent cette couche par défaut. | width: 300px |
| padding | Espace intérieur entre contenu et bordure. Prend la couleur de fond de l'élément. | padding: 1.5rem |
| border | Bordure visible. Peut être solide, pointillée, en tirets, double… | border: 2px solid #333 |
| margin | Espace extérieur transparent entre cet élément et ses voisins. | margin: 2rem 0 |
Le piège du box-sizing
/* width annoncée = 300px
taille réelle = 300+40+4
= 344px ! */
.boite {
width: 300px;
padding: 20px; /* +40px */
border: 2px solid; /* +4px */
}
/* Résultat : DÉBORDE ! */ /* width = 300px tout compris.
padding et border sont
inclus dans cette valeur. */
* { box-sizing: border-box; }
.boite {
width: 300px; /* = 300px réels */
padding: 20px;
border: 2px solid;
} Règle n°1 de tout projet CSS : commence toujours ton style.css par * { box-sizing: border-box; }. Sans ça, tous tes calculs de largeur seront faux et tu passeras des heures à chercher pourquoi les éléments débordent.
Raccourcis padding / margin
/* 1 valeur : identique sur les 4 côtés */ padding: 1rem; /* 2 valeurs : haut/bas gauche/droite */ padding: 1rem 2rem; /* 4 valeurs : haut droite bas gauche (sens horaire) */ padding: 10px 20px 10px 20px; /* Centrer un bloc horizontalement */ .conteneur { width: 800px; margin: 0 auto; /* gauche/droite = automatique */ }
Flexbox — mise en page moderne
Flexbox résout en quelques lignes ce qui demandait des hacks CSS pendant des années. C'est le système de mise en page le plus utilisé aujourd'hui — indispensable pour tout développeur web.
Propriétés du conteneur flex
.conteneur { display: flex; /* active Flexbox */ flex-direction: row; /* row | column */ justify-content: center; /* axe principal */ align-items: center; /* axe secondaire */ gap: 1rem; /* espace entre enfants */ flex-wrap: wrap; /* retour à la ligne */ } /* Propriétés sur les enfants */ .enfant { flex: 1; /* prend l'espace disponible */ flex: 0 0 200px; /* largeur fixe */ align-self: flex-start; /* override align-items */ }
Démo interactive — justify-content
Référence justify-content
| Valeur | Effet |
|---|---|
| flex-start | Éléments regroupés au début (gauche en row, haut en column) |
| flex-end | Éléments regroupés à la fin |
| center | Éléments centrés sur l'axe |
| space-between | Premier à gauche, dernier à droite, espace égal entre |
| space-around | Espace égal autour de chaque élément (demi-espace aux extrémités) |
| space-evenly | Espace parfaitement identique partout, y compris aux extrémités |
Exemple : header responsive
<!-- HTML --> <header class="entete-site"> <a class="logo-site" href="/">MonSite</a> <nav> <ul class="liste-nav"> <li><a href="/">Accueil</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header> /* CSS */ .entete-site { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } .liste-nav { display: flex; list-style: none; gap: 2rem; } /* Mobile : passe en colonne sous 640px */ @media (max-width: 640px) { .entete-site { flex-direction: column; } .liste-nav { gap: 1rem; } }
Tu as maintenant les bases complètes du HTML & CSS. Prochaines étapes recommandées : CSS Grid pour les mises en page 2D complexes, les Media Queries pour le responsive avancé, et CSS Transitions pour les animations simples.
