HTML Premiers Pas - leçon 4 - Liens (hyperliens)

05/07/2025, by Ivan

Nous arrivons aux bases mêmes du HTML, à savoir les hyperliens (ou simplement liens). Les liens sont un moyen d’organiser la connexion entre différents contenus. Supposons que vous ayez 100000 fichiers texte, si vous créez une classification pour eux, même avec 200 descriptions par rubrique, vous aurez besoin de 500 rubriques. Pour parcourir ces 500 rubriques et trouver l’information souhaitée, il vous faudra beaucoup de temps. Comment les liens vont-ils faciliter notre vie ?

Les liens relient arbitrairement deux documents HTML de sorte que chaque document HTML a un nom unique. Ainsi, depuis un document, on peut accéder à dix autres documents similaires ou populaires, ce qui augmente nos chances de trouver l’information recherchée.

Le même principe s’applique aux sites web. Les pages du site ont des noms uniques URL (Uniform Resource Locator - localisateur uniforme de ressource). Pour écrire les noms uniques des pages vers lesquelles on veut créer un lien, on utilise la balise <a></a>. En général, cela ressemble à :

<a href="chemin_unique">texte du lien</a>

Dans ce code, href est un attribut de la balise A. Nous avons déjà vu ce qu’étaient les attributs dans la leçon précédente. Créons maintenant un autre fichier dans le même dossier que index.html, nommons-le file.html, et mettons-y ce code :

<html>
  <head>
    <title>Mon deuxième document HTML</title>
  </head>
  <body>   
    <h1>Mon deuxième document HTML</h1>
  </body>
</html>

Et dans index.html, écrivons ce code :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>   
    <h1>Mon premier document HTML</h1>
    <p>
	  <a href="file.html">Lien vers le deuxième document</a>
	</p>
  </body>
</html>

Maintenant, en ouvrant index.html dans un navigateur, nous avons un lien permettant d’accéder à file.html. Essayons maintenant d’exercer l’écriture des chemins vers les fichiers. Quand les deux fichiers sont dans le même dossier, on écrit le nom du fichier dans l’attribut href, et le navigateur comprend que le fichier est dans le même dossier que celui d’origine. Mais que faire si l’on ne veut pas stocker les fichiers dans le même dossier ? C’est là que les chemins relatifs entrent en jeu.

Chemins relatifs

On appelle chemins relatifs ceux qui sont calculés par rapport au fichier source. Créons un dossier files dans le dossier contenant index.html. Déplaçons-y file.html. Maintenant, si vous cliquez sur le lien dans index.html, le navigateur ne trouvera plus file.html car sa position par rapport à index.html a changé.

Nous devons maintenant utiliser un chemin relatif depuis index.html. Pour indiquer un dossier, on utilise la barre oblique /. Par exemple :

/Program Files/MSOffice/

Pour indiquer le début du chemin, on écrit ./ (point-slash). Ainsi, le chemin vers le dossier files depuis index.html sera :

./files/

Il reste à ajouter le nom du fichier à la fin du chemin pour indiquer que le chemin mène à file.html :

./files/file.html

Modifions maintenant le chemin vers le fichier dans index.html :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>   
    <h1>Mon premier document HTML</h1>
    <p>
	  <a href="./files/file.html">Lien vers le deuxième document</a>
	</p>
  </body>
</html>

Enregistrez index.html et rafraîchissez la page dans le navigateur (la page index.html doit être ouverte). Le lien vers file.html fonctionne à nouveau. Notez que vous pouvez aussi écrire :

<a href="files/file.html">Lien vers le deuxième document</a>

Le navigateur comprendra cette adresse même sans ./ . Cependant, si vous écrivez :

<a href="/files/file.html">Lien vers le deuxième document</a>

Ce chemin sera incorrect car il s’agit d’un chemin absolu, non relatif à index.html. Donc, pour écrire un chemin relatif, utilisez ./ ou commencez simplement par le nom du dossier.

Il reste à créer un lien de retour, de file.html vers index.html. Commençons par indiquer que ce chemin est relatif :

./

Il faut ensuite indiquer que le fichier est un niveau au-dessus, donc sortir du dossier files pour trouver index.html. Pour cela, on utilise ../ (deux points + slash).

./../

Si dans le dossier files il y avait un autre dossier contenant un fichier .html, alors depuis ce fichier le chemin commencerait par ./../../, ajoutant un ../ pour chaque niveau à remonter.

Ajoutons maintenant le nom du fichier index.html au chemin :

./../index.html

Le chemin est prêt, insérons-le dans file.html :

<html>
  <head>
    <title>Mon deuxième document HTML</title>
  </head>
  <body>   
    <h1>Mon deuxième document HTML</h1>
	<p>
	  <a href="./../index.html">Lien vers le premier document</a>
	</p>
  </body>
</html>

Vous pouvez maintenant naviguer d’une page à l’autre et revenir en arrière. Regardez comment l’URL change dans le navigateur selon la page.

Revenons à ce que j’ai dit au sujet des chemins commençant par un slash sans point : ce sont des chemins absolus.

Chemins absolus

Les chemins absolus sont utilisés sur les sites Internet. Par exemple, dans Drupal toutes les pages sont servies à partir d’un seul fichier index.php, donc quand on écrit /, on indique le chemin à partir de index.php. Sur votre ordinateur local avec index.html, le chemin absolu commence à la racine de votre disque dur. On peut aussi utiliser des liens relatifs sur un site, mais les chemins absolus sont souvent plus pratiques. En effet, si vous déplacez un dossier ou fichier, vos chemins relatifs seront cassés, car il faudra ajouter ../ à chaque niveau. Les chemins absolus sont donc plus robustes.

Les chemins absolus commencent par / ou par le nom du site, par exemple https://drupalbook.org/ru/. Le navigateur comprend les deux. Les chemins absolus ont cette forme :

/index.html

/files/file.html

/files2/file2.html

Si on veut créer un lien vers file2.html depuis index.html ou file.html, le lien sera identique même s’ils sont dans des dossiers différents :

<a href="/files2/file2.html">lien</a>

Comme dit plus haut, ce code fonctionnera dans index.html, file.html, ou même dans file2.html lui-même.

Attribut target

L’attribut target est très important, surtout lorsque le lien mène vers un site externe. Il permet de définir comment la page liée s’ouvre :

_blank - dans une nouvelle fenêtre ou un nouvel onglet ;

_self - dans la même fenêtre où se trouve le lien (par défaut) ;

_parent - dans le cadre parent (frames sont obsolètes, remplacées par AJAX) ;

_top - annule tous les cadres et charge la page en plein écran ; s’il n’y a pas de cadres, fonctionne comme _self.

En général, on utilise surtout _blank, car _self est le comportement par défaut et ne nécessite pas d’être écrit.

<a href="/files2/file2.html" target="_blank">lien</a>

Attribut rel

L’attribut rel indique la relation (relation - lien) entre le document courant et le document ciblé par le lien. Le plus souvent, on utilise rel="nofollow", qui empêche Google, Yandex d’indexer ces liens. Par exemple, si vous créez un lien vers un site externe, il vaut mieux le protéger avec rel="nofollow" et target="_blank".

<a href="/files2/file2.html" target="_blank" rel="nofollow">lien</a>

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

HTML Premiers Pas - leçon 4 - Liens (hyperliens)

Chemins relatifs

Chemins absolus

Attribut target

Attribut rel