Qu'est-ce qu'un lien hypertexte ?

le 3 septembre 2024

Les hyperliens sont des rรฉfรฉrences intรฉgrรฉes qui permettent une navigation transparente entre les documents, sites Internet, et diffรฉrentes sections au sein d'une page.

Qu'est-ce qu'un lien hypertexte

Qu'est-ce qu'un lien hypertexte ?

Un hyperlien, souvent appelรฉ simplement lien, est une rรฉfรฉrence dans un document numรฉrique qui permet aux utilisateurs de naviguer d'un emplacement ร  un autre dans le mรชme document, entre diffรฉrents documents ou vers des sites Web entiรจrement diffรฉrents. Cette rรฉfรฉrence est gรฉnรฉralement intรฉgrรฉe dans un texte ou une image et, lorsqu'on clique dessus, elle indique ร  l'utilisateur comment accรฉder ร  l'hyperlien. navigateur or application pour charger la destination spรฉcifiรฉe. Les hyperliens sont un รฉlรฉment essentiel de l'hypertexte, le systรจme qui permet la navigation non linรฉaire des informations sur Internet.

Lien vs. Hyperlien

Les termes ยซ lien ยป et ยซ hyperlien ยป sont souvent utilisรฉs de maniรจre interchangeable, mais il existe une distinction subtile entre les deux.

Un ยซ lien ยป est un terme gรฉnรฉrique qui dรฉsigne gรฉnรฉralement tout รฉlรฉment d'un document ou d'une page Web qui renvoie ร  un autre emplacement, et qui peut inclure ร  la fois du texte et des images. En revanche, un ยซ hyperlien ยป dรฉsigne spรฉcifiquement un lien intรฉgrรฉ dans un hypertexte, c'est-ร -dire un texte affichรฉ sur un ordinateur ou un appareil numรฉrique avec des hyperliens qui donnent accรจs ร  d'autres textes ou informations.

Bien que tous les hyperliens soient des liens, tous les liens ne sont pas considรฉrรฉs comme des hyperliens. Par exemple, un URL Un lien saisi dans un document texte brut est un lien, mais pas un hyperlien tant qu'il n'est pas cliquable dans un systรจme hypertexte. En substance, un hyperlien est une forme plus spรฉcifique de lien, conรงue pour faciliter une navigation simple et interactive au sein et entre des documents numรฉriques.

Quel est le but des hyperliens ?

L'objectif principal des hyperliens est de faciliter la navigation entre diffรฉrents รฉlรฉments de contenu numรฉrique, que ce soit au sein d'un mรชme document ou entre plusieurs documents et sites Web. Les hyperliens permettent aux utilisateurs d'accรฉder rapidement ร  des informations connexes, amรฉliorant ainsi l'expรฉrience globale de l'utilisateur en offrant un moyen transparent d'explorer des ressources interconnectรฉes. Ils servent de base ร  la structure du Web, permettant l'exploration non linรฉaire du contenu, qui est au cล“ur du fonctionnement d'Internet.

En plus de faciliter la navigation, les hyperliens sont essentiels pour organiser et structurer les informations de maniรจre ร  les rendre plus accessibles et comprรฉhensibles. Ils relient les sujets pertinents, fournissent un contexte supplรฉmentaire et aident les utilisateurs ร  approfondir des domaines d'intรฉrรชt spรฉcifiques sans encombrer le contenu principal.

Les hyperliens jouent รฉgalement un rรดle essentiel dans le rรฉfรฉrencement (optimisation des moteurs de recherche) en aidant les moteurs de recherche ร  indexer et ร  classer le contenu en fonction des relations entre les pages liรฉes, influenรงant ainsi la maniรจre dont les informations sont dรฉcouvertes et hiรฉrarchisรฉes dans les rรฉsultats de recherche.

Une brรจve histoire des hyperliens

Le concept d'hyperliens trouve ses racines dans la vision primitive de l'hypertexte, un systรจme qui permet d'interconnecter des textes de maniรจre non linรฉaire. Cette idรฉe a รฉtรฉ formulรฉe pour la premiรจre fois par Vannevar Bush dans son essai de 1945 ยซ As We May Think ยป, oรน il imaginait une machine appelรฉe ยซ Memex ยป qui permettrait aux utilisateurs de naviguer entre les documents en utilisant des associations de liens.

L'hyperlien moderne a pris forme dans les annรฉes 1960 avec le dรฉveloppement du systรจme d'รฉdition hypertexte (HES) et, plus tard, des systรจmes plus avancรฉs comme le projet Xanadu de Ted Nelson, qui visait ร  crรฉer un rรฉseau mondial d'informations liรฉes.

La vรฉritable percรฉe a eu lieu ร  la fin des annรฉes 1980 et au dรฉbut des annรฉes 1990 avec lโ€™invention du World Wide Web par Sir Tim Berners-Lee. Il a proposรฉ l'utilisation d'hyperliens comme รฉlรฉment fondamental de l'architecture du Web, permettant aux utilisateurs de cliquer sur du texte ou des images en surbrillance pour passer d'une page Web ร  une autre. La premiรจre mise en ล“uvre rรฉussie d'hyperliens a eu lieu avec la sortie du navigateur Web de Berners-Lee, WorldWideWeb, en 1991, qui permettait aux utilisateurs d'explorer le Web en plein essor grรขce ร  des liens cliquables.

Depuis lors, les hyperliens sont devenus un รฉlรฉment omniprรฉsent d'Internet, faรงonnant la maniรจre dont l'information est connectรฉe, consultรฉe et partagรฉe ร  l'รฉchelle mondiale. Ils ont รฉvoluรฉ de simples liens textuels vers des formes plus sophistiquรฉes, notamment des contenus multimรฉdias et dynamiques intรฉgrรฉs, mais leur objectif principal, qui est de relier les informations, reste le mรชme.

Types d'hyperliens

Les hyperliens se prรฉsentent sous diffรฉrentes formes, chacune รฉtant conรงue pour remplir des fonctions spรฉcifiques au sein du contenu numรฉrique. Il est essentiel de comprendre les diffรฉrents types d'hyperliens pour une conception Web efficace et une navigation utilisateur efficace. Vous trouverez ci-dessous une explication des principaux types d'hyperliens couramment utilisรฉs.

Liens hypertextes textuels

Les hyperliens textuels sont le type le plus courant, oรน le texte cliquable (souvent soulignรฉ et d'une couleur diffรฉrente) dirige les utilisateurs vers un autre emplacement. Ces liens sont gรฉnรฉralement intรฉgrรฉs dans le corps d'un document ou d'une page Web et sont dรฉfinis par le HTML balise, qui inclut l'URL de destination. Lorsqu'on clique dessus, les hyperliens texte permettent aux utilisateurs de naviguer vers une nouvelle page, une section diffรฉrente de la mรชme page ou un site Web externe.

Liens hypertextes vers les images

Les hyperliens image sont des images cliquables qui fonctionnent de la mรชme maniรจre que les hyperliens texte. Au lieu du texte, une image est utilisรฉe comme รฉlรฉment cliquable. Ces hyperliens sont utiles pour crรฉer des รฉlรฉments de navigation visuellement attrayants, tels que des boutons, des banniรจres ou des icรดnes qui mรจnent ร  d'autres pages ou ressources lorsqu'on clique dessus.

Liens hypertexte en ligne

Les hyperliens en ligne sont intรฉgrรฉs dans un bloc de texte et servent ร  rรฉfรฉrencer un contenu connexe ou ร  fournir des informations supplรฉmentaires sans perturber le flux de lecture. Ces liens sont souvent utilisรฉs dans les articles ou les documents pour diriger les lecteurs vers des sources, des dรฉfinitions ou des explications dรฉtaillรฉes en rapport avec le contenu principal.

Liens d'ancrage (liens de saut)

Les liens d'ancrage, รฉgalement appelรฉs liens de saut, permettent aux utilisateurs de naviguer vers une partie spรฉcifique de la mรชme page Web. Ces hyperliens sont particuliรจrement utiles pour les longues pages Web, telles que les articles, les FAQ ou les sites Web d'une seule page, oรน ils permettent un accรจs rapide ร  diffรฉrentes sections en accรฉdant directement au contenu souhaitรฉ.

Email Hyperliens

Les liens hypertexte de courrier รฉlectronique ouvrent le client de messagerie par dรฉfaut d'un utilisateur et crรฉent un nouveau message รฉlectronique lorsqu'on clique dessus. Ces liens sont formatรฉs ร  l'aide du schรฉma d'URL mailto: et sont couramment utilisรฉs sur les sites Web pour permettre aux utilisateurs de contacter facilement quelqu'un par courrier รฉlectronique. Le lien peut รฉgalement inclure une ligne d'objet ou un corps de message prรฉdรฉfini.

Liens hypertexte vers les fichiers

Les hyperliens de fichiers dirigent les utilisateurs vers le tรฉlรฉchargement d'un fichier spรฉcifique, tel qu'un PDF, une image ou un document. Ces liens sont souvent utilisรฉs dans des contextes รฉducatifs ou professionnels oรน les utilisateurs doivent accรฉder ร  des ressources tรฉlรฉchargeables directement ร  partir d'une page Web. Lorsqu'on clique dessus, le fichier est gรฉnรฉralement tรฉlรฉchargรฉ sur l'appareil de l'utilisateur.

Liens hypertextes externes

Les liens hypertexte externes dirigent les utilisateurs vers un site Web ou un domaine diffรฉrent de celui qu'ils visitent actuellement. Ces liens sont essentiels pour rรฉfรฉrencer des sources, guider les utilisateurs vers des ressources supplรฉmentaires ou diriger le trafic vers des sites partenaires. Ils s'ouvrent gรฉnรฉralement dans un nouvel onglet ou une nouvelle fenรชtre du navigateur pour maintenir la session de navigation actuelle de l'utilisateur.

Liens hypertextes internes

Les hyperliens internes connectent diffรฉrentes pages au sein d'un mรชme site Web ou domaine. Ils sont essentiels ร  la navigation sur un site Web, car ils aident les utilisateurs ร  se dรฉplacer entre les diffรฉrentes sections ou pages d'un site. Les liens internes jouent รฉgalement un rรดle important dans le rรฉfรฉrencement en amรฉliorant la structure du site et en aidant les moteurs de recherche ร  comprendre la relation entre les diffรฉrentes pages.

Comment crรฉer un lien hypertexte?

Crรฉer un lien hypertexte est un processus simple qui consiste ร  ajouter un code HTML spรฉcifique ร  votre texte ou ร  votre image pour le rendre cliquable et diriger les utilisateurs vers un autre emplacement. Vous trouverez ci-dessous un guide รฉtape par รฉtape sur la faรงon de crรฉer un lien hypertexte de base :

1. Choisissez le texte ou l'image. Tout dโ€™abord, dรฉcidez du texte ou de lโ€™image que vous souhaitez transformer en lien hypertexte. Il peut sโ€™agir dโ€™un mot, dโ€™une phrase, dโ€™un bouton ou dโ€™une image sur lesquels les utilisateurs cliqueront pour accรฉder ร  une autre page ou ressource.

2. ร‰crivez le code HTML. Pour crรฉer un lien hypertexte, vous utiliserez la balise HTML (รฉgalement appelรฉe balise d'ancrage). La syntaxe de base ressemble ร  ceci :

<a href="URL">Link Text or Image</a>
  • . Cette balise dรฉfinit le dรฉbut de l'hyperlien.
  • href="URL". L'attribut href spรฉcifie l'URL de destination, qui peut รชtre une page Web, un fichier ou une autre section de la mรชme page. Remplacez ยซ URL ยป par l'adresse Web rรฉelle ou le chemin d'accรจs au fichier.
  • Lien texte ou image. Il s'agit du texte ou de l'image sur lequel il sera possible de cliquer. Pour un lien hypertexte, placez simplement le texte souhaitรฉ ici. Pour un lien hypertexte image, placez une balise d'image HTML ( ) ร  l'intรฉrieur des balises d'ancrage.

3. Exemple d'un lien hypertexte. Pour crรฉer un lien hypertexte qui dirige les utilisateurs vers ยซ http://exemple.com ยป lorsqu'ils cliquent sur le mot ยซ Exemple ยป :

<a href="http://example.com">Example</a>

4. Exemple d'hyperlien vers une image. Pour crรฉer un lien hypertexte d'image ร  l'aide d'une image situรฉe ร  ยซ image.jpg ยป qui renvoie vers ยซ http://example.com ยป :

<a href="http://example.com">

  <img src="image.jpg" alt="Description of Image">

</a>

5. Enregistrez et testez. Aprรจs avoir รฉcrit votre code HTML, enregistrez les modifications et testez le lien hypertexte dans un navigateur Web. Cliquez sur le lien pour vous assurer qu'il vous dirige vers la bonne destination.

Attributs supplรฉmentaires (facultatif)

  • cible="_blank". Cet attribut ouvre le lien dans un nouvel onglet ou une nouvelle fenรชtre.
  • title="Texte de l'info-bulle". Fournit des informations supplรฉmentaires sur le lien lorsque les utilisateurs passent la souris dessus.

Par exemple, pour ouvrir le lien dans un nouvel onglet :

<a href="http://example.com" target="_blank">Example</a>

Comment crรฉer un lien vers une autre page du mรชme site ร  l'aide d'URL relatives

Crรฉer un lien vers une autre page du mรชme site ร  l'aide d'URL relatives est un moyen efficace de crรฉer des hyperliens internes sans avoir ร  spรฉcifier l'adresse Web complรจte. Une URL relative pointe vers un fichier ou un emplacement au sein du mรชme domaine, ce qui permet ร  votre site de fonctionner correctement mรชme si le nom de domaine change. Voici comment crรฉer de tels liens :

Crรฉer un lien vers une page dans le mรชme rรฉpertoire

Imaginez que vous avez deux fichiers HTML, index.html et about.html, tous deux situรฉs dans le rรฉpertoire racine de votre site. Pour crรฉer un lien depuis index.html vers about.html, vous utiliseriez :

<a href="about.html">About Us</a>

Crรฉer un lien vers une page dans un rรฉpertoire parent

Supposons que votre page actuelle se trouve dans un sous-rรฉpertoire appelรฉ blog, et vous souhaitez crรฉer un lien vers index.html situรฉ dans le rรฉpertoire racine. Vous utiliseriez :

<a href="../index.html">Home</a>

Crรฉer un lien vers une page dans un sous-rรฉpertoire

Si vous crรฉez un lien depuis index.html dans le rรฉpertoire racine vers post.html situรฉ dans un blog sous-rรฉpertoire, votre lien ressemblerait ร  ceci :

<a href="blog/post.html">Read Blog Post</a>

Comment crรฉer un lien vers une section spรฉcifique d'une page

Crรฉer un lien vers une section spรฉcifique d'une page, รฉgalement appelรฉ ยซ lien d'ancrage ยป ou ยซ lien de saut ยป, est un moyen utile de diriger les utilisateurs vers une partie particuliรจre d'une page Web. Cela est particuliรจrement utile sur les longues pages oรน vous souhaitez fournir un accรจs rapide ร  des sections spรฉcifiques. Voici comment crรฉer de tels liens :

ร‰tape 1 : Identifier ou crรฉer la section cible

Tout d'abord, vous devez identifier ou crรฉer une ยซ ancre ยป dans la section de la page vers laquelle vous souhaitez crรฉer un lien. Pour cela, ajoutez un attribut id ร  un รฉlรฉment HTML, tel qu'un titre ou un paragraphe, vers lequel vous souhaitez que le lien redirige.

Par exemple, si vous avez une section avec le titre ยซ Contactez-nous ยป, vous pouvez ajouter un identifiant au titre comme ceci :

<h2 id="contact">Contact Us</h2>

ร‰tape 2 : Crรฉer le lien vers la section

Ensuite, vous crรฉez un lien qui pointe vers l'ID de la section cible. Pour cela, utilisez une URL relative qui inclut le symbole # suivi de la valeur de l'ID.

Pour crรฉer un lien vers la section ยซ Contactez-nous ยป depuis un autre endroit de la mรชme page, le code HTML ressemblerait ร  ceci :

<a href="#contact">Go to Contact Us</a>

ร‰tape 3 : Lien depuis une autre page

Si vous souhaitez crรฉer un lien vers une section spรฉcifique ร  partir d'une autre page du mรชme site, vous devez inclure ร  la fois l'URL de la page et l'ID dans le lien. Par exemple, si la section ยซ Contactez-nous ยป se trouve sur une page appelรฉe about.html, le lien ressemblera ร  ceci :

<a href="about.html#contact">Go to Contact Us</a>

Exemple pratique

Imaginez un scรฉnario dans lequel vous disposez d'une page avec diffรฉrentes sections telles que ยซ Prรฉsentation ยป, ยซ Services ยป et ยซ Contactez-nous ยป. Voici comment vous pouvez la configurer :

<h2 id="intro">Introduction</h2>

<p>Welcome to our website...</p>

<h2 id="services">Services</h2>

<p>We offer a variety of services...</p>

<h2 id="contact">Contact Us</h2>

<p>You can reach us at...</p>

Liens de navigation

<nav>

  <ul>

    <li><a href="#intro">Introduction</a></li>

    <li><a href="#services">Services</a></li>

    <li><a href="#contact">Contact Us</a></li>

  </ul>

</nav>

Comment ouvrir un lien dans un nouvel onglet

Pour ouvrir un lien dans un nouvel onglet, vous devez ajouter l'attribut target avec la valeur _blank ร  la balise HTML. Cela indique au navigateur d'ouvrir le document liรฉ dans un nouvel onglet plutรดt que dans le mรชme onglet que la page actuelle. Voici comment procรฉder :

<a href="URL" target="_blank">Link Text</a>
  • href="URL". Cet attribut spรฉcifie l'URL de la page ou de la ressource vers laquelle vous souhaitez crรฉer un lien.
  • cible="_blank". Cet attribut et cette valeur indiquent au navigateur d'ouvrir le lien dans un nouvel onglet.

Anastasie
Spasojevic
Anastazija est une rรฉdactrice de contenu expรฉrimentรฉe avec des connaissances et une passion pour cloud l'informatique, les technologies de l'information et la sรฉcuritรฉ en ligne. ร€ phoenixNAP, elle se concentre sur la rรฉponse ร  des questions brรปlantes concernant la garantie de la robustesse et de la sรฉcuritรฉ des donnรฉes pour tous les acteurs du paysage numรฉrique.