Le monde du web serait bien différent sans l’un de ses outils les plus essentiels : le lien hypertexte. Véritable pont entre différentes pages web ou entre diverses sections d’un même document, ce mécanisme est la base même de la navigation sur Internet. Plongeons-nous dans sa définition et son fonctionnement pour mieux comprendre.
La définition du lien hypertexte
Un lien hypertexte, communément et plus simplement désigné sous l’appellation de « lien », se définit comme étant une référence ou un raccourci interactif au sein d’un contenu numérique. Par le simple geste de cliquer ou de taper dessus, l’utilisateur a la possibilité de se déplacer d’un document électronique à un autre. Cette navigation peut également s’opérer au sein d’un unique document, permettant de passer d’une section à une autre. À titre illustratif, il est aisé de comparer un lien hypertexte à une porte dérobée dans un livre : un moyen rapide et efficace de passer d’un chapitre à un autre ou de consulter une annexe en relation avec le sujet lu.
La magie du lien hypertexte réside dans sa capacité à rendre le vaste univers du web interconnecté. Sans cette technologie, chaque page ou document en ligne serait comme une pièce isolée dans un immense bâtiment sans couloirs ni passages.
Les liens hypertextes sont composés de deux éléments fondamentaux :
- L’URL (Uniform Resource Locator) : C’est l’adresse précise où le contenu cible est hébergé. Elle indique le chemin à suivre pour accéder à une ressource spécifique sur le web, que ce soit une page web, une image, une vidéo ou tout autre type de contenu ;
- Le texte d’ancrage : C’est la portion de texte visible qui est souvent soulignée et présentée dans une couleur différente pour indiquer qu’il s’agit d’un lien cliquable. Ce texte d’ancrage donne généralement une idée du contenu vers lequel il pointe, bien que les meilleures pratiques du web recommandent qu’il soit pertinent et descriptif.
Outre la simple navigation, les liens hypertextes ont un rôle fondamental dans la manière dont nous percevons et organisons l’information sur le web. Ils permettent la création de réseaux de connaissances, facilitent la recherche d’informations complémentaires et enrichissent notre expérience de navigation en rendant le web dynamique et interactif.
Comment cela marche (exemple) ?
Cette passerelle qui connecte d’innombrables ressources numériques entre elles se décompose en plusieurs éléments que nous voyons ci-après.
Prenons un exemple concret pour illustrer ces composants. Imaginez le code HTML suivant :
<a href="https://www.exemple.com">Visitez notre site</a>
Explications :
<a>
- <a>, c’est la balise d’ouverture du lien hypertexte.
- Elle signifie que tout ce qui se trouve entre cette balise d’ouverture et sa balise de fermeture correspondante (</a>) est un lien hypertexte.
- « a » provient du mot « anchor » en anglais, qui signifie « ancre ». Dans le contexte du HTML, cela fait référence à une ancre de lien hypertexte.
href
- Il s’agit d’un attribut de la balise <a> ;
- « href » est la contraction de « hypertext reference » en anglais, ce qui signifie « référence hypertexte » ;
- L’attribut href définit l’URL ou l’adresse de la ressource vers laquelle le lien pointe. C’est la destination du lien.
"https://www.exemple.com"
- C’est la valeur de l’attribut href ;
- Il s’agit de l’URL exacte vers laquelle l’utilisateur sera dirigé lorsqu’il cliquera sur le lien ;
- « https://www.exemple.com » est juste un exemple d’URL. En réalité, cela pourrait être n’importe quelle URL valide.
>Visitez notre site<
- Il s’agit du texte d’ancrage du lien ;
- C’est le texte visible que les utilisateurs verront sur la page web. En cliquant sur ce texte, ils seront redirigés vers l’URL spécifiée dans l’attribut href ;
- Dans cet exemple, le texte d’ancrage est « Visitez notre site », mais il pourrait être n’importe quel autre texte.
</a>
- C’est la balise de fermeture du lien hypertexte ;
- Elle signale la fin du lien hypertexte. Tout ce qui est placé après cette balise ne sera pas considéré comme faisant partie du lien.
Les attributs possibles du lien hypertexte
Outre l’attribut ahref que nous avons déjà évoqué, qui spécifie la destination du lien, la balise <a> peut être accompagnée de nombreux autres attributs, chacun offrant des fonctionnalités spécifiques. Découvrons ensemble quelques-uns des attributs les plus pertinents et leur rôle.
L’attribut target
L’attribut target est un outil essentiel dans la conception de pages web, car il détermine comment une nouvelle page ou un nouveau document, une fois cliqué, s’affichera à l’utilisateur. C’est un moyen de contrôler l’expérience de navigation et d’assurer une interaction fluide.
_blank
Prenons par exemple l’attribut target avec la valeur _blank. Si vous avez déjà cliqué sur un lien et qu’il s’est ouvert dans un nouvel onglet de votre navigateur, c’est cette valeur qui a été utilisée. Elle est particulièrement utile lorsque les concepteurs souhaitent garder l’utilisateur sur leur site tout en lui fournissant un lien vers une ressource externe. Par exemple :
<a href="https://www.exemple.com" target="_blank">Cliquez ici pour une nouvelle ressource</a>.
_self
Ensuite, nous avons la valeur _self. C’est le comportement par défaut de tout lien hypertexte, même si l’attribut target n’est pas explicitement spécifié. Lorsque vous cliquez sur un lien avec cette valeur, il remplace la page actuelle par la nouvelle ressource. C’est comme tourner la page d’un livre. Un exempleci-dessous :
<a href="https://www.page2.com" target="_self">Accédez à la page suivante</a>.
_parent
La valeur _parent est spécifique aux sites web qui utilisent des cadres ou des frames. Si un site est divisé en plusieurs cadres et que vous cliquez sur un lien avec la valeur _parent, la nouvelle page remplacera le cadre parent du lien, et non pas l’ensemble de la page. Par exemple, si vous avez un menu dans un cadre et le contenu principal dans un autre, un lien dans le menu pourrait utiliser :
<a href="https://www.contenu.com" target="_parent">Voir le contenu</a>.
_top
Enfin, la valeur _top est utilisée pour s’assurer que la nouvelle page s’affiche en remplaçant tous les cadres actuels, prenant ainsi toute la fenêtre du navigateur. C’est utile si un site avec des cadres fournit un lien vers un site externe et que le concepteur souhaite s’assurer que l’expérience de l’utilisateur est entièrement réinitialisée. Un exemple est :
<a href="https://www.siteexterne.com" target="_top">Visitez ce site externe</a>.
Chaque valeur de l’attribut target offre aux concepteurs une flexibilité pour déterminer comment les ressources liées sont présentées, garantissant ainsi que les utilisateurs aient une expérience de navigation adaptée et intuitive.
L’attribut rel
L’attribut rel des liens hypertextes joue un rôle subtil mais essentiel dans le paysage du web moderne. Il sert à définir la relation entre la page actuelle et la page ou ressource vers laquelle pointe le lien. Bien que cet attribut puisse sembler anodin à première vue, il a des implications importantes, notamment en matière de référencement (SEO) et de sécurité.
nofollow
La valeur nofollow de l’attribut rel a été introduite en réponse à l’augmentation des spams de commentaires sur les blogs et les forums. Lorsqu’un lien est marqué avec nofollow, il transmet un message clair aux moteurs de recherche : « Ne transférez pas de ‘jus de référencement’ à cette URL et ne la considérez pas pour le classement ». En d’autres termes, même si le lien est actif et cliquable pour l’utilisateur, il ne contribuera pas à améliorer le classement du site cible dans les résultats de recherche. Un exemple d’utilisation serait :
<a href="https://www.example.com" rel="nofollow">Lien externe</a>.
noopener
Ensuite, nous avons la valeur noopener. Dans le contexte moderne de la sécurité web, cette valeur est devenue particulièrement pertinente. Lorsqu’un lien ouvre une nouvelle page dans un nouvel onglet ou une nouvelle fenêtre, cette dernière a la capacité d’accéder à la page d’origine via l’objet JavaScript window.opener. Cela peut être exploité de manière malveillante. En ajoutant noopener, cette capacité est bloquée, offrant ainsi une couche de sécurité supplémentaire. Voici comment cela pourrait être utilisé :
<a href="https://www.securise.com" target="_blank" rel="noopener">Visitez ce site sécurisé</a>.
La valeur noreferrer va encore plus loin en matière de sécurité et de confidentialité. Lorsqu’un navigateur suit un lien, il envoie généralement un en-tête « Referer » à la nouvelle page, indiquant d’où vient l’utilisateur. Cet en-tête peut parfois divulguer des informations sensibles. En utilisant noreferrer, cet en-tête est supprimé, assurant que la page d’origine reste anonyme. Un exemple peut être :
<a href="https://www.anonyme.com" rel="noreferrer">Lien anonyme</a>.
ugc (User Generated Content)
La valeur ugc (et la suivante « sponsored » qui ont été préconisées par Google en 2019) est une indication pour les moteurs de recherche que le lien provient d’un contenu généré par les utilisateurs. Pour ugc, cela concerne typiquement les sections de commentaires ou les forums où les utilisateurs peuvent poster des liens. Avec l’augmentation du spam SEO sous forme de commentaires ou de publications dans les forums, cette valeur aide les moteurs de recherche à mieux contextualiser et évaluer ces liens. Un exemple d’utilisation pourrait être :
<a href="https://www.exemple-utilisateur.com" rel="ugc">Lien posté par un utilisateur</a>
sponsored
Comme son nom l’indique, cette valeur signale que le lien a été placé dans le cadre d’un accord de sponsoring ou d’une publicité payée. Cela permet une transparence accrue, car il est essentiel pour les moteurs de recherche (et souvent pour les réglementations locales) de distinguer le contenu organique du contenu payant. Si une entreprise paie pour un backlink dans le cadre d’une campagne de marketing ou de publicité, ce lien devrait être marqué comme « sponsored » pour indiquer sa nature commerciale :
<a href="https://www.produit-sponsorise.com" rel="sponsored">Lien sponsorisé</a>
Il est possible de combiner ces valeurs avec d’autres valeurs rel si nécessaire. Par exemple, si vous avez un lien qui est à la fois sponsorisé et que vous ne souhaitez pas que les moteurs de recherche le suivent, vous pourriez avoir quelque chose comme :
<a href="https://www.produit-sponsorise.com" rel="sponsored nofollow">Lien sponsorisé</a>
title
L’attribut title est l’un des éléments souvent sous-estimés dans la panoplie d’outils dont disposent les concepteurs de sites web. Bien que sa présence puisse sembler discrète, il joue un rôle crucial pour améliorer la compréhension et l’accessibilité d’une page web.
Lorsqu’un lien hypertexte est doté de l’attribut title, il procure aux utilisateurs des informations contextuelles supplémentaires sur le lien. Ces informations sont présentées sous forme d’une infobulle discrète qui apparaît lorsque l’utilisateur place le curseur de sa souris sur le lien, sans cliquer. Cette infobulle fournit une brève description ou clarification, aidant l’utilisateur à anticiper le type de contenu ou la nature de la page vers laquelle le lien le redirigera.
Par exemple, imaginez un article de blog faisant référence à une étude scientifique complexe. Plutôt que de distraire le lecteur avec une longue parenthèse explicative dans le texte principal, un lien vers l’étude pourrait être inséré avec un attribut title explicatif :
<a href="https://www.recherche-scientifique.com" title="Étude sur les effets de la lumière bleue sur le sommeil">lire l'étude</a>
Dans cet exemple, si l’utilisateur survole le lien « lire l’étude », une infobulle apparaîtra avec le texte « Étude sur les effets de la lumière bleue sur le sommeil », lui donnant ainsi un aperçu du contenu de la page cible.
L’utilisation judicieuse de l’attribut title peut améliorer significativement l’expérience utilisateur. Il permet d’apporter des précisions sans surcharger visuellement la page et offre une guidance discrète mais efficace, on e vot notamment sur certains sites de ressources comme Wikipédia. De plus, pour les personnes utilisant des lecteurs d’écran ou d’autres technologies d’assistance, l’attribut title peut fournir des détails contextuels qui enrichissent leur navigation.
Cependant, il est important de l’utiliser avec parcimonie et pertinence. Une surabondance d’infobulles peut distraire et gêner la lecture, tandis qu’un manque de clarté ou de pertinence peut induire en erreur. Comme toujours, la clé est de garder à l’esprit les besoins et les attentes des utilisateurs.
download
Sur la toile, l’interaction la plus courante avec un lien hypertexte est la navigation, où le clic sur un lien conduit l’utilisateur vers une nouvelle page ou ressource. Cependant, il existe des situations où l’intention est différente : plutôt que de simplement visualiser une ressource, l’utilisateur pourrait vouloir la télécharger. C’est là qu’intervient l’attribut dowload, une nuance puissante dans la manière dont les liens hypertextes peuvent être configurés.
Quand l’attribut download est appliqué à un lien, le navigateur comprend que la ressource associée doit être téléchargée sur l’appareil de l’utilisateur, et non simplement affichée ou lue. Cette fonction est particulièrement utile pour les documents, les images, les fichiers audio et tout autre contenu que l’utilisateur pourrait souhaiter conserver localement pour un usage ultérieur.
Prenons, par exemple, un site web qui propose des photographies en haute résolution. Au lieu de rediriger les utilisateurs vers une nouvelle page affichant l’image, le site pourrait permettre un téléchargement direct grâce à l’attribut download :
<a href="https://www.site-image.com/photo-haute-resolution.jpg" download>Cliquez ici pour télécharger l'image en haute résolution</a>
L’attribut download peut également être agrémenté d’une valeur spécifique, qui détermine le nom du fichier une fois téléchargé. Imaginons que vous souhaitiez que l’image précédemment mentionnée soit téléchargée avec un nom plus descriptif :
<a href="https://www.site-image.com/photo-haute-resolution.jpg" download="Paysage_Montagne_HauteResolution.jpg">Cliquez ici pour télécharger l'image</a>
type
Dans le vaste écosystème du web, une multitude de formats de fichiers et de types de médias coexistent. Pour que les navigateurs puissent traiter efficacement ces ressources, il est essentiel qu’ils identifient correctement leur nature. C’est là qu’intervient l’attribut type, un guide qui fournit des indications précises sur le type MIME (Multipurpose Internet Mail Extensions) de la ressource à laquelle un lien hypertexte pointe.
L’attribut type est comme une étiquette qui décrit le contenu d’un paquet, permettant aux navigateurs de savoir comment l’ouvrir et le traiter. En spécifiant le type MIME, les concepteurs web offrent une indication claire sur la manière dont la ressource devrait être interprétée. Cela peut accélérer le processus de chargement, car le navigateur n’a pas besoin de « deviner » le type de contenu, et cela peut également aider à éviter des erreurs d’affichage ou de traitement.
Prenons l’exemple d’un document académique ou d’un rapport professionnel. Ces documents sont souvent disponibles au format PDF pour garantir leur mise en forme et leur apparence uniforme. Si un site web propose un lien vers un tel document, l’utilisation de l’attribut type avec la valeur « application/pdf » informera le navigateur que le fichier lié est un PDF. Voici comment cela peut être mis en œuvre :
<a href="https://www.monsite.com/document-academique.pdf" type="application/pdf">Téléchargez le document académique</a>
Avec ce lien, le navigateur sait immédiatement qu’il traite un fichier PDF. Si l’utilisateur clique sur le lien, le navigateur peut alors ouvrir directement le document dans un lecteur PDF intégré ou proposer le téléchargement du fichier, en fonction de la configuration du navigateur et des préférences de l’utilisateur.
L’utilisation de l’attribut type va au-delà des PDF. Il peut être utilisé pour une variété de formats, des images aux vidéos en passant par les applications. Par exemple, type= »image/jpeg » sera utilisé pour une image JPEG, ou type= »video/mp4″ pour une vidéo au format MP4.
hreflang
À l’ère de la mondialisation, l’internet est devenu un espace multilingue où des utilisateurs de différentes régions et cultures interagissent avec des contenus dans de nombreuses langues. Pour les sites qui proposent du contenu dans plusieurs langues, il est crucial de s’assurer que les utilisateurs accèdent à la version la plus pertinente pour eux. C’est ici que l’attribut hreflang joue un rôle déterminant, agissant comme un phare guidant les utilisateurs vers le contenu le plus approprié à leur langue.
L’attribut hreflang est conçu pour préciser la langue (et éventuellement la région) de la ressource cible du lien. Cette précision permet aux moteurs de recherche de comprendre dans quelle langue est rédigé le contenu de la page cible, aidant ainsi à fournir des résultats de recherche plus pertinents pour les utilisateurs multilingues.
Imaginons un site web touristique qui propose des guides sur Paris, disponibles en anglais, en français et en espagnol. Si un utilisateur anglophone visite la page d’accueil, il serait utile de le diriger vers le guide en anglais pour une meilleure compréhension. De même, un utilisateur hispanophone bénéficierait de la version espagnole du guide. Voici comment l’attribut hreflang pourrait être utilisé dans ce contexte :
<a href="https://www.guidedeparis.com/en" hreflang="en">Guide of Paris (English version)</a>
<a href="https://www.guidedeparis.com/fr" hreflang="fr">Guide de Paris (Version française)</a>
<a href="https://www.guidedeparis.com/es" hreflang="es">Guía de París (Versión en español)</a>
Dans ces exemples, chaque lien pointe vers une version linguistique différente du guide. L’attribut hreflang avec les valeurs « en », « fr » et « es » indique respectivement les versions anglaise, française et espagnole du contenu.
L’usage de l’attribut hreflang ne s’arrête pas à la simple distinction linguistique. Il peut également (et surtout d’ailleurs en référencement) être utilisé pour cibler des régions spécifiques au sein d’une langue. Par exemple, hreflang= »en-US » serait spécifiquement pour les anglophones des États-Unis, tandis que hreflang= »en-GB » ciblerait ceux du Royaume-Uni.
Les différents types de liens hypertextes
Ces liens peuvent être catégorisés de diverses manières, selon leur fonction et leur destination. A noter qu’ils font l’objet d’une étude approfondie de la part de toute bonne agence de référencement :
- Les liens internes : Les liens internes jouent un rôle déterminant dans la cohérence et la navigabilité d‘un site web ou d’un document numérique. Comme leur nom l’indique, ils pointent vers une autre section du même site ou du même document. En connectant différentes pages ou sections d’un même domaine, ils facilitent la navigation de l’utilisateur, lui permettant de découvrir plus de contenu sans avoir à retourner à la page d’accueil ou à utiliser des outils de recherche. De plus, ils contribuent à améliorer la structure d’un site, permettant ainsi aux moteurs de recherche de mieux comprendre et indexer le contenu, ce qui peut avoir un impact positif sur le référencement ;
- Les liens externes : À l’opposé des liens internes, les liens externes sont conçus pour diriger l’utilisateur vers un site ou un document différent. Ces liens sont essentiels pour établir des connexions avec d’autres sources d’information, offrant ainsi aux utilisateurs une porte vers des références complémentaires ou des ressources supplémentaires. Cela peut être particulièrement utile pour fournir des preuves, des éclaircissements ou des informations contextuelles. Toutefois, il est essentiel que ces liens externes soient pertinents et de confiance, car diriger les utilisateurs vers des sources non fiables peut nuire à la crédibilité du contenu d’origine ;
- Les liens d’ancrage : Ces liens ont une fonction bien spécifique. Ils permettent de guider l’utilisateur directement vers une section déterminée d’une page web. Au lieu de diriger vers une nouvelle page ou un nouveau site, ils mènent à un point précis sur la page en cours. Cela est souvent réalisé en utilisant une balise d’identifiant. Par exemple, dans une longue page web détaillant un sujet complexe, les liens d’ancrage peuvent être utilisés dans une table des matières pour permettre aux utilisateurs de sauter directement à la section qui les intéresse. C’est une façon efficace d’améliorer l’expérience utilisateur, en rendant l’accès à l’information plus direct et intuitif.
L’importance du lien hypertexte pour conclure
Le lien hypertexte est l’un des piliers fondateurs de l’internet tel que nous le connaissons ainsi que toute bonne agence Web vous le dira. Cet élément simple, mais puissant, est le trait d’union qui tisse le tissu même de la toile, transformant une multitude de pages isolées en un écosystème dynamique et interconnecté.
À l’origine, chaque document ou page web existait comme une entité indépendante, comparable à une page d’un livre ou à un article de journal. Cependant, grâce à l’introduction des liens hypertextes, ces « pages » ont été dotées de portes dérobées menant à d’autres ressources, créant ainsi un maillage d’informations. Cette interconnexion a engendré une révolution dans la manière dont nous accédons à l’information. Au lieu de chercher des informations de manière linéaire, nous pouvons désormais suivre un chemin fluide d’une ressource à l’autre, basé sur nos intérêts, nos questions ou notre curiosité.
Au-delà de la simple navigation, les liens hypertextes ont pris une importance cruciale dans le domaine du référencement (SEO). Les moteurs de recherche, tels que Google, utilisent des robots d’indexation pour parcourir le web. Ces robots suivent les liens hypertextes d’une page à l’autre, découvrant ainsi de nouveaux contenus. Mais ces liens ne servent pas uniquement à la découverte : ils sont également un indicateur de la qualité et de la pertinence d’une page. Un site qui est fréquemment lié par d’autres sites de qualité est généralement considéré comme étant de haute valeur, et cela peut avoir un impact positif sur son classement dans les résultats de recherche.
Cependant, cette puissance des liens dans le SEO a également entraîné des abus, avec l’émergence de tactiques telles que le « link farming » ou la création de liens artificiels. D’où l’importance d’une utilisation éthique et pertinente des liens pour garantir un internet authentique et orienté vers l’utilisateur.
En conclusion de ce sujet assez complet, le lien hypertexte, bien que discret, est le ciment qui maintient ensemble l’architecture du web. Il façonne notre manière d’interagir avec l’information, dirige les flux de trafic et influence même la visibilité des sites web dans les moteurs de recherche. Sa présence silencieuse mais constante rappelle son rôle essentiel dans la création d’un web interconnecté, dynamique et centré sur l’utilisateur.
R.C.
