Lire l'adresse avant de poster la lettre
Dans la leçon 1, tu as vu la carte du voyage : ce qui se passe entre le moment où tu tapes une adresse et le moment où la page s'affiche. On va garder l'image du courrier postal tout au long de ce cours. Ton URL, c'est l'adresse écrite sur l'enveloppe. La requête, c'est la lettre à l'intérieur, mais ça, ce sera la leçon 5.
Avant de poster quoi que ce soit, il faut savoir lire cette adresse. Une URL n'est pas une bouillie de caractères : c'est une suite de cases bien rangées, chacune avec un rôle précis. Le facteur lit le pays, puis la ville, puis la rue, puis le numéro. Ton navigateur fait pareil avec une URL.
Cette leçon décortique l'adresse case par case. À la fin, tu sauras nommer chaque morceau, tu connaîtras un piège que la plupart des devs ignorent, et tu auras un petit labo pour découper n'importe quelle URL toi-même.
Une URL, morceau par morceau
Prenons une adresse riche, avec toutes les cases remplies :
https://www.boutique.fr:443/produits/chaussures?taille=42&couleur=noir#avisChaque partie a un nom et un rôle. On lit de gauche à droite, comme une adresse postale du plus général au plus précis.
- Le scheme (
https) : le protocole, c'est-à-dire la langue que les deux machines vont parler. Icihttps, la version sûre dehttp. C'est le « par quel moyen » : courrier recommandé plutôt que carte postale. - Le host (
www.boutique.fr) : le nom du serveur à joindre. Il se lit en trois couches, de la plus précise à la plus large : le sous-domaine (www), le domaine (boutique), et le TLD (.fr), l'extension tout à droite. C'est le destinataire sur l'enveloppe. - Le port (
:443) : la « porte » sur le serveur. Une même machine peut écouter sur plusieurs ports. Tu ne le vois presque jamais, et on va voir pourquoi juste après. - Le path (
/produits/chaussures) : le chemin vers la ressource exacte, à l'intérieur du serveur. C'est le bâtiment et l'étage, une fois arrivé à la bonne adresse. - La query string (
?taille=42&couleur=noir) : des informations en plus, sous forme de pairesclé=valeur. Elle commence par un?, et chaque paire est séparée par un&. Ici :taille=42etcouleur=noir. - Le fragment (
#avis) : un repère à l'intérieur de la page, après le#. Ici, « va directement à la section avis ». Garde-le en tête : il a un secret qu'on révèle plus bas.
Pourquoi tu ne vois presque jamais le port : chaque scheme a un port par défaut. http utilise le port 80, https le port 443. Comme https://www.boutique.fr sous-entend déjà :443, l'écrire serait redondant : le navigateur le devine. Tu ne vois un port explicite que quand il sort de l'ordinaire, par exemple localhost:8000 en développement.
L'adresse sur l'enveloppe
Voici la même URL, étalée sur une ligne, chaque case surlignée d'une couleur. Garde cette image : c'est la grille de lecture de toutes les URL que tu croiseras.
Dans https://www.boutique.fr/produits/chaussures?taille=42#avis, quelle partie ne quitte jamais ton navigateur et n'arrive donc jamais sur le serveur ?
Voir la réponse
Le fragment, #avis. Tout le reste part au serveur : le host pour le joindre, le path et la query pour lui dire quoi tu veux. Mais le fragment, lui, est coupé par ton navigateur avant l'envoi. Le serveur ne le voit jamais. On explique pourquoi juste en dessous.
Deux idées fausses à corriger tout de suite
« L'URL, c'est la requête »
Non. L'URL est une adresse ; la requête est le message. Reprends l'image du courrier : l'adresse sur l'enveloppe n'est pas la lettre. Ton navigateur lit l'URL, puis construit à partir d'elle un message HTTP complet (la requête) qu'il envoie au serveur. L'URL est l'ingrédient ; la requête est le plat. On verra comment ce message est fabriqué à la leçon 5.
« Tout ce qui est dans l'URL part au serveur »
C'est le piège vedette, et presque personne ne le connaît : le fragment (la partie après #) n'est jamais envoyé au serveur. Quand tu demandes .../chaussures?taille=42#avis, ton navigateur garde #avis pour lui et n'envoie que .../chaussures?taille=42. Le fragment est traité 100 % côté client : il sert juste au navigateur pour faire défiler la page jusqu'au bon endroit, ou à une appli JavaScript pour savoir quel écran afficher.
Le piège qui coûte cher : ne mets jamais d'information dont le serveur a besoin dans le fragment. Un token, un identifiant de page, un filtre : si tu le ranges après le #, le serveur ne le recevra jamais et ton appli cassera sans message d'erreur clair. Tout ce que le serveur doit lire va dans le path ou la query string, jamais dans le fragment. (Source : web.dev, « URL parts ».)
À toi : décortique une URL
Colle n'importe quelle URL ci-dessous et clique sur Décortiquer. Ton navigateur va la découper avec l'outil new URL(), exactement comme il le fait pour de vrai. Essaie avec une URL sans port, une avec un fragment, et même une URL invalide pour voir le message d'erreur.
L'origine : retiens ce mot
Trois cases de l'URL, prises ensemble, forment ce qu'on appelle l'origine : le scheme, le host et le port. Pour https://www.boutique.fr, l'origine est exactement https://www.boutique.fr:443.
L'idée est simple mais centrale : deux URL ont la même origine si, et seulement si, leurs trois cases sont identiques. Change le scheme (de https à http), le host (de www à api) ou le port, et tu changes d'origine, même si le reste est pareil.
Graine plantée : retiens bien ce mot, origine. Il revient en force à la leçon 8, avec CORS, le mécanisme qui décide si une page d'une origine a le droit de parler à une autre origine. Tout part de cette définition : scheme + host + port.
La query string, à quoi ça sert vraiment
La query string n'est pas décorative. C'est le canal par lequel tu passes des paramètres au serveur sans changer de page. Les trois usages que tu croiseras partout :
- Filtrer :
?couleur=noir&taille=42affine une liste de produits. - Rechercher :
?q=chaussures+runningtransporte ce que tu as tapé dans une barre de recherche. - Paginer :
?page=3demande la troisième page de résultats.
Côté serveur, ces paires sont lues très simplement. En PHP, par exemple, ?taille=42 arrive dans $_GET['taille'] et vaut "42" (revois le chapitre sur les formulaires du cours PHP pour le détail).
Read the address before posting the letter
In lesson 1, you saw the map of the journey: what happens between the moment you type an address and the moment the page shows up. We'll keep the postal-mail image throughout this course. Your URL is the address written on the envelope. The request is the letter inside, but that's lesson 5.
Before posting anything, you have to know how to read that address. A URL isn't a soup of characters: it's a row of tidy boxes, each with a precise role. The postman reads the country, then the city, then the street, then the number. Your browser does the same with a URL.
This lesson takes the address apart, box by box. By the end, you'll be able to name every piece, you'll know a trap most devs ignore, and you'll have a little lab to split any URL yourself.
A URL, piece by piece
Let's take a rich address, every box filled:
https://www.boutique.fr:443/produits/chaussures?taille=42&couleur=noir#avisEach part has a name and a role. We read left to right, like a postal address, from the most general to the most precise.
- The scheme (
https): the protocol, that is, the language the two machines will speak. Herehttps, the secure version ofhttp. It's the "by what means": registered mail rather than a postcard. - The host (
www.boutique.fr): the name of the server to reach. It reads in three layers, from the most precise to the widest: the subdomain (www), the domain (boutique), and the TLD (.fr), the extension on the far right. It's the recipient on the envelope. - The port (
:443): the "door" on the server. One machine can listen on several ports. You almost never see it, and we'll see why right after. - The path (
/produits/chaussures): the path to the exact resource, inside the server. It's the building and the floor, once you've reached the right address. - The query string (
?taille=42&couleur=noir): extra information, askey=valuepairs. It starts with a?, and each pair is separated by an&. Here:taille=42andcouleur=noir. - The fragment (
#avis): a marker inside the page, after the#. Here, "jump straight to the reviews section". Keep it in mind: it has a secret we reveal below.
Why you almost never see the port: each scheme has a default port. http uses port 80, https port 443. Since https://www.boutique.fr already implies :443, writing it would be redundant: the browser infers it. You only see an explicit port when it's out of the ordinary, for example localhost:8000 in development.
The address on the envelope
Here is the same URL, spread over one line, each box highlighted in a colour. Keep this image: it's the reading grid for every URL you'll meet.
In https://www.boutique.fr/produits/chaussures?taille=42#avis, which part never leaves your browser and so never reaches the server?
Show the answer
The fragment, #avis. Everything else goes to the server: the host to reach it, the path and query to tell it what you want. But the fragment is cut off by your browser before sending. The server never sees it. We explain why right below.
Two false ideas to fix right now
"The URL is the request"
No. The URL is an address; the request is the message. Back to the mail image: the address on the envelope is not the letter. Your browser reads the URL, then builds from it a complete HTTP message (the request) that it sends to the server. The URL is the ingredient; the request is the dish. We'll see how that message is made in lesson 5.
"Everything in the URL goes to the server"
This is the headline trap, and almost nobody knows it: the fragment (the part after #) is never sent to the server. When you request .../chaussures?taille=42#avis, your browser keeps #avis for itself and only sends .../chaussures?taille=42. The fragment is handled 100% client-side: it just helps the browser scroll the page to the right spot, or a JavaScript app know which screen to show.
Beware, the trap that costs dearly: never put information the server needs in the fragment. A token, a page identifier, a filter: if you stash it after the #, the server will never receive it and your app will break with no clear error. Anything the server must read goes in the path or the query string, never in the fragment. (Source: web.dev — "URL parts".)
Your turn: take a URL apart
Paste any URL below and click Take apart. Your browser will split it using the new URL() tool, exactly as it does for real. Try one without a port, one with a fragment, and even an invalid URL to see the error message.
The origin: remember this word
Three boxes of the URL, taken together, form what we call the origin: the scheme, the host and the port. For https://www.boutique.fr, the origin is exactly https://www.boutique.fr:443.
The idea is simple but central: two URLs have the same origin if, and only if, their three boxes are identical. Change the scheme (from https to http), the host (from www to api) or the port, and you change origin, even if the rest is the same.
A seed planted: remember this word well, origin. It comes back hard in lesson 8, with CORS, the mechanism that decides whether a page from one origin is allowed to talk to another origin. It all starts from this definition: scheme + host + port.
The query string, what it's really for
The query string isn't decorative. It's the channel through which you pass parameters to the server without changing page. The three uses you'll meet everywhere:
- Filter:
?couleur=noir&taille=42narrows down a product list. - Search:
?q=chaussures+runningcarries what you typed into a search bar. - Paginate:
?page=3asks for the third page of results.
On the server side, these pairs are read very simply. In PHP, for example, ?taille=42 arrives in $_GET['taille'] and equals "42" (revisit the forms chapter of the PHP course for the details).
🎯 Pratique
S'entraîner (clique pour ouvrir) :
💬 Ré-explique sans regarder
Décris à un collègue les parties d'une URL avec l'image de l'enveloppe postale, puis explique pourquoi le fragment est un cas à part.
clé=valeur après le ?) et fragment (après le #). Le fragment est à part car il ne part jamais au serveur : il est traité côté navigateur. L'URL est l'adresse sur l'enveloppe, pas la lettre.🧠 Rappel libre
Sans remonter : de quelles trois parties est faite une origine, et pourquoi ce mot est-il important pour plus tard ?
https à http, de www à api, ou de port) crée une origine différente. Ce mot est central pour la leçon 8 : CORS décide si une origine a le droit de parler à une autre.⚖️ Juge le code de l'IA
Tu veux passer un jeton de connexion à ton serveur après un login. L'IA te propose de rediriger l'utilisateur vers https://app.boutique.fr/dashboard#token=abc123 : « Le serveur lira le token dans le fragment. » Tu acceptes, ou tu rejettes ?
#token=abc123, donc il ne pourra rien lire et la connexion cassera, sans erreur claire. C'est exactement le piège vedette de la leçon. Si le serveur doit recevoir le token, il faut le mettre là où le serveur le lit : dans le path, la query string, ou mieux pour un secret, dans un en-tête ou un cookie. Jamais après le #.https://www.boutique.fr:443/produits?couleur=noir, quelle partie est le host ?https://blog.fr/article?id=12#commentaires. Que reçoit exactement le serveur ?:443 dans une URL https ?https://www.boutique.fr/produits. Lequel de ces changements crée une origine différente ?The address is read, box by box. But your browser only has a name, www.boutique.fr, and it still doesn't know WHERE that server is on the network. Lesson 3: DNS, the giant address book of the web that turns a name into an IP address, the invisible step before every connection.
Lesson 3: DNS, the web's address book →