Sur le web, les liens en HTML sont des composants essentiels de n’importe quel site internet. D’ailleurs, c’est ce qui fait que le web est une toile comme on la connaît aujourd’hui. Pour faire simple, un lien HTML5 permet de faire la liaison entre des pages web entre elles ou vers une autre page du même site. Dans la suite de cet article, nous allons vous montrer comment créer un lien HTML.
Sommaire
Lien HTML5 : qu’est-ce que c’est ?
Vous avez sans doute déjà navigué sur différentes pages d’un site web n’est-ce pas ? Tout cela, c’est grâce aux liens qui sont placés sur la page. En effet, il est question d’un texte cliquable qui vous permet d’accéder à une autre page du site. Il est également possible de faire un lien vers un autre site internet. Dans tous les cas, le concept est le même.
Sur une page web, les liens sont généralement écrits d’une manière différente. Effectivement, le texte est d’une couleur différente et par défaut, il est écrit en bleu et souligné. Lorsque vous survolez votre souris sur le lien, votre pointeur se transforme en une icône en forme de main.
Comment créer des liens HTML ?
Quel que soit le lien HTML5 qu’on souhaite créer, on utilise toujours la paire de balises <a></a>. Dans cette balise, l’attribut href servira à indiquer la page cible du lien. Que ce soit un lien interne ou externe, c’est la valeur de l’attribut href qui change. Autrement dit, il est question du lien de la page cible.
Créer un lien HTML vers un autre site web
Les liens HTML5 qui pointent vers la page d’un autre site web sont appelés liens externes. En cliquant sur le lien, l’utilisateur sera redirigé vers un site différent de ce qu’il visite. Pour cela, il faudra indiquer l’URL de la page comme valeur de l’attribut href. À titre d’exemple, nous allons pointer un lien vers Wikipédia. Son URL est la suivante : “https://fr.wikipedia.org/”.
Dans la balise <a>, on indique cette adresse en utilisant l’attribut href. Ce qui donnera :
<a href=“https://fr.wikipedia.org/”>recherche sur Wikipédia</a>
En pratique, si on clique sur le texte “recherche sur Wikipédia”, on est redirigé vers la page d’accueil de Wikipédia. Voici un texte d’exemple : Effectuons une recherche sur Wikipédia.
Ce premier lien d’exemple ouvrira le site Wikipédia sur le même onglet. Pour l’ouvrir sur un nouvel onglet du navigateur, il faudra ajouter l’attribut target suivi de la valeur _blank. Cela donnera alors :
<a href=“https://fr.wikipedia.org/” target=”_blank”>recherche sur Wikipédia</a>
Sur ce lien de recherche sur Wikipédia, vous allez ainsi l’ouvrir dans un nouvel onglet.
Créer un lien HTML vers une page du même site
Lorsque vous souhaitez créer des liens HTML5 vers une autre page du même site, le procédé est exactement identique. Il suffit de prendre l’URL de la page cible de votre site. Dans l’exemple qui suit, nous allons rediriger l’utilisateur vers un autre article du site. En HTML, cela donnera alors :
<a href=“https://41mag.fr/formater-disque-dur-mac-windows/”>formater un disque dur pour Mac et Windows</a>
Ainsi, lorsqu’on clique sur le texte “formater un disque dur pour Mac et Windows”, on sera redirigé vers cet article. Ceci est un texte d’exemple : Dans cette page, nous vous montrons les étapes nécessaires pour formater un disque dur pour Mac et Windows.
Écrire un lien HTML5 vers une adresse mail
Parfois, quand vous cliquez sur une adresse mail ou même un texte dans un site web, votre client mail par défaut s’ouvrira. C’est justement le but des liens HTML vers la boite mail. Le principe est simple, on utilise toujours l’attribut href. Au lieu d’indiquer l’adresse d’une page web, on écrit mailto suivi de l’adresse mail du destinataire. Voici un exemple :
<a href=”mailto:adresse@41mag.fr”>contactez-nous</a>
Pour mettre cela en pratique, voici un texte d’exemple : contactez-nous pour plus d’informations.
Écrire les ancres HTML
Une ancre est définie par deux choses. Il peut être question de la partie d’un texte cliquable ou même une image. L’ancre peut également être définie comme un lien dirigeant vers un élément de la même page. Lorsque le contenu d’une page est assez long, l’ancre permettra aux visiteurs du site de diriger sur une partie de la page. Cela peut être le haut de la page ou un titre précis. Une balise HTML doit ainsi être nommée avec un #id. Pour se rendre en haut de la page, il faudra alors écrire ceci :
<a href=”#top”>ancre dirigeant vers le haut de la page</a>
Mis en pratique, vous pouvez cliquer sur cette ancre dirigeant vers le haut de la page.
Pour créer une ancre vers un titre de la même page, il faudra au préalable ajouter l’attribut id à une balise. Dans l’exemple sur cette même page, voici le code HTML :
<h2 id=”Lien_HTML5”>Lien HTML5 : qu’est-ce que c’est ?</h2>
Pour accéder à ce titre de la page, il faudra créer un lien tel que :
<a href=”#Lien_HTML5”>revenir sur le titre précédent</a>
Cliquer sur revenir sur le titre précédent vous remontera sur cette partie de la page.
Créer un lien HTML5 pour télécharger un fichier
Pour permettre le téléchargement d’un fichier sur votre site, vous allez exactement créer un lien vers le fichier en question. Il faudra alors créer un lien HTML5 qui pointera vers ce fichier, tout comme s’il s’agissait d’une page web. Dans ce cas, vous devez ainsi indiquer le nom du fichier à télécharger.
Votre fichier doit tout d’abord être placé dans le même dossier que votre page web. À titre d’exemple, le fichier est le suivant : fichier.zip. Vous allez ainsi créer le lien qui ressemblera à ceci :
<a href=”fichier.zip”>télécharger ce fichier</a>
Étant donné qu’il n’est pas question d’une page web, le navigateur détectera automatiquement qu’il s’agit d’un fichier. Il va directement lancer le téléchargement du fichier.
Aujourd’hui, l’utilisation d’un CMS comme WordPress ou Shopify facilite énormément la création de lien HTML5. En ce qui concerne l’utilisation de ces outils, c’est une autre histoire…