Localisateurs de ressources uniformes HTML
Un localisateur de ressource uniforme (URL) est une référence à une ressource web. Découvrez la syntaxe des URL, les URL relatives et absolues, et l'encodage.
Un localisateur de ressource uniforme (URL), communément appelé adresse web, est une référence à une ressource web qui spécifie son emplacement sur le réseau informatique ainsi qu'un mécanisme pour la récupérer. Une URL est un type particulier d'identificateur de ressource uniforme (URI), bien que ces deux termes soient parfois utilisés de manière interchangeable. Dans la plupart des navigateurs web, l'URL d'une page web s'affiche au-dessus de la page dans la barre d'adresse.
Une URL peut être composée de mots ou d'une adresse de protocole Internet (IP). En général, les utilisateurs saisissent le nom car il est plus facile à mémoriser que les chiffres.
Cette page explique l'anatomie d'une URL, comment les URL absolues et relatives se comportent dans les attributs HTML, comment fonctionnent les parties query et fragment, l'encodage des URL, ainsi que les schémas les plus courants.
Syntaxe des URL
La syntaxe générale d'une adresse web complète est :
scheme://host:port/path?query#fragmentAnatomie d'une URL
Selon la RFC 3986 — la spécification qui définit les URL — une URL est constituée des composants ci-dessous. Il n'existe pas de composant « nom de fichier » distinct : un nom de fichier est simplement le dernier segment du chemin (path).
| Composant | Ce qu'il spécifie |
|---|---|
| scheme | Le protocole ou le type de service à utiliser, tel que http, https ou mailto. |
| host | Le nom de domaine (par exemple www.w3docs.com) ou l'adresse IP du serveur. |
| port | Le numéro de port sur l'hôte. Il est facultatif ; 80 est la valeur par défaut pour http et 443 pour https. |
| path | L'emplacement de la ressource sur le serveur, y compris les dossiers et le nom de fichier. Si omis, la racine du serveur (/) est utilisée. |
| query | Paramètres optionnels transmis à la ressource, écrits sous forme de paires clé=valeur. |
| fragment | Un identifiant optionnel (ancre) pointant vers une partie spécifique de la ressource. |
Une URL complète, décomposée
Considérons cette adresse :
https://www.w3docs.com:443/learn-html/page.html?tab=1#introElle est composée des parties suivantes :
| Partie | Valeur | Signification |
|---|---|---|
| scheme | https | Utiliser le protocole HTTP sécurisé. |
| host | www.w3docs.com | Le serveur à contacter. |
| port | 443 | Le port sur le serveur (443 est la valeur par défaut pour https, il est donc généralement omis). |
| path | /learn-html/page.html | Le dossier et le fichier à demander. |
| query | tab=1 | Un paramètre envoyé à la ressource. |
| fragment | intro | Faire défiler jusqu'à l'élément avec id="intro" après le chargement de la page. |
URL absolues et relatives
En HTML, une URL peut être écrite en entier (absolue) ou sous une forme partielle (relative). Pour une URL relative, le navigateur complète les parties manquantes — schéma, hôte et répertoire de base — à partir de l'URL de la page courante.
Cela s'applique partout où vous référencez une autre ressource : dans les liens <a href>, les images <img src> et les feuilles de style <link href>.
En supposant que la page courante est https://example.com/learn-html/page.html :
| Dans le document | Se résout en | Type |
|---|---|---|
href="https://example.com/page" | https://example.com/page | Absolue |
href="/path/page" | https://example.com/path/page | Relative à la racine (commence à la racine de l'hôte) |
href="../sibling" | https://example.com/sibling | Relative (remonte d'un dossier) |
href="page2.html" | https://example.com/learn-html/page2.html | Relative (même dossier) |
<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>
<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />
<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />Utilisez des URL relatives pour créer des liens au sein de votre propre site (elles continuent de fonctionner si le site est déplacé vers un nouveau domaine) et des URL absolues pour pointer vers des ressources externes. Consultez HTML Links pour en savoir plus sur les liens.
Le composant query
La chaîne de requête vient après un ? et transmet des données à la ressource sous forme de paires clé=valeur. Plusieurs paramètres sont joints avec & :
https://www.w3docs.com/search?q=html&page=2Ici q=html et page=2 sont deux paramètres distincts. Les serveurs (et JavaScript) lisent ces valeurs pour décider quoi retourner — par exemple, un terme de recherche et un numéro de page.
Le fragment (ancre)
Le fragment vient après un # et pointe vers une partie spécifique d'une page. Le navigateur fait défiler jusqu'à l'élément dont l'id correspond au fragment. Il est entièrement géré dans le navigateur et n'est jamais envoyé au serveur.
<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>Encodage des URL
Les URL ne peuvent être transmises sur Internet qu'en utilisant le jeu de caractères ASCII. Si une URL contient des caractères en dehors de cet ensemble — ou des caractères ayant une signification particulière dans une URL — ces caractères doivent être encodés.
Dans l'encodage des URL (également appelé encodage en pourcentage), un caractère est remplacé par un % suivi de sa valeur hexadécimale à deux chiffres. Les URL ne peuvent pas contenir d'espaces, donc un espace devient %20 (ou, dans les chaînes de requête, un signe +) :
Before: https://www.w3docs.com/search?q=hello world
After: https://www.w3docs.com/search?q=hello%20worldLes caractères réservés tels que ?, &, =, # et / ont une signification structurelle dans une URL ; lorsqu'ils apparaissent à l'intérieur d'une valeur, ils doivent également être encodés en pourcentage (par exemple & devient %26). Quelques substitutions courantes :
| Caractère | Encodé |
|---|---|
| espace | %20 |
& | %26 |
# | %23 |
? | %3F |
= | %3D |
Schémas courants
Le schéma indique au navigateur quel protocole ou service utiliser. Les plus courants sont présentés ci-dessous.
| Schéma | Utilisé pour |
|---|---|
http | Pages web ordinaires (non chiffrées). |
https | Pages web sécurisées (chiffrées). La norme pour le web moderne. |
mailto: | Ouvre le client de messagerie de l'utilisateur, par ex. mailto:[email protected]. |
tel: | Lance un appel téléphonique sur les appareils compatibles, par ex. tel:+15551234567. |
data: | Intègre de petites ressources en ligne, par ex. une image en base64. |
ftp | Téléchargement ou envoi de fichiers. |
file | Un fichier sur l'ordinateur local. |
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>Pour des raisons de sécurité, les navigateurs modernes restreignent les schémas ftp: et file: : la prise en charge de ftp: a été supprimée de la plupart des navigateurs, et les liens file: vers des fichiers locaux ne fonctionnent généralement pas depuis une page servie via http/https.