Créer des liens en HTML

Les liens hypertextes sont l’une des fondations du HTML que est, rappelons-le, un langage de marquage hypertexte justement.

Dans cette nouvelle leçon, nous allons découvrir et expliquer à quoi correspond un lien en HTML et allons apprendre à créer différents « types » de liens en HTML, que ce soit des liens ramenant à un autre endroit d’une même page (liens ancres), des liens menant vers d’autres pages d’un même site (liens internes) ou des liens envoyant l’utilisateur vers un autre site (liens externes).

 

Définition d’un lien HTML

Les liens en HTML vont nous servir à créer des ponts entre différentes pages d’un même site ou de sites différents. Le principe d’un lien est le suivant : en cliquant sur une ancre (qui est la partie visible par l’utilisateur d’un lien et qui peut être un texte comme une image), nos utilisateurs vont être redirigés vers une page cible.

Il existe deux types principaux de liens hypertextes en HTML :

• Les liens internes qui vont servir à naviguer d’une page à l’autre dans un même site ;
• Les liens externes qui vont envoyer les utilisateurs vers une page d’un autre site.

Ces deux types de liens vont être l’objet d’enjeux et d’implications différents en termes d’optimisation du référencement (SEO) et vont pouvoir être créés de façons différentes en HTML.

Nous allons également pouvoir utiliser les liens en HTML pour naviguer au sein d’une même page et renvoyer à un endroit précis de celle-ci. Cela est utile pour fournir des accès ou des repères rapides à nos utilisateurs dans le cas d’un page très longue.

Nous appelons ce type de liens faits au sein d’une même page des liens « ancres » tout simplement (même si ce terme peut porter à confusion car le terme « ancre » est aussi utilisé pour définir la partie visible et cliquable d’un lien).

Dans chacun de ces cas, nous allons devoir utiliser l’élément HTML a accompagné de son attribut href pour créer un lien en HTML.

Notez que les liens sont également un aspect fondamental d’une stratégie d’optimisation de référencement (SEO), que ce soit dans le cas de liens internes (pour effectuer ce qu’on appelle un maillage interne et donner plus de valeur à certaines de nos pages aux yeux de Google) ou de liens externes qui sont un des critères principaux de classement pour Google. Il est donc très important de bien les comprendre et les maitriser !

 

Création de liens : l’élément a et son attribut href

Quel que soit le type de liens que l’on souhaite créer en HTML (liens internes, des liens externes, ou des liens vers un autre endroit d’une même page), nous utiliserons toujours l’élément a qui est l’abréviation de « anchor » ou « ancre » en français accompagné de son attribut href pour « hypertext reference » ou « référence hypertexte » en français.

L’élément HTML a est composé d’une paire de balises (balises ouvrante et fermante) et d’un contenu entre les balises que l’on va appeler “ancre”. Ce contenu peut être un texte, une image, etc. et sera la partie visible et cliquable du lien pour les utilisateurs.

L’attribut href va nous servir à indiquer la cible du lien, c’est-à-dire l’endroit où l’utilisateur doit être envoyé après avoir cliqué sur le lien. Nous allons indiquer cette cible en valeur de l’attribut href.

D’un point de vue du code, la seule chose qui va changer pour créer un lien ancre plutôt qu’interne ou interne plutôt qu’externe va être la façon dont on va construire la valeur qu’on va passer à l’attribut href.

 

Créer des liens externes en HTML

Un lien externe est un lien qui part d’une page d’un site et ramène les utilisateurs vers une autre page d’un autre site.

Pour créer un lien vers une page d’un autre site en HTML (ou lien externe), il va falloir indiquer l’adresse complète de la page (c’est-à-dire son URL) en valeur de l’attribut href de notre lien.

Imaginons par exemple que nous voulions créer un lien vers la page d’accueil de Wikipédia. L’URL de cette page est la suivante : https://www.wikipedia.org/.

See the Pen Les liens en HTML 1 by Pierre (@pierregiraud) on CodePen.

Comme vous le voyez, on utilise bien un élément a pour créer un lien externe en HTML. On place notre attribut href au sein de la balise ouvrante de cet élément. Ici, on précise en valeur l’adresse (URL) de la page d’accueil de Wikipédia.

Entre les deux balises, nous plaçons la partie visible et cliquable (l’ancre) de notre lien. Ici, cela correspond au texte « la home de Wikipédia ». Les utilisateurs vont pouvoir cliquer sur ce texte pour être renvoyés vers la page d’accueil de Wikipedia.

Note : Ici, nous avons choisi de placer un texte comme ancre de notre lien, mais rien ne nous empêche de placer une image à la place afin de créer une image cliquable.

Vous pouvez remarquer que le navigateur applique automatiquement des styles à la partie cliquable de nos liens :

• le texte (notre ancre) est de couleur différente (bleu avant de cliquer puis volet une fois le lien visité) ;
• le texte est souligné ;
• le curseur de notre souris change de forme lorsqu’on passe sur le lien.

Nous allons bien évidemment pouvoir changer ces comportements en appliquant nos propres styles CSS à nos éléments a. Nous verrons comment faire cela plus tard dans ce cours.

Bon à savoir : Lorsque l’attribut href prend une URL complète en valeur, on parle de valeur absolue (car celle-ci est fixe et ne dépend de rien). Les liens externes utilisent toujours des valeurs absolues. On parle de valeur absolue en opposition aux valeurs dites relatives, qui sont dans ce contexte des valeurs qui vont indiquer l’emplacement de la page cible relativement à la page source du lien.

 

Créer des liens internes en HTML

Le deuxième grand type de liens que l’on va pouvoir créer en HTML correspond aux liens internes, c’est-à-dire à des liens renvoyant vers d’autres pages d’un même site.

Explication du fonctionnement des liens internes

Nous allons avoir plusieurs solutions pour créer des liens internes. Tout d’abord, nous allons tout simplement pouvoir faire exactement comme pour les liens externes et indiquer l’adresse complète (adresse absolue) de la page cible du lien en valeur de l’attribut href

Cependant, si cette première manière de faire semble tout à fait fonctionner et être la plus simple à priori, ce n’est pas du tout la plus optimisée d’un point de vue de l’utilisation des ressources et elle peut même s’avérer problématique selon comment votre site est construit (notamment si vos URLs sont construites dynamiquement).

Pour ces raisons, nous préciserons généralement plutôt une valeur de type relatif en valeur de l’attribut href de nos liens internes en HTML.

On dit que la valeur est relative car on va devoir indiquer l’adresse de la page de destination relativement à l’adresse de la page de départ (c’est-à-dire celle à partir de laquelle on fait notre lien).

Comment savoir quelle valeur relative utiliser ? Pour bien comprendre comment fonctionnent les valeurs relatives, vous devez avant tout savoir ce qu’est un site web.

Un site web n’est qu’un ensemble de fichiers et de ressources (pages de code de différents types et fichiers médias comme des images, etc.) liés entre eux.

Toutes ces ressources vont être hébergées (stockées) sur un ordinateur très puissant et constamment connecté à Internet qu’on appelle serveur, dans un dossier principal qu’on va appeler la racine d’un site.

Pour pouvoir stocker nos différentes ressources sur un serveur et faire en sorte que notre site soit tout le temps accessible via Internet, nous passons généralement par un hébergeur qui va nous louer un serveur ou une partie d’un de ses serveurs.

Dans ce dossier racine, il va très souvent y avoir d’autres dossiers (des sous-dossiers donc), des fichiers, des images, etc.

Par exemple, voici une première image de la racine de l’ancienne version de mon site (à laquelle j’accède depuis l’interface d’administration de mon hébergeur) :

Vous pouvez voir différents fichiers et ressources et des dossiers. En cliquant sur le dossier « html-css » par exemple, on va trouver de nouveaux fichiers et dossiers :

Puis en explorant le contenu du dossier « cours-complet » :

Pour lier ces différents fichiers et ressources entre eux (et donc offrir entre autres à nos utilisateurs la possibilité de naviguer de l’un à l’autre), nous allons utiliser des valeurs relatives, c’est-à-dire que nous allons préciser l’emplacement de la ressource que l’on souhaite utiliser (ou vers laquelle on souhaite renvoyer) relativement à l’emplacement de la page / ressource qui souhaite l’utiliser (la page de départ).

C’est comme cela que nous allons procéder dans le cas précis de la création de liens internes : nous allons préciser en valeur de l’attribut href l’emplacement de la page cible (page de destination) par rapport à l’emplacement sur le serveur de la page source.

Trois cas vont alors se présenter à nous :

1. Le cas où les deux pages (source et destination) se trouvent dans un même dossier ;
2. Le cas où la page de destination se trouve dans un sous dossier par rapport à la page source ;
3. Le cas où la page de destination se trouve dans un dossier parent par rapport à la page source.

Pour chacun de ces cas, nous allons construire la valeur de notre attribut href de manière différente :

• Si les deux pages se situent dans le même dossier, alors on pourra se contenter de préciser le nom de la page cible/de destination (avec son extension) en valeur de l’attribut href ;
• Si la page cible se situe dans un sous dossier par rapport à la page à partir de laquelle on fait un lien, alors on précisera le nom du sous dossier suivi d’un slash suivi du nom de la page cible en valeur de l’attribut href ;
• Si la page cible se situe dans un dossier parent par rapport à la page de départ, alors il faudra indiquer deux points suivi d’un slash suivi du nom de la page de destination en valeur de l’attribut href.

Exemples pratiques de création de liens internes

Pour illustrer cela, je vous propose de créer un premier dossier sur le bureau de votre ordinateur. Nous imaginerons que ce dossier correspond à la racine d’un site Internet et nous pouvons par exemple l’appeler racine.

Dans ce dossier, vous allez créer une première page HTML que vous pourrez appeler home.html et un second dossier qu’on peut appeler cours par exemple.

Dans ce sous dossier cours, je vous propose de créer deux pages presentation.html et livres.html par exemple ainsi qu’un troisième dossier qu’on pourra appeler code.

Dans ce dernier dossier code, nous créerons finalement une dernière page qu’on appellera liens.html.

N’hésitez pas à télécharger directement la structure complète en cliquant ici (dossier à dézipper et à placer sur votre bureau ; le téléchargement devrait démarrer dès que vous cliquez).

L’idée ici va être de faire des liens entre ces différentes pages. Encore une fois, vous pouvez imaginer que tout ce qui se trouve au sein de votre dossier racine est l’équivalent de la structure d’un site Internet (même si dans notre cas nous travaillons bien évidemment en local).

A partir de notre page home.html, on veut créer trois liens :

• Un vers la page presentation.html située dans le sous dossier cours ;
• Un vers la page livres.html située dans le sous dossier cours ;
• Un vers la page liens.html située dans le sous-sous dossier code ;

Voici comment on va s’y prendre :

Ici, on voit bien que pour créer un lien vers une page située dans un sous dossier, il faut indiquer le nom du sous dossier suivi d’un slash suivi du nom de la page en valeur de l’attribut href.

Vous pouvez également remarquer que si la page cible du lien se situe dans un sous-sous dossier, alors il faudra préciser le nom du sous dossier suivi d’un slash suivi du nom du sous dossier puis à nouveau d’un slash et finalement le nom de la page de destination en valeur de l’attribut href.

Bon à savoir : Il faudra indiquer le nom de tous les sous dossiers traversés pour atteindre la page de destination à partir de la page de départ en valeur de l’attribut href.

On va également créer trois liens à partir de notre page presentation.html :

• Un vers la page home.html située dans le dossier parent racine ;
• Un vers la page livres.html située dans le même dossier cours ;
• Un vers la page liens.html située dans le sous dossier code ;

Ici, pas de surprise :

• On utilise la notation « ../home.html » pour créer un lien vers la page « home.html » située dans un dossier parent ;
• La page « livres.html » est située dans le même dossier que la page « presentation.html », on se contente donc de préciser son nom en valeur de l’attribut href ;
• La page « liens.html » est située dans le sous dossier « code », on utilise donc la notation « code/liens.html ».

Finalement, on va à nouveau vouloir créer trois liens à partir de la page liens.html vers :

• La page home.html située dans le dossier parent racine ;
• La page presentation.html située dans le dossier parent cours ;
• La page livres.html située dans le dossier parent cours.

On va donc utiliser ici la notation ../ pour signifier que les pages de destination se trouvent dans des dossiers parents par rapport à notre page de départ. Notez qu’on précise deux fois ../ pour créer un lien vers notre page « home.html » tout simplement car cette page est située dans un dossier deux niveaux au-dessus de la page « liens.html ».

A noter : Il est possible que vous deviez un jour faire un lien vers une page qui se situe dans un autre dossier qui n’est pas un ascendant (parent) ou un descendant (enfant) direct de la page de départ. Dans ce cas-là, vous devrez utiliser un mélange de ../ et de noms de dossiers en valeur de l’attribut href.

Pour illustrer cela, on peut créer un nouveau dossier seo dans le dossier cours et placer une page qu’on va appeler referencement.html dedans. L’idée va ici de faire un lien de la page liens.html vers referencement.html et inversement. Voici comment on va s’y prendre :

Ici, on indique qu’il faut commencer par remonter dans le dossier parent cours puis ensuite aller dans le dossier seo pour accéder à la page referencement.html à partir de la page liens.html. N’hésitez pas à deviner le code pour aller dans l’autre sens, ça vous fera un bon exercice !

 

Ouvrir un lien dans un nouvel onglet grâce à l’attribut target

Jusqu’à présent, lorsque nous cliquions sur les liens créés en HTML, nous étions immédiatement redirigés vers la nouvelle page et notre page cible s’ouvrait dans le même emplacement (le même cadre ou « frame ») que le lien de départ.

Souvent, si vous avez un site, vous voudrez généralement que le lien s’ouvre dans un nouvel onglet afin que le visiteur ne perde pas la page de votre site. On va pouvoir faire cela avec l’attribut target.

L’attribut target va nous permettre de choisir où doit s’ouvrir notre page de destination. En pratique, nous utiliserons très souvent la valeur _blank qui spécifie que la nouvelle page doit s’ouvrir dans un nouvel onglet.

Voici un exemple pratique avec un lien externe menant vers la page d’accueil de Wikipédia et s’ouvrant dans un nouvel onglet :

See the Pen Les liens en HTML 3 by Pierre (@pierregiraud) on CodePen.

Pour information, voici les différentes valeurs que peut prendre l’attribut HTML target afin de modifier le comportement de nos liens HTML :

Valeur de target	Comportement
_self	Valeur par défaut : la page cible s’ouvre dans le même emplacement (cadre ou « frame ») que là où l’utilisateur a cliqué
_blank	La page cible s’ouvre dans un nouvel onglet ou dans une nouvelle fenêtre
_parent	La page cible s’ouvre dans la cadre (frame) de niveau immédiatement supérieur par rapport à l’emplacement du lien
_top	La page cible s’ouvre dans la fenêtre hôte (par dessus le frameset)
Nom du cadre (frame)	Ouverture de la page cible dans le cadre portant le nom cité (en valeur de l’attribut name)

 

Créer des liens vers une autre partie d’une même page en HTML

Dans certains cas, lorsque vous construisez une page très longue, il va pouvoir être intéressant de proposer un sommaire avec des liens cliquables qui vont transporter l’utilisateur directement à un endroit précis de la page.

Nous allons également pouvoir créer ce type de liens (parfois appelé liens « ancre ») avec notre élément HTML a ainsi qu’avec un attribut id qui va nous servir à identifier l’endroit de la page où l’utilisateur doit être renvoyé.

L’attribut id sert, comme son nom l’indique, à identifier un élément HTML en particulier dans une page pour ensuite pouvoir le cibler précisément (pour pouvoir lui appliquer des styles CSS entre autres).

Nous étudierons le fonctionnement de l’attribut id en détail plus tard dans ce cours. Pour le moment, retenez simplement que chaque id dans une page doit posséder une valeur unique puisqu’encore une fois un id sert à identifier précisément un élément en particulier.

Pour créer un lien de type « ancre », nous allons devoir procéder en deux étapes : tout d’abord, nous allons attribuer un attribut id aux différents éléments de notre page au niveau desquels on souhaite renvoyer nos visiteurs.

Ensuite, nous allons créer nos liens de renvoi en soi. Pour cela, nous allons passer à nos différents attributs href les valeurs correspondantes aux noms de mes id précédés d’un dièse (symbole #).

Voyons immédiatement comment créer ce type de lien en pratique. Pour cela, il va nous falloir une page très longue ou nous allons devoir réduire en CSS la largeur d’affichage du texte pour lui faire prendre plus de ligne et créer une barre de défilement (scrolling).

See the Pen Les liens en HTML 4 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple ci-dessus, j’ai créé une liste de type sommaire au début de ma page car celle-ci est très longue et j’ai accolé un id à chacun de mes titres h2.

Chaque élément de mon sommaire va correspondre à une partie vers laquelle je souhaite envoyer mes visiteurs. Je vais donc placer un élément de lien HTML a dans chacun des éléments de liste.

Ici, je vous invite à regarder attentivement les valeurs données à mes différents attributs href : vous remarquez que les différentes valeurs correspondent aux noms de mes id précédés d’un dièse (symbole #), symbole qui sert justement à cibler un id en CSS.

Lorsqu’on clique sur un élément du sommaire, nous sommes renvoyés directement à la partie de la page correspondante.

 

Utiliser une image en ancre de lien HTML

Nous n’avons pas encore étudié les images et je ne veux pas vous donner trop d’informations d’un coup afin que vous puissiez vous concentrer sur le sujet actuellement traité.

Cependant, sachez qu’il va être tout à fait possible d’utiliser une image à la place d’un texte comme ancre ou contenu cliquable pour un lien. Nous verrons comment faire cela dans le chapitre réservé à l’insertion d’images en HTML.