Liens hypertextes en HTML

Les liens hypertextes permettent aux internautes d’accéder à des pages web sur d’autres sites web, à d’autres pages sur le même site web ou encore de naviguer à l’intérieur d’une page. Ils sont probablement les éléments les plus caractéristiques du langage HTML.
La création d’un lien hypertexte se fait grâce à la balise <a></a> qui va contenir le texte (ou l’image) sur lequel l’internaute va pouvoir cliquer.

<a>Texte cliquable</a>

L’exemple ci-dessus ne servira pas à grand-chose dans la mesure, il manque une information essentielle ! En effet, il faut définir pour chaque lien hypertexte l’élément lié. Pour cela, il faut utiliser l’attribut href. La valeur de l’attribut va dépendre du type de lien que vous souhaitez créer.

<a href="adresse">Texte cliquable</a>

Liens vers un site extérieur

Les liens vers autre site sont les plus simple à comprendre. Il s’agit de définir comme valeur pour l’attribut href l’adresse URL de la page à lier sans oublier le protocole à utiliser http:// ou https://. Ces liens sont appelés des liens absolus car ils contiennent l’adresse complète de la ressource ciblée.

<a href="https://www.juliencrego.com">Lien vers un super site</a> 

Les liens peuvent bien sûr être placés au beau milieu d’une paragraphe, dans une liste, etc.

<p>
    Pour plus d'information :  
    <a href="http://www.univ-lyon2.fr">Université Lumière Lyon 2</a>
</p> 

Liens vers une autre page de son site

Lorsque vous créez votre site, les pages ne sont pas encore en ligne. Vous ne pouvez donc pas avoir de référence hypertextuelle qui commence un http://. Vous devez donc utiliser une syntaxe de lien différente pour créer des liens appelés liens relatifs.

Les liens relatifs indiquent l’emplacement du fichier lié par rapport à la page sur laquelle se trouve le lien. Ils vont donc dépendre de l’arborescence des fichiers de votre site.

Prenons donc un exemple concret avec un site web contenant deux pages page_1.html et page_2.html. Les fichiers sont placés dans le même dossier.

Si vous souhaitez insérer un lien dans le fichier page_1.html qui pointe vers le fichier page_2.html. La référence sera tout simplement le nom du fichier :

<a href="page_2.html">Lien</a>

Pour le second exemple, les fichiers ne sont plus placés dans le même dossier. Le fichier page_2.html se trouve dans le sous-dossier truc.

Si vous souhaitez insérer un lien dans le fichier page_1.html qui pointe vers le fichier page_2.html. La référence devra cette fois-ci indiquer ce que l’on appelle le chemin d’accès c’est-à-dire le chemin à parcourir pour accéder au fichier. Dans notre cas, il faut ouvrir le dossier truc pour accéder au fichier, la référence sera donc précédée de truc/.

<a href="truc/page_2.html">Lien vers page 2</a>

Pour notre troisième exemple, nous conservons l’emplacement des fichiers mais nous souhaitons cette fois-ci créer un lien dans le fichier page_2.html pour afficher la page_1.html. Le chemin d’accès doit donc permettre de remonter d’un cran dans l’arborescence pour sortir du dossier truc et retrouver le fichier qui nous intéresse. Pour cela, il faut utiliser la syntaxe suivante ../.

<a href="../page_1.html">Lien vers page 1</a>

Vous remarquerez que dans ce cas, il n’est pas nécessaire d’indiquer le nom du dossier dont on sort !
Si vous avez bien compris le principe, vous pouvez créer n’importe quel lien quelle que soit la complexité de l’arborescence du site en juxtaposant des ../ et des noms de dossiers.
Voici quelques exemples de liens :

<a href="dossier/sousdossier/soussousdossier/page_1.html">Lien</a>
<a href="../../../page_1.html">Lien</a>
<a href="../../dossier/sousdossier/page_1.html">Lien</a>

Liens à l’intérieur de la page

Il est possible de créer des liens qui permettent de faire défiler automatiquement une page. Cela peut être utile pour créer un sommaire qui renvoi automatiquement aux titres de l’article ou encore un lien qui permet de remonter en haut de la page.

Ces liens internes sont construits avec ce que l’on appelle des ancres nommées. Pour que cela fonctionne, il faut identifier au préalable l’élément vers lequel le lien doit faire défiler la page en lui ajoutant un attribut id avec une valeur unique. Il faut ensuite créer le lien qui pointe vers l’élément identifié (l’ancre). La syntaxe pour les liens vers des ancres consiste à saisir le nom de l’ancre précédé du signe #.

<a href="#monancre">Défilement vers monancre</a>

<p id="monancre">Texte</p>

Liens vers des fichiers divers

S’il est possible de créer un lien vers une page HTML, il est également possible de créer un lien vers n’importe quel type de fichier. Le comportement du navigateur va alors dépendre de la nature du fichier en question. Si le navigateur est capable de lire le fichier, il l’affichera. Ce sera le cas notamment des images. Si le navigateur n’est pas capable de lire le fichier, il proposera alors son téléchargement.

Attributs des liens

Target

L’attribut target permet de définir où va s’ouvrir le lien. Les deux valeurs les plus utilisées sont _self (par défaut) ou _blank. Avec la valeur _self la page s’affichera à la place de la page courante avec _blank elle s’affichera dans un nouvel onglet ou une nouvelle fenêtre.

<a href="http://www.univ-lyon2.fr" target="_blank">Lyon 2</a>

Title

L’attribut title permet d’ajouter une étiquette au survol de la souris.

<a href="http://www.univ-lyon2.fr" title="Site de l'Université Lumière Lyon 2">Lyon 2</a>

Résultat dans un navigateur :

Sauf mention contraire*, l'article Liens hypertextes en HTML et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.