Comment faire un lien HTML avec l'attribut a href ?

Le lien HTML est un fondamental à maîtriser lors de la création d'un site web. L'internaute, lorsqu'il navigue, exige en effet de pouvoir enrichir sa recherche au fil des redirections. Illustration : le consommateur en quête d'une crème solaire pour enfant consulte un article de blog ; au niveau du sommaire, il clique sur la section qui l'intéresse ; un lien dans le texte le redirige vers un comparatif de vêtements anti-UV ; il clique sur l'image du produit qui le convainc le mieux et atterrit sur le site qui le vend en ligne ; il achète le vêtement. Ce sont les liens HTML qui ont permis au consommateur de parcourir le chemin de manière fluide. Ces liens HTML sont l'essence du web, dans sa traduction littérale de « toile » : internet tisse des liens entre les différents contenus, pour proposer une expérience utilisateur optimale.

Le lien HTML, également appelé hyperlien ou lien hypertexte, sert à diriger le visiteur vers une destination spécifique, d'un simple clic. Le lien peut être inséré sur tous types de contenus : texte ou image, par exemple. Pour coder le lien en HTML, il faut renseigner l'élément < a >, pour « anchor » ou « ancre » : cet élément informe que le contenu est un lien. Il faut ensuite ajouter l'attribut href, nécessaire et suffisant, qui indique le chemin de destination : une page du site ou d'un site tiers, un fichier à visualiser ou à télécharger, une adresse e-mail ou encore un endroit spécifique d'une page web. D'autres attributs, facultatifs, permettent de paramétrer de manière avancée le fonctionnement de l'hyperlien.

Les fondamentaux à connaître pour faire un lien HTML avec l'attribut a href :

• Le code HTML pour insérer un lien sur une page web : < a href="adresse de redirection" > texte cliquable à afficher < /a >.
• L'élément « a » nécessite une balise d'ouverture < > et une balise de fermeture < / >. Le texte renseigné entre les deux balises est cliquable.
• Recommandation : rédiger un texte qui a du sens hors contexte. Exemple : éviter de renseigner < a href="adresse de redirection" > cliquer ici < /a >. Lorsque le texte décrit le comportement du lien, la navigation est facilitée pour le visiteur qui utilise des technologies d'assistance telles qu'un lecteur d'écran. Exemple : préférer < a href="adresse de redirection" > voir la source Wikipédia < /a >.
• L'attribut href est indispensable au fonctionnement du lien, il est placé à l'intérieur de la balise d'ouverture et sa valeur est mentionnée entre guillemets anglais.
• Pour personnaliser le lien HTML, il est possible d'ajouter d'autres attributs dans la balise d'ouverture de l'élément « a ». Exemples : l'attribut title="texte de l'info-bulle" fait apparaître une info-bulle lorsque le visiteur pointe sa souris sur le lien ; l'attribut download="nom-d'enregistrement" télécharge le fichier plutôt que de l'ouvrir dans le navigateur ; l'attribut target="_blank" ouvre le lien dans un nouvel onglet ou dans une nouvelle fenêtre, pour éviter que le visiteur quitte le site.
• Pour faire un lien HTML sur une image, il faut insérer l'attribut img src entre les balises d'ouverture et de fermeture de l'attribut a href : < a href="adresse de redirection" > < img src="URL de l'image" > < /a >. Lorsque le contenu cliquable est une image, le lien modifie l'aspect du pointeur lorsque l'utilisateur survole l'image.

Les différentes utilisations de a href

La valeur de l'attribut href détermine la nature du contenu de redirection. Il est possible de faire un lien vers une page du site web ou d'un site tiers, vers une section de page web ou encore vers une adresse e-mail. Le code pour insérer le lien HTML varie alors en fonction du contenu de redirection.

URL absolue

L'URL absolue se présente sous la forme : https://www.adresse-du-site.extension. Utiliser une URL absolue est nécessaire pour diriger vers un site internet tiers, au nom de domaine distinct de la page sur laquelle le lien HTML est inséré. On parle de lien externe. Les liens externes servent à indiquer la source d'une information, à rediriger une page de comparatif de produits vers les sites marchands correspondants, ou encore à matérialiser un partenariat entre une marque et l'association caritative qu'elle soutient.

Exemple d'utilisation d'une URL absolue dans un lien HTML a href :

See the Pen lien-html_url-absolue by HubSpot France (@HubSpot-France) on CodePen.

URL relative

L'URL est dite relative lorsqu'elle pointe vers un emplacement relatif au fichier à partir duquel le lien HTML est inséré. On parle de lien interne : le visiteur est redirigé vers une page du site web, qui partage le même nom de domaine. Les liens internes sont utiles pour améliorer la navigation sur le site : le visiteur compare les produits en passant d'une fiche à l'autre, ou se rend sur la page de contact en un clic. Il est recommandé d'utiliser une URL relative, le cas échéant, pour préserver le fonctionnement du lien HTML en cas de refonte du site ou de changement de nom de domaine : le lien continue de rediriger vers la page, même si son adresse URL absolue est modifiée.

La valeur de l'attribut href pour une URL relative est le nom du fichier, ainsi que l'indication du dossier qui contient le contenu de redirection. Exemple :

See the Pen lien-html_url-relative by HubSpot France (@HubSpot-France) on CodePen.

Section de page

Il est possible de faire un lien HTML pour diriger le visiteur à un endroit spécifique de la page web. Cette utilisation de l'attribut a href permet notamment d'insérer un sommaire interactif : le visiteur clique sur le chapitre de son choix pour se rendre directement sur la section qui l'intéresse. Cela lui évite de faire défiler péniblement le contenu lorsqu'il est particulièrement long, l'expérience utilisateur s'en trouve améliorée.

Pour coder le lien vers une section de page, il faut dans un premier temps nommer cette section à l'aide de l'attribut id, pour permettre son identification. Ensuite, il faut renseigner le lien HTML en utilisant le symbole # suivi du nom id. À noter que le nom id peut être remplacé par la mention « top », pour rediriger le visiteur en haut de la page web. Exemple :

See the Pen lien-html_section-de-page by HubSpot France (@HubSpot-France) on CodePen.

Il est possible de faire un lien HTML vers une section d'une autre page du site. Dans ce cas, il faut ajouter #id à la fin de l'URL relative.

E-mail

L'attribut a href peut diriger vers une adresse e-mail : il suffit au visiteur de cliquer sur le lien HTML pour envoyer un e-mail. L'attribut a href prend alors la valeur mailto : < a href="mailto:exemple@gmail.com" > Nous écrire < /a >. Exemple :

See the Pen lien-html_email by HubSpot France (@HubSpot-France) on CodePen.

Dans le même objectif de contact, l'attribut a href peut prendre la valeur tel pour permettre au visiteur de téléphoner à un interlocuteur en un clic : < a href="tel:+33601020304" > Nous appeler < /a >. Sur mobile, l'hyperlien permet de composer directement le numéro de téléphone ; sur un ordinateur, le lien HTML ouvre un programme tel que Skype ou FaceTime.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.