Chemins de fichiers HTML
Apprenez les chemins de fichiers HTML, la différence entre les chemins absolus et relatifs, avec des exemples pratiques détaillés.
Un chemin de fichier décrit l'emplacement d'un fichier dans la structure de dossiers d'un site web. Chaque fois qu'une page doit charger ou pointer vers une autre ressource, elle utilise un chemin de fichier pour la trouver.
Cette page couvre les deux types de chemins de fichiers — absolus et relatifs — les différentes formes qu'un chemin relatif peut prendre, et lequel utiliser en pratique. Vous utiliserez des chemins de fichiers constamment lorsque vous travaillez avec :
- les pages web (dans les liens)
- les images
- les fichiers JavaScript
- les feuilles de style
Les types de chemins en un coup d'œil
Chaque chemin que vous écrivez est l'un des suivants. Les mêmes règles s'appliquent que le chemin apparaisse dans un <a href>, <img src>, <link href> ou <script src>.
| Chemin | Type | Signification | Quand l'utiliser |
|---|---|---|---|
https://example.com/img/cat.jpg | URL absolue | L'adresse complète, incluant le protocole et le domaine. | Pour lier un fichier sur un autre site web. |
/images/cat.jpg | Relatif à la racine | Commence à la racine du site (le / initial), quelle que soit la position de la page actuelle. | Ressources communes à tout le site (logos, CSS/JS globaux) partagées entre de nombreuses pages. |
images/cat.jpg | Relatif (même répertoire) | Commence depuis le dossier de la page actuelle. Équivalent à ./images/cat.jpg. | Fichiers stockés à côté de la page. |
../images/cat.jpg | Relatif (répertoire parent) | .. remonte d'un dossier, puis descend dans images. | Pour accéder à un fichier situé au-dessus de la page actuelle. |
Un chemin relatif à la racine est techniquement un chemin relatif lui aussi, mais le / initial le rend relatif à la racine du site plutôt qu'à la page actuelle — il mérite donc d'être traité comme une catégorie à part entière.
Chemins de fichiers absolus
Un chemin de fichier absolu est l'URL complète permettant d'accéder à un fichier, incluant le protocole (https://) et le nom de domaine. Il fonctionne depuis n'importe quelle page car il ne dépend pas de l'emplacement de la page actuelle.
Exemple de chemin de fichier absolu :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Absolute File Path Example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" style="width:300px" />
</body>
</html>Utilisez une URL absolue lorsque la ressource se trouve sur un domaine différent (par exemple, une image hébergée sur un CDN ou un autre site).
Chemins de fichiers relatifs
Un chemin de fichier relatif pointe vers un fichier par rapport à la page actuelle au lieu d'indiquer le domaine complet. Les chemins relatifs peuvent prendre plusieurs formes.
Même répertoire
Lorsque le fichier cible se trouve dans le même dossier que la page actuelle, écrivez simplement le nom du fichier. Ajouter ./ (signifiant « dossier actuel ») est optionnel et se comporte de manière identique.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Same-Directory Path Example</h2>
<img src="images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Ici, images/smile.jpg est résolu en partant du dossier qui contient la page actuelle.
Répertoire parent
Utilisez ../ pour remonter d'un niveau dans l'arborescence des dossiers. Chaque ../ monte d'un dossier supplémentaire. Par exemple, ../images/smile.jpg quitte le dossier actuel, puis cherche dans un dossier images situé un niveau au-dessus.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Parent-Directory Path Example</h2>
<img src="../images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Relatif à la racine
Un chemin qui commence par une barre oblique (/) est relatif à la racine : le navigateur le résout depuis la racine du site web, sans tenir compte de l'emplacement de la page actuelle. C'est pratique pour les ressources partagées sur l'ensemble du site, car le chemin reste le même quelle que soit la profondeur d'imbrication de la page.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Root-Relative Path Example</h2>
<img src="/images/smile.jpg" alt="Smile" width="290" height="260" />
</body>
</html>Les chemins ne concernent pas uniquement les images
Les mêmes règles de chemin s'appliquent à chaque attribut qui référence un fichier. Un seul document mélange souvent tous les types :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- root-relative stylesheet, shared site-wide -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<!-- relative link to a page in the same folder -->
<a href="about.html">About us</a>
<!-- relative link to a page one level up -->
<a href="../index.html">Home</a>
<!-- absolute link to an external site -->
<a href="https://www.w3docs.com/">W3docs</a>
<!-- relative script next to the page -->
<script src="js/app.js"></script>
</body>
</html>Bonne pratique
Préférez les chemins relatifs pour les ressources qui se trouvent sur votre propre site. Comme ils ne codent pas en dur un domaine, le site continue de fonctionner lorsque vous le déplacez vers un nouveau domaine, passez de http à https, ou l'exécutez localement en développement. Réservez les URL absolues aux fichiers hébergés sur d'autres sites, et utilisez les chemins relatifs à la racine pour les ressources globales partagées par de nombreuses pages.
Pour en savoir plus sur la création de liens entre pages, consultez le chapitre Liens HTML et sur l'intégration d'images avec la balise <img>.