Chapitre 720 | Retour sur les chemins relatifs et absolus

Pourquoi revenir sur les chemins ?

Au chapitre 35, vous avez appris à lier un fichier CSS avec un chemin relatif du type style.css (même dossier) ou styles/style.css (descendre dans un sous-dossier). Au chapitre 40, la même logique a été réutilisée pour les images.

Mais il existe d’autres cas de chemins que vous allez forcément croiser dès que votre projet aura plusieurs pages rangées dans des sous-dossiers : comment remonter vers un dossier parent ? Comment écrire un chemin qui reste identique peu importe où on se trouve dans le site ? C’est l’objet de ce chapitre.

Le postulat de ce chapitre

Pour que tous les exemples restent concrets, on va utiliser un site fictif tout au long du chapitre : le nom de domaine moncours.fr, avec l’arborescence de fichiers suivante :

moncours.fr/                        ← la racine du site
├── index.html
├── style.css
├── images/
│   └── logo.png
└── pages/
    ├── contact.html
    └── articles/
        └── mon-article.html

Ce que signifie « la racine du site » : c’est le tout premier niveau de dossiers, celui qui correspond directement à votre nom de domaine (moncours.fr, sans rien après). index.html et style.css sont à la racine. logo.png est un niveau plus bas, dans images/. mon-article.html est encore un niveau plus bas, dans pages/articles/.

On va garder cette même arborescence pour tous les exemples du chapitre, afin que vous puissiez comparer facilement les différents cas.

1. Rappel : même dossier et sous-dossier

Deux cas déjà vus aux chapitres 35 et 40, avec notre arborescence :

Depuis index.html, pour appeler style.css (même dossier) : style.css
Depuis index.html, pour appeler logo.png (dans le sous-dossier images) : images/logo.png

Dans les deux cas, on part du fichier qui contient le code (ici index.html), et on écrit le chemin pour aller vers la cible, en descendant si besoin dans un sous-dossier.

2. Remonter d’un niveau : `../`

Le point le plus important de ce chapitre. Les deux points suivis d’un slash (../) signifient : « remonte d’un niveau, va voir dans le dossier parent ».

Prenons le fichier pages/contact.html. Ce fichier veut appeler style.css, qui se trouve à la racine — donc un niveau au-dessus du dossier pages où il est lui-même rangé.

<!-- Ce code est écrit DANS le fichier pages/contact.html -->
<link rel="stylesheet" href="../style.css">

Comment le lire : « depuis l’endroit où je suis (pages/), remonte d’un niveau (../), puis prends style.css ». Une fois remonté d’un niveau depuis pages/, on se retrouve justement à la racine, là où se trouve style.css.

3. Remonter plusieurs niveaux : `../../`

On peut enchaîner plusieurs ../ pour remonter de plusieurs niveaux d’un coup — chaque ../ correspond à « un niveau de plus vers le haut ».

Prenons cette fois pages/articles/mon-article.html, qui est deux niveaux sous la racine (pages/ puis articles/). Pour appeler style.css, il faut remonter deux fois :

<!-- Ce code est écrit DANS le fichier pages/articles/mon-article.html -->
<link rel="stylesheet" href="../../style.css">

Comment le lire : premier ../ → on sort de articles/ et on arrive dans pages/. Deuxième ../ → on sort de pages/ et on arrive à la racine. C’est là que se trouve style.css.

Et pour appeler l’image logo.png depuis ce même fichier, il faut remonter deux fois jusqu’à la racine, puis redescendre dans images/ :

<img src="../../images/logo.png" alt="Logo">

Cas particulier : si un fichier est déjà à la racine et qu’on écrit ../ par erreur, le navigateur ne remonte pas « avant » la racine — il n’y a nulle part où aller plus haut, donc ça ne provoque pas d’erreur, mais ça ne sert à rien non plus.

4. Le chemin absolu depuis la racine : `/style.css`

Un chemin qui commence directement par un slash (/) est un chemin absolu : il part toujours de la racine du site, peu importe depuis quel fichier on l’écrit. C’est la grande différence avec tout ce qu’on a vu jusqu’ici : les chemins relatifs (style.css, ../style.css…) changent selon l’endroit d’où on part, alors qu’un chemin absolu reste identique partout.

<link rel="stylesheet" href="/style.css">

Ce code /style.css fonctionne à l’identique, qu’on l’écrive dans index.html, dans pages/contact.html, ou dans pages/articles/mon-article.html : le / initial dit toujours « pars de la racine du site », donc pas besoin de compter les niveaux à remonter.

Avantage concret : si vous déplacez un fichier HTML d’un dossier à un autre plus tard, un chemin relatif (../style.css) devient faux et il faut le corriger, alors qu’un chemin absolu (/style.css) continue de fonctionner sans rien changer.

5. L’URL complète (ressource externe)

Vous avez déjà croisé ce cas au chapitre 160 avec Google Fonts, sans qu’il soit nommé explicitement : quand la ressource ne fait pas partie de votre site mais vient d’un autre site, on écrit l’adresse complète, avec https:// au début.

<img src="https://exemple-externe.com/photo.jpg" alt="Photo">

La règle simple pour choisir : si le fichier fait partie de votre projet (rangé quelque part dans votre propre arborescence), on utilise un chemin relatif ou absolu (/...). Si le fichier est hébergé ailleurs, sur un autre site, on utilise l’URL complète.

6. Piège à connaître : la casse des lettres

Un chemin comme images/Logo.png n’est pas la même chose que images/logo.png (majuscule vs minuscule sur le L). En local, sur votre ordinateur, cette erreur peut parfois passer inaperçue selon le système d’exploitation. Mais une fois le site mis en ligne sur un vrai serveur, cette différence de casse provoque très souvent une image ou un fichier introuvable.

Bonne pratique : nommez toujours vos fichiers et dossiers en minuscules, sans espace ni accent, pour éviter ce piège.

7. Où s’applique tout ça ?

Tout ce qu’on vient de voir ne concerne pas que le CSS. La même logique de chemin (même niveau, sous-dossier, ../, /, URL complète) s’applique partout où on référence un fichier externe :

<link href="..."> pour le CSS (vu au chapitre 35)
<img src="..."> pour les images (vu au chapitre 40)
<a href="..."> pour les liens vers d’autres pages du site
Le favicon (chapitre 710)

Exercice

En vous basant sur l’arborescence moncours.fr présentée en début de chapitre, écrivez le chemin correct pour chacun des 5 cas suivants :

Comment répondre : pas besoin de coder ni de tester dans un navigateur pour cet exercice — notez simplement vos 5 réponses sous forme de texte, une ligne par cas (par exemple dans un bloc-notes ou un fichier .txt), au format :

1. [votre chemin]
2. [votre chemin]
3. [votre chemin]
4. [votre chemin]
5. [votre chemin]

Depuis index.html, le chemin relatif vers logo.png.
Depuis pages/contact.html, le chemin relatif vers style.css.
Depuis pages/articles/mon-article.html, le chemin relatif vers style.css.
Depuis pages/articles/mon-article.html, le chemin relatif vers logo.png.
Un chemin absolu vers logo.png, utilisable depuis n’importe quel fichier du site sans le modifier.

Corrigé

⚠️ NE REGARDEZ PAS LA SOLUTION AVANT D’AVOIR ESSAYÉ !

Bloqué ? Cliquez sur le bouton ci-dessous pour afficher les réponses.