# Comprendre une URL comme un(e) dev

**Salut !**  
Si tu codes depuis peu, ou si tu as déjà cliqué sur un lien ou tapé une adresse dans ton navigateur, tu as utilisé une URL. Tu sais, ce truc qu’on copie-colle 50 fois par jour sans trop y penser ? 😅

Eh bien aujourd’hui, on va parler d’**URL**, et je vais te décortiquer ça à la sauce dev : clair, imagé, et sans prise de tête. 😁

---

## C’est quoi une URL ?

Une **URL** (Uniform Resource Locator), c’est l’adresse complète d’une ressource sur Internet.  
Un peu comme le chemin vers un fichier… sauf qu’au lieu de pointer vers ton disque dur, ça vise des trucs sur des serveurs.

## Structure d’une URL

Prenons cet exemple :

```plaintext
https://example.com:80/blog?search=test&sort_by=created_at#header
```

### 1\. `https://` — Le protocole

C’est la première partie de l’URL. Elle indique **comment** ton navigateur va communiquer avec le serveur.  
Un peu comme choisir entre téléphoner 📞 ou envoyer un SMS 💬.

Quelques exemples :

* `http` : HyperText Transfer Protocol (le plus classique)
    
* `https` : version **sécurisée** avec chiffrement TLS 🔒
    

> Depuis les années 2010, Google pousse au HTTPS : les sites non sécurisés sont moins bien référencés.

En bref : c’est le **langage** utilisé pour envoyer une requête et recevoir une réponse.  
Un genre de `fetch()` universel.

---

### 2\. [`example.com`](http://example.com) — Le domaine

C’est le **nom du serveur** qui héberge la ressource.  
Comparable à un **numéro de rue**, mais version Internet.

Ce nom est traduit en adresse IP grâce au **DNS** (Domain Name System), le bottin du web.

Structure typique :

* **Sous-domaine** : `www`, `blog`, `api`
    
* **Domaine principal** : `example`, `openai`, `google`
    
* **Extension (TLD)** : `.com`, `.fr`, `.io`, `.dev`
    

```javascript
const domaine = {
  sousDomaine: "www",
  nom: "example",
  extension: ".com"
};
```

---

### 3\. `:80` — Le port

Le **port**, c’est la **porte d’entrée** de la requête vers le serveur.

* `80` : par défaut pour `http`
    
* `443` : pour `https`
    

Souvent invisible, car les navigateurs les ajoutent automatiquement selon le protocole.

Mais si tu codes en Node.js ou Express, tu connais sûrement :

```javascript
app.listen(3000);
```

---

### 4\. `/blog` — Le chemin

Le **chemin**, c’est la **route vers la ressource** sur le serveur.  
Comme les dossiers dans ton projet, mais côté serveur.

> Plus il y a de `/`, plus tu descends dans l’arborescence.

Dans les frameworks modernes (Vue, React, Angular…), ce chemin est souvent géré par le **router** côté client.

---

### 5\. `?search=test&sort_by=created_at` — Les paramètres de requête

Après le `?`, on trouve les **informations envoyées au serveur** via la méthode GET.

Structure : `clé=valeur`  
Chaque paire est séparée par `&`.

Exemple :  
`?q=vuejs&page=2`

En backend :

* Express.js : `req.query`
    
* PHP : `$request->query()`
    

---

### 6\. `#header` — Le fragment (ou ancre)

Le **fragment**, c’est le petit `#` qui te **téléporte** dans la page.

Tu connais sûrement :

```xml
<a href="#section-3">Aller à la section 3</a>
```

Ça dit au navigateur : “scroll direct là-bas”.

---

## URL absolue vs relative

Les URL, ce sont des **chemins**. Et il y a deux types :

### URL absolue

Elle contient **tout** : protocole, domaine, chemin complet.

```abap
https://site.com/blog/article
```

### URL relative

Elle dépend du **contexte actuel** (la page en cours, le niveau du dossier, etc.).

```plaintext
/blog/article           // relatif à la racine
../images/pic.jpg       // monte d’un dossier
```

---

## En résumé

* **Lire une URL** → comprendre ce que fait ton navigateur
    
* **Écrire une URL propre** → améliorer la navigation, le SEO, l’accessibilité
    

Maîtriser les URL, c’est poser la **première pierre** d’un web solide.

---

Si tu as aimé ce genre de décryptage, n’hésite pas à me le dire ou à poser tes questions en commentaire ! 🚀