HTML Academy · Leçon

URL absolues ou relatives

Comprenez la différence entre les chemins absolus et relatifs.

URL absolues ou relatives est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu’est-ce qu’une URL ?

Une URL (localisateur uniforme de ressources) est l’adresse complète d’une ressource sur le Web.

Une URL se compose des éléments suivants :

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

URL absolues

Une URL absolue contient l’adresse complète — protocole, domaine et chemin :

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

URL relatives

Une URL relative est relative à l’emplacement de la page actuelle — aucun protocole ni domaine n’est nécessaire :

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Trois types d’URL relatives

Les URL relatives se présentent sous trois formes :

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Naviguer avec ../ --

Utilisez ../ pour remonter d’un niveau dans les répertoires :

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

Quand utiliser une URL absolue ou relative

Règle générale :

Ressources externes — toujours absolues : https://...
Ressources CDN — absolues ou relatives au protocole
Navigation interne — une URL relative à la racine (/page) est la solution la plus sûre
Même répertoire — une URL relative (page.html) est pratique

Les URL relatives à la racine sont portables

Les URL relatives à la racine (/path) restent valides lorsque vous déplacez une page :

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

L’élément base

L’élément <base> dans <head> définit l’URL de base de tous les liens relatifs :

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

Encodage des URL

Les caractères spéciaux dans les URL doivent être encodés en pourcentage :

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

URL canoniques

Lorsqu’une page est accessible à plusieurs URL, utilisez une balise canonique pour déclarer l’URL à privilégier :

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Bonnes pratiques pour les URL

Suivez ces conventions pour les URL :

Utilisez uniquement des lettres minuscules
Utilisez des traits d’union, et non des traits de soulignement, pour séparer les mots
Gardez des URL courtes et descriptives
Évitez les caractères spéciaux — encodez-les
Utilisez des URL relatives à la racine pour les liens internes

Vérification rapide

Vous avez un fichier à l’adresse /blog/post.html et souhaitez créer un lien vers /about.html. Quelle est l’URL relative la plus sûre ?

Récapitulatif : URL absolues et relatives

Résumé des types d’URL :

Absolue — URL complète comprenant le protocole et le domaine
Relative à la racine — commence par / et est relative à la racine du domaine
Relative — relative à l’emplacement du fichier actuel
../ — remonte d’un niveau dans les répertoires
<base href> — définit la base de toutes les URL relatives

Questions Fréquemment Posées

La leçon « URL absolues ou relatives » est-elle gratuite ?

Oui — le texte complet de « URL absolues ou relatives » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « URL absolues ou relatives » ?

Comprenez la différence entre les chemins absolus et relatifs. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « URL absolues ou relatives » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy