Qu'est-ce qu'un lien hypertexte ?

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.

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.