Comment fonctionne un site web ?

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

Avant d’écrire votre première ligne de code, prenez dix minutes pour comprendre ce qui se passe réellement quand une page web s’affiche. Quand j’ai démarré ma reconversion en 2017, le soir et le week-end, c’est ce mécanisme navigateur-serveur qui a tout débloqué pour moi : une fois qu’on le visualise, chaque notion trouve sa place. Cet article est la version entièrement remise à jour du guide d’origine : HTTPS, DNS et valeurs vérifiées dans Chrome pendant la rédaction.

Et si vous vous demandez encore pourquoi apprendre tout cela, j’ai résumé ma propre motivation dans 5 bonnes raisons de devenir développeur.

Un dialogue entre deux machines : le client et le serveur

Quand vous naviguez sur le web, deux machines dialoguent : un client et un serveur. Le client, c’est votre navigateur (Chrome, Firefox, Edge, Safari...), le logiciel qui affiche les sites sur votre écran, que ce soit un ordinateur, une tablette ou un smartphone.

Le serveur, lui, est un ordinateur allumé en permanence, quelque part dans un centre de données, qui héberge les fichiers du site. Son rôle est de répondre aux demandes des clients, d’où son nom : il sert les pages, comme un serveur de restaurant apporte les plats.

Que se passe-t-il quand vous tapez une adresse ?

Tout part d’une adresse, saisie dans la barre du navigateur ou cachée derrière un lien, par exemple https://www.exemple.com/blog/mon-article. Elle se décompose en trois morceaux :

• https : le protocole, c’est-à-dire la langue commune que parlent le client et le serveur. Le S final signifie que l’échange est chiffré ;
• exemple.com : le nom de domaine, l’identité du site sur le web ;
• /blog/mon-article : le chemin, l’emplacement de la page demandée à l’intérieur du site.

Petite subtilité invisible : les machines ne se trouvent pas avec des noms de domaine mais avec des adresses IP, des suites de nombres. Avant d’envoyer sa requête, le navigateur interroge donc le DNS, une sorte d’annuaire mondial qui traduit exemple.com en adresse IP. C’est très rapide : sur ce site, j’ai mesuré une résolution DNS en 24 millisecondes environ dans Chrome pendant la rédaction de cette mise à jour.

Un mot sur le HTTPS, devenu la norme : il chiffre tout ce qui circule entre votre navigateur et le serveur, si bien que personne sur le trajet ne peut lire vos mots de passe ou vos données. Le cadenas dans la barre d’adresse indique que la connexion est chiffrée. Les sites sérieux redirigent d’office l’ancienne version non chiffrée vers la nouvelle : testé pendant la rédaction, appeler ce blog en http:// renvoie immédiatement une redirection (code 308) vers l’adresse en https://.

Pages statiques et pages dynamiques

Une fois la requête reçue, le serveur a deux façons de répondre.

Si la page est statique, le fichier existe déjà tel quel sur le serveur, qui se contente de l’envoyer. C’est le cas des sites vitrines, des documentations et des blogs comme celui que vous lisez : toutes les pages sont fabriquées à l’avance, le serveur n’a aucun calcul à faire, et c’est ce qui rend ces sites très rapides.

Si la page est dynamique, le serveur la fabrique au moment de la demande, en fonction de qui la demande. Votre fil sur un réseau social, votre panier sur un site marchand, votre boîte mail : chaque utilisateur reçoit un contenu construit pour lui, souvent à partir d’une base de données. Le serveur travaille avant de répondre.

Dans les deux cas, ce que le navigateur reçoit n’est pas une image de la page : c’est du code texte. Vérifié pendant la rédaction : la réponse du serveur pour la page d’accueil de ce site est annoncée comme text/html, autrement dit un simple document texte que le navigateur va interpréter.

Les trois langages que comprend votre navigateur

Pour transformer ce code en page visible, tous les navigateurs comprennent trois langages, chacun avec un rôle précis :

• le HTML décrit le contenu et sa structure : titres, paragraphes, images, liens ;
• le CSS gère la présentation : couleurs, tailles, espacements, mise en page ;
• le JavaScript rend la page interactive : réactions aux clics, contenus qui se mettent à jour sans recharger la page.

Voici une page complète qui utilise les trois. Le HTML pose un titre et un bouton, le CSS colore le titre, le JavaScript affiche un message quand on appuie sur le bouton. Notez la balise <title> dans le <head> : elle est obligatoire dans toute page HTML, et la ligne <meta name="viewport"> assure un affichage correct sur mobile :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Ma page</title>
    <style>
      h1 {
        color: rgb(20, 110, 190);
        font-size: 32px;
      }
    </style>
  </head>
  <body>
    <h1>Bonjour</h1>
    <button id="btn">Tester</button>
    <p id="msg"></p>
    <script>
      document.getElementById("btn").addEventListener("click", () => {
        document.getElementById("msg").textContent = "Le JavaScript a modifié la page.";
      });
    </script>
  </body>
</html>

J’ai chargé cette page dans Chrome pendant la rédaction pour vérifier chaque rôle : le titre s’affiche bien en bleu rgb(20, 110, 190) et en 32 pixels (valeurs calculées relevées dans le navigateur), le paragraphe est vide au chargement, et un clic sur le bouton y fait apparaître le message. Trois langages, trois effets distincts, mesurables.

Et côté serveur ?

Pour fabriquer des pages dynamiques, le serveur utilise d’autres langages que le navigateur. En 2017, cet article n’en citait que deux, PHP et Java ; le paysage est aujourd’hui plus varié. PHP reste très présent (il propulse notamment WordPress), et on croise aussi beaucoup JavaScript côté serveur grâce à Node.js, ainsi que Python, Java ou C#. Contrairement au trio du navigateur, on n’utilise pas ces langages ensemble : un projet en choisit un.

Quand le site doit mémoriser des informations (comptes, articles, commandes), le serveur s’appuie sur une base de données, qu’on interroge le plus souvent avec le langage SQL : enregistrer un utilisateur, retrouver une commande, lister les articles d’une catégorie.

Regarder sous le capot avec F12

Bonne nouvelle : tout ce que je viens de décrire est observable chez vous, sans rien installer. Sur ordinateur, la touche F12 (ou un clic droit puis « Inspecter ») ouvre les outils de développement du navigateur. L’onglet Éléments montre le code HTML de la page en cours, l’onglet Réseau liste toutes les requêtes échangées avec les serveurs.

Et il y en a plus qu’on ne l’imagine : une seule page déclenche souvent plusieurs requêtes, car le HTML reçu demande à son tour des fichiers CSS, des scripts, des images ou des polices. Mesuré pendant la rédaction : l’affichage de la page d’accueil de ce site déclenche 6 requêtes supplémentaires après le document HTML initial. Sur un grand site d’actualités, ce nombre se compte en dizaines.

Pour résumer

Une page web, c’est un aller-retour : votre navigateur résout le nom de domaine via le DNS, envoie une requête HTTPS au serveur, et reçoit en réponse du code. Si la page est statique, le serveur renvoie un fichier prêt à l’emploi ; si elle est dynamique, il la construit à la demande, souvent avec l’aide d’une base de données interrogée en SQL. Le navigateur interprète ensuite le HTML pour la structure, le CSS pour l’apparence et le JavaScript pour l’interactivité.

La suite logique, c’est de mettre les mains dans ces langages, en commençant par le duo de base présenté dans mon introduction sur le HTML et le CSS.

Vous pourrez ensuite écrire votre toute première page en suivant les bases pour bien débuter en HTML, qui détaille justement ce squelette complet, balise <title> comprise.

Un point reste flou ? Écrivez-moi via le formulaire de contact, je mets l’article à jour en fonction de vos retours.