a href : comment intégrer des liens sur votre site Web ?

La balise a href est utilisé pour intégrer des liens externes et internes sur un site Web. Dans ce contexte, les valeurs autorisées de l’attribut HTML href sont définies avec précision. Les exemples d’application sont, en plus des liens vers d’autres sites Web, la redirection vers des adresses email ou des numéros de téléphone.

Qu’est-ce que href et à quoi sert-il ?

a href vous permet de créer des liens internes et externes dans un document HTML. Utilisé correctement, l’attribut href s’intègre parfaitement dans votre site Web et y apparaît sous la forme d’un hyperlien. Les visiteurs de votre page d’accueil accèdent alors en un clic à une autre page ou changent de destination au sein de votre site. href signifie « hyper reference » et indique la destination souhaitée du lien.

L’utilisation des attributs href sur votre site Web présente de nombreux avantages. Grâce aux liens déposés, vous créez une meilleure structure, facilitez la navigation ou mettez à disposition des informations supplémentaires. Les liens peuvent également être avantageux pour le référencement naturel. Selon Google, vous pouvez tout aussi bien utiliser une URL absolue incluant le nom de domaine ou une URL relative non précédée du nom de domaine.

Quelle est la structure de a href ?

La syntaxe de href est toujours la même et se présente comme suit :

<a href="URL">Texte de l’ancre du lien</a>

Chaque élément remplit une fonction importante :

• Le lien est introduit par le a. Le a indique un texte d’ancrage. Cette balise HTML définit le point de départ et le point d’arrivée du lien hypertexte.

• L’attribut href est utilisé à l’intérieur du texte d’ancrage et détermine la destination du lien en question. En plus d’un site Web interne ou externe, il est possible de créer ici un lien vers des documents PDF ou des images, par exemple.

• L’URL du lien est placée à l’intérieur des guillemets.

• Il est suivi du texte visible sur lequel il sera possible de cliquer ultérieurement.

• Enfin, on termine par le texte d’ancrage.

Souvent, les liens sont combinés avec l’attribut title, qui définit le titre du lien, soit une description alternative de la page de destination. Le titre du lien peut contenir des informations supplémentaires du site Web vers lequel il renvoie. Il est visible depuis le frontend lorsque la souris survole le lien sans le cliquer. La définition de titres de liens est également recommandée comme mesure de référencement naturel. En langage HTML, il se présente de la sorte :

<a href="URL" title="Linktitle">Texte de l’ancre du lien</a>

Quelles valeurs href peut-il avoir ?

Les valeurs que l’attribut href peut avoir en HTML sont clairement définies. Dans le cas contraire, le lien ne s’effectue pas correctement. Les valeurs autorisées pour href sont les suivantes :

• Une URL absolue : une URL absolue est l’exemple classique d’utilisation de a href. Elle redirige directement vers un site Web externe. et contient le nom de domaine, le chemin d’accès et (si disponible) le nom de fichier. Exemple : <a href="www.exemple.fr/theme/index.html">Lien absolu pour une page d’exemple</a>
• Une URL relative : une URL relative indique uniquement le chemin d’accès à un fichier au sein d’un site Web et, en option, le nom du fichier. C’est pourquoi, les URL relatives sont nettement plus courtes que les URL absolues. Exemple : <a href="/theme/index.html">Lien relatif pour une page d’exemple</a>
• Lien vers un élément : le lien direct vers un élément est possible si celui-ci dispose d’un numéro défini. Vous avez ainsi la possibilité de créer un lien interne vers des zones sélectionnées de votre site Web. Exemple : <a href="#section3">Lien direct vers un élément</a>.
• Autres protocoles : href convient également à d’autres protocoles, par exemple si vous souhaitez créer un lien direct vers une adresse email prédéfinie. Cela fonctionne via mailto:. D’autres protocoles possibles sont entre autres https://, ftp:// ou file:.
• Scripts : les scripts, par exemple JavaScript, sont également des valeurs autorisées pour a href. Exemple : <a href="javascript:alert(‘Avez-vous d’autres questions ?’);">

Cinq exemples d’utilisation de a href

Il existe donc de nombreux cas d’utilisation de a href que vous pouvez implémenter sur votre site Web. Nous vous présentons ci-dessous quelques-uns des cas d’utilisation les plus courants de href en HTML.

Utiliser une image comme lien

Si vous souhaitez utiliser href pour placer une image comme lien vers une sous-page, utilisez le code suivant :

<a href="https://www.exemple.fr"><img src=" /image.jpg" alt="Description de l’image"></a>

Lien vers une adresse email

Pour créer un lien vers une adresse email, utilisez mailto: comme complément juste avant l’adresse :

<a href="mailto:adressemail@exemple.fr">adressemail@exemple.fr</a>

En cliquant sur le lien, le programme standard de messagerie électronique de l’internaute s’ouvre et insère automatiquement l’adresse indiquée (adressemail@exemple.fr) comme destinataire. Il est également possible de copier l’adresse email indiquée par un clic droit et de l’insérer dans le programme ou à un autre endroit.

Lier à un numéro de téléphone

Vous pouvez également créer un lien vers un numéro de téléphone avec a href. Cela est particulièrement utile lorsque quelqu’un consulte votre page via son smartphone et souhaite entrer directement en contact avec vous. Le lien se présente comme suit :

<a href="tel:+33612312345">06 12 31 23 45</a>

Pour cela, il est important d’ajouter un signe plus et le préfixe international après la référence téléphonique tel:. Le zéro de l’indicatif local est supprimé.

Lien vers JavaScript

Vous pouvez également utiliser href pour créer un lien vers JavaScript. Le code correspondant est celui-ci :

<a href="javascript:exemple ( ) ">Exemple</a>

Ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre

Les liens sont utiles à votre site, mais peut-être ne souhaitez-vous pas renvoyer directement les visiteurs de votre site Web vers une page externe ? C’est pourquoi il peut être judicieux d’ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre. Ainsi, les utilisateurs restent sur votre site et peuvent consulter ultérieurement d’éventuelles informations supplémentaires. Le code approprié pour cela est :

<a href="http://www.exemple.org" target="_blank">http://www.exemple.org</a>