GUIDES / DÉVELOPPEMENT

HTML, CSS et JavaScript : le guide approfondi

← Tous les guides
Développement Débutant 4 juin 2026 12 min de lecture par Les Techniciens du Net

HTML, CSS et JavaScript : le guide approfondi

Le trio de base du web, en profondeur : structurer avec HTML, mettre en forme avec CSS (box model, Flexbox, Grid), rendre interactif avec JavaScript (DOM, événements, fetch). Du débutant à l'intermédiaire, avec des exemples.

#developpement#html#css#javascript

En bref

Tout site web repose sur le même trio de base : HTML structure le contenu, CSS le met en forme, JavaScript le rend interactif. Le panorama des langages les présente ; ce guide va plus loin, du débutant à l’intermédiaire, avec des exemples concrets. C’est la base que tous les frameworks utilisent par-dessous.

HTML — structurer le contenu

HTML décrit ce qu’est chaque morceau de contenu à l’aide de balises. Un élément a souvent une balise ouvrante, un contenu, une balise fermante, et parfois des attributs.

<a href="https://exemple.fr" title="Visiter">Mon lien</a>

Ici <a> est l’élément (un lien), href et title sont des attributs, et « Mon lien » est le contenu.

La structure d’une page

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Bonjour</h1>
    <p>Mon premier paragraphe.</p>
  </body>
</html>

Le <head> contient les informations (titre, encodage, liens vers le CSS) ; le <body> contient le contenu visible.

Les balises sémantiques (niveau intermédiaire)

Plutôt que d’empiler des <div> génériques, on utilise des balises qui ont un sens : <header>, <nav>, <main>, <article>, <section>, <footer>. Cela améliore l’accessibilité (lecteurs d’écran) et le SEO (les moteurs comprennent mieux la page).

  • Liens et images : <a href="...">, <img src="..." alt="description">. L’attribut alt est essentiel (accessibilité + SEO).
  • Listes : <ul> (à puces), <ol> (numérotée), avec des <li>.
  • Formulaires : <form>, <label>, <input> (avec des types : text, email, tel, checkbox…), <button>. Associer un <label> à son champ est une bonne pratique d’accessibilité.

CSS — mettre en forme

CSS applique des règles de style à des éléments choisis par un sélecteur.

p { color: #333; font-size: 16px; }       /* tous les paragraphes */
.intro { font-weight: bold; }              /* les éléments de classe "intro" */
#menu { background: #f5f5f5; }             /* l'élément d'id "menu" */

Quand plusieurs règles s’appliquent, c’est la spécificité qui tranche (un #id l’emporte sur une .classe, qui l’emporte sur une balise).

Le modèle de boîte (box model)

Chaque élément est une boîte composée, de l’intérieur vers l’extérieur, de : contenu → padding (marge intérieure) → border (bordure) → margin (marge extérieure). Le comprendre, c’est régler 80 % des problèmes de mise en page.

Les unités et les couleurs

  • px (pixels, fixe), % (relatif au parent), em/rem (relatif à la taille de police).
  • Couleurs : #0B66FF, rgb(11,102,255), ou un nom (red).

Flexbox et Grid (niveau intermédiaire)

Deux systèmes de disposition modernes :

  • Flexbox — pour aligner des éléments sur une dimension (une ligne ou une colonne). Idéal pour une barre de navigation.
  • Grid — pour des mises en page en deux dimensions (lignes et colonnes). Idéal pour une grille de cartes.
.barre { display: flex; gap: 16px; justify-content: space-between; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

Responsive et variables

  • Responsive (adaptation mobile) avec les media queries, en commençant par le mobile (mobile-first) :
@media (min-width: 768px) { .grille { grid-template-columns: repeat(4, 1fr); } }
  • Variables CSS (custom properties) pour centraliser les valeurs réutilisées :
:root { --bleu: #0B66FF; }
a { color: var(--bleu); }

JavaScript — rendre interactif

JavaScript ajoute le comportement : réagir aux clics, modifier la page, échanger avec un serveur.

Variables, types, fonctions

const nom = "Marie";        // ne sera pas réassignée
let compteur = 0;           // pourra changer
compteur = compteur + 1;

function saluer(prenom) {
  return "Bonjour " + prenom;
}

Types courants : texte (string), nombre, booléen (true/false), tableau ([]), objet ({}).

Le DOM : lire et modifier la page

Le DOM est la représentation de la page que JavaScript peut manipuler.

const titre = document.querySelector("h1");
titre.textContent = "Titre modifié";

Les événements

const bouton = document.querySelector("#valider");
bouton.addEventListener("click", () => {
  alert("Bouton cliqué !");
});

Récupérer des données : fetch et async (niveau intermédiaire)

Pour échanger avec une API, on utilise fetch(). Comme la réponse arrive plus tard, on emploie async/await :

async function chargerMeteo() {
  const reponse = await fetch("https://api.exemple.fr/meteo");
  const donnees = await reponse.json();
  console.log(donnees.temperature);
}

Les données arrivent souvent en JSON, un format texte simple que JavaScript lit nativement.

Comment les trois s’assemblent

Imaginez un bouton « J’aime » : HTML le déclare (<button>), CSS le colore et l’arrondit, JavaScript écoute le clic et met à jour le compteur. Chacun reste dans son rôle — c’est cette séparation structure / style / comportement qui rend un site maintenable.

Par où commencer et s’entraîner

  1. Un simple éditeur de texte et un navigateur suffisent : pas d’installation compliquée.
  2. Ouvrez les outils de développement du navigateur (touche F12) pour inspecter le HTML, tester du CSS en direct et lire la console JavaScript.
  3. Avancez petit : une page, un style, une interaction. Puis combinez.
  4. Quand vos projets grandissent, le passage à un framework s’appuiera exactement sur ces bases.

À retenir

HTML structure, CSS habille, JavaScript anime — trois rôles complémentaires. En maîtrisant les balises sémantiques, le box model, Flexbox/Grid, puis le DOM, les événements et fetch, vous tenez le socle de tout le développement web. Tout le reste, frameworks compris, se construit là-dessus.

Testez vos connaissances

0 / 6

  1. À quoi sert l'attribut `alt` d'une image en HTML ?

  2. Le « modèle de boîte » (box model) en CSS décrit…

  3. Pour disposer des éléments en deux dimensions (lignes ET colonnes), on utilise plutôt…

  4. En JavaScript, `const` déclare…

  5. Le DOM, c'est…

  6. La fonction `fetch()` sert à…