Chemins de fichiers HTML

Vous savez déjà écrire des pages avec des titres, des paragraphes et des commentaires. Les sites réels vivent rarement dans un seul fichier. Images, autres pages, feuilles de style et scripts se placent dans des dossiers à côté de votre HTML — et le HTML doit les pointer correctement. Ces pointeurs sont des chemins de fichiers. Si le chemin est faux, le fichier peut exister sur le disque alors que le navigateur affiche encore une image cassée ou un lien mort. C’est pourquoi ce sujet est si concret : il décide si vos références fonctionnent au quotidien.

Qu’est-ce qu’un chemin de fichier ?

Un chemin de fichier est l’adresse que le navigateur utilise pour récupérer un autre fichier. Vous l’écrivez généralement dans des attributs comme src (images, scripts, médias) et href (liens, feuilles de style et de nombreuses ressources liées). Le chemin n’est pas une décoration. C’est une instruction : « regarde ici ». Quand l’instruction est fausse, la requête échoue même si les balises du balisage semblent correctes. Voyez les chemins comme des itinéraires : un mauvais virage mène dans le vide, même si le bâtiment cible existe vraiment.

Réponse directe

Utilisez un chemin relatif lorsque le fichier cible voyage avec les dossiers de votre projet — par exemple images/logo.png depuis une page dans le même dossier parent, ou ../images/logo.png depuis une page un niveau plus bas. Utilisez un chemin absolu depuis la racine qui commence par / lorsque le site est hébergé et que chaque page doit partager le même chemin stable depuis la racine du site. Utilisez une URL complète (https://…) lorsque le fichier vit sur un autre hôte ou CDN. Les débutants doivent d’abord maîtriser les chemins relatifs, car les dossiers d’exercice locaux en dépendent. Les chemins absolus et les URL viennent ensuite naturellement — mais sans navigation relative solide, chaque sous-dossier devient un casse-tête.

Relatif vs absolu en un coup d’œil

Une petite carte de projet

Imaginez un dossier nommé project. À l’intérieur vous avez :

• index.html (page d’accueil)
• about.html (même dossier que la page d’accueil)
• un dossier images contenant logo.png
• un dossier pages contenant contact.html
  L’habitude essentielle est celle-ci : demandez toujours quel fichier HTML vous éditez avant d’écrire src ou href. La même image exige des chemins relatifs différents depuis des pages différentes. Quand vous changez de point de vue — « depuis quel fichier ? » plutôt que « où est le logo quelque part ? » — les chemins deviennent prévisibles au lieu d’être mystérieux.

Chemins relatifs depuis le dossier du projet

Depuis index.html ou about.html, images et pages sont des dossiers enfants. Vous n’avez pas besoin de ../ pour les atteindre. Le navigateur démarre dans le dossier du HTML actuel et suit chaque segment du chemin étape par étape.

Pourquoi ces valeurs fonctionnent

• images/logo.png signifie : « entre dans le dossier images à côté de ce HTML, puis ouvre logo.png »
• pages/contact.html signifie : « entre dans pages, puis ouvre contact.html »
• about.html signifie : « un autre fichier dans le même dossier que la page actuelle »
• Le texte alt n’est pas un chemin ; c’est un texte accessible lorsque l’image ne peut pas s’afficher
  Si le logo manque dans le navigateur, vérifiez l’orthographe, le vrai nom du dossier, et si vous avez enregistré le HTML dans le dossier que vous croyez. Une seule lettre fausse suffit — et sur certains serveurs la casse distingue Logo.PNG de logo.png.

Chemins relatifs depuis un sous-dossier

contact.html vit dans pages/. De là, images/ n’est pas un enfant de pages/. Il se trouve à côté de pages/ sous project/. Vous devez monter d’un niveau avec ../, puis entrer dans images/. Exactement cette géométrie — « à côté » plutôt que « en dessous » — est ce que beaucoup de débutants oublient lorsqu’ils déplacent une page dans un sous-dossier.

Lire ../

• ../ signifie : « remonte vers le dossier parent »
• ../images/logo.png signifie : « remonte vers project/, puis entre dans images/logo.png »
• ../index.html signifie : « remonte vers project/, puis ouvre index.html »
• Écrire images/logo.png depuis contact.html cherche pages/images/logo.png, qui n’existe pas dans cette carte
  Cette seule erreur — oublier ../ depuis un sous-dossier — provoque une grande part des signalements « image cassée » dans les projets débutants. Si une image se casse soudain après le déplacement d’une page, vérifiez d’abord si vous devez monter d’un niveau.

Chemins absolus racine et URL complètes

Un chemin absolu racine commence par / et est résolu depuis la racine du site sur un vrai serveur web, pas depuis le dossier actuel. Une URL complète inclut le protocole et le domaine. Les URL complètes sont normales pour les fichiers tiers. Les chemins racine sont utiles sur les sites hébergés lorsque de nombreuses pages doivent partager un chemin stable.

Fichiers locaux vs racines hébergées

Quand vous ouvrez un HTML directement depuis le disque (file://…), il n’y a souvent pas de vraie racine de site web. Un chemin comme /images/logo.png peut ne pas correspondre au dossier de votre ordinateur comme il le fera sur le serveur. Pour la pratique locale débutante, préférez des chemins relatifs qui correspondent à vos vrais dossiers. Après l’hébergement, les chemins absolus racine deviennent plus fiables d’une page à l’autre — car le serveur connaît une racine claire. Jusque-là, la navigation relative vous évite frustration et approximations.

Exercice : chemins à partir d’une carte de dossiers

Le dossier shop contient :

• home.html
• un dossier assets avec hero.jpg
• un dossier help avec faq.html
  Faites ceci dans votre éditeur :

1. Dans home.html, ajoutez un img qui charge hero.jpg avec un chemin relatif.
2. Dans help/faq.html, ajoutez un img qui charge le même fichier avec ../.
3. Depuis faq.html, ajoutez un lien relatif vers home.html.
4. Ouvrez les deux pages dans le navigateur et confirmez que l’image et le lien fonctionnent.
5. Cassez volontairement un chemin, actualisez, voyez l’échec, puis corrigez — ce retour entraîne votre œil plus vite que la seule lecture.
   Réponses relatives attendues pour cette carte : assets/hero.jpg depuis home.html ; ../assets/hero.jpg et ../home.html depuis faq.html. Ne recopiez pas les chemins de mémoire depuis une autre page : décidez toujours depuis l’emplacement du fichier que vous éditez.

Erreurs de chemin qui cassent les pages

• Écrire images/logo.png depuis un sous-dossier alors que le bon chemin exige ../images/logo.png
• Mal orthographier le nom de fichier ou de dossier, ou se tromper de casse sur des hôtes qui traitent Logo.PNG et logo.png comme des fichiers distincts
• Utiliser \ de Windows dans les chemins web — préférez / dans les attributs HTML
• Mettre un chemin disque comme C:\site\img.png dans src ou href d’une page web normale
• Copier un chemin racine /images/... dans un projet ouvert seulement en fichier local, puis s’attendre au comportement d’un site hébergé
• Lier vers contact.html alors que le fichier vit réellement dans pages/contact.html
• Déplacer des dossiers dans l’Explorateur/Finder sans mettre à jour chaque chemin qui pointait vers l’ancienne structure
  Chacune de ces erreurs paraît « mystérieuse » jusqu’à ce que vous examiniez consciemment la carte des dossiers et le point de départ du fichier actuel. Alors l’échec devient souvent visible en quelques secondes.

Résumé

• Les chemins de fichiers indiquent au navigateur où vivent les fichiers liés pour src, href et attributs similaires
• Les chemins relatifs sont résolus depuis le dossier du fichier HTML actuel
• ../ remonte d’un dossier dans un chemin relatif ; utilisez-le lorsque la cible est au-dessus du fichier actuel
• Les chemins absolus racine commencent par / ; les URL complètes incluent le protocole et le domaine
• Adaptez le style de chemin à votre organisation : relatif pour la pratique locale, racine/URL quand le modèle d’hébergement les exige
• Les chemins cassés sont l’une des causes les plus courantes d’images et de liens qui « échouent mystérieusement »
• Décidez toujours le chemin depuis le fichier que vous éditez, pas depuis le souvenir d’une autre page