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 au­to­ri­sées de l’attribut HTML href sont définies avec précision. Les exemples d’ap­pli­ca­tion sont, en plus des liens vers d’autres sites Web, la re­di­rec­tion 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é cor­rec­te­ment, l’attribut href s’intègre par­fai­te­ment 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 des­ti­na­tion au sein de votre site. href signifie « hyper reference » et indique la des­ti­na­tion souhaitée du lien.

L’uti­li­sa­tion 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 na­vi­ga­tion ou mettez à dis­po­si­tion des in­for­ma­tions sup­plé­men­taires. Les liens peuvent également être avan­ta­geux pour le ré­fé­ren­ce­ment 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.

Pour afficher cette vidéo, des cookies de tiers sont né­ces­saires. Vous pouvez consulter et modifier vos pa­ra­mètres de cookies ici.

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 im­por­tante :

• 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 hy­per­texte.

• L’attribut href est utilisé à l’intérieur du texte d’ancrage et détermine la des­ti­na­tion 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 guil­le­mets.

• Il est suivi du texte visible sur lequel il sera possible de cliquer ul­té­rieu­re­ment.

• 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 des­crip­tion al­ter­na­tive de la page de des­ti­na­tion. Le titre du lien peut contenir des in­for­ma­tions sup­plé­men­taires du site Web vers lequel il renvoie. Il est visible depuis le frontend lorsque la souris survole le lien sans le cliquer. La dé­fi­ni­tion de titres de liens est également re­com­man­dée comme mesure de ré­fé­ren­ce­ment 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 clai­re­ment définies. Dans le cas contraire, le lien ne s’effectue pas cor­rec­te­ment. Les valeurs au­to­ri­sées pour href sont les suivantes :

• Une URL absolue : une URL absolue est l’exemple classique d’uti­li­sa­tion de a href. Elle redirige di­rec­te­ment vers un site Web externe. et contient le nom de domaine, le chemin d’accès et (si dis­po­nible) 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 uni­que­ment 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 pos­si­bi­lité de créer un lien interne vers des zones sé­lec­tion­nées de votre site Web. Exemple : <a href="#section3">Lien direct vers un élément</a>.
• Autres pro­to­coles : href convient également à d’autres pro­to­coles, par exemple si vous souhaitez créer un lien direct vers une adresse email pré­dé­fi­nie. Cela fonc­tionne via mailto:. D’autres pro­to­coles possibles sont entre autres https://, ftp:// ou file:.
• Scripts : les scripts, par exemple Ja­vaS­cript, sont également des valeurs au­to­ri­sées pour a href. Exemple : <a href="javascript:alert(‘Avez-vous d’autres questions ?’);">

Cinq exemples d’uti­li­sa­tion de a href

Il existe donc de nombreux cas d’uti­li­sa­tion de a href que vous pouvez im­plé­men­ter sur votre site Web. Nous vous pré­sen­tons ci-dessous quelques-uns des cas d’uti­li­sa­tion 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 com­plé­ment juste avant l’adresse :

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

En cliquant sur le lien, le programme standard de mes­sa­ge­rie élec­tro­nique de l’in­ter­naute s’ouvre et insère au­to­ma­ti­que­ment l’adresse indiquée (adres­se­mail@exemple.fr) comme des­ti­na­taire. 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 par­ti­cu­liè­re­ment utile lorsque quelqu’un consulte votre page via son smart­phone et souhaite entrer di­rec­te­ment 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 in­ter­na­tio­nal après la référence té­lé­pho­nique tel:. Le zéro de l’indicatif local est supprimé.

Lien vers Ja­vaS­cript

Vous pouvez également utiliser href pour créer un lien vers Ja­vaS­cript. Le code cor­res­pon­dant 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 di­rec­te­ment 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 uti­li­sa­teurs restent sur votre site et peuvent consulter ul­té­rieu­re­ment d’éven­tuelles in­for­ma­tions sup­plé­men­taires. Le code approprié pour cela est :

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