Que sont les balises d’ancrage en HTML?
Une balise d’ancrage (<a>) en HTML est un élément permettant de créer des liens vers des pages web, des répertoires, des adresses e-mail, des images et plus encore.
L’élément débute par <a , se termine par </a>. À l'intérieur de ces deux marqueurs se trouvent divers attributs qui composent la balise complète. Nous aborderons les attributs un peu plus bas dans cet article.
Vous pouvez également utiliser les balises d’ancrage dans le but de créer des liens d’ancrage. Les liens d’ancrage mènent à différentes sections d’une même page web.
Lorsque vous créez des liens textuels avec la balise « a », vous devez utiliser un texte d’ancrage. Le texte d’ancrage est la partie visible du lien , celle qui peut être cliquée. Google utilise ce texte pour extraire des informations sur le lien et le contenu vers lequel il pointe.
Vous pouvez ajouter différents attributs à vos balises d’ancrage. Ceux-ci servent à spécifier ce que vous voulez voir se produire lorsqu’un utilisateur clique. Ils servent également à ajouter un des indications sémantiques pour les crawlers et les navigateurs web.
L’attribut “href,” définit un ancrage de référence hypertexte. Il sert à spécifier la cible de l’élément d’ancrage. Une balise Href ressemble à ceci :
<a href="URL">
Il est couramment utilisé pour définir l’URL de la page vers laquelle mène la balise. Il peut également être utilisé pour lier des fichiers, adresses e-mail, numéros de téléphone, et plus encore.
Par exemple, un lien vers une page Web utiliserait un extrait de code semblable à ceci :
<a href="https://exemple.com">Site Web</a>
La balise d’ancrage href se résume à l’adresse URL entre guillemets. Dans notre exemple, les mots « Site Web» sont le texte d’ancrage, soit la portion visible et cliquable du lien.
L’attribut « hreflang » indique la langue de la ressource liée. Pour ce faire, il utilise un code de langue à deux lettres ISO 639-1. La balise ressemble à ceci :
<a hreflang="language_code">
Si vous souhaitez spécifier le français comme langue de la page, il faudrait donc utiliser le code suivant :
<a href="https://exemple.com" hreflang="fr">Site Web</a>
L’attribut hreflang est le code de pays ou de langages à deux lettres. Dans notre exemple, il s'agit du "fr" entre guillemets. Notez que l’attribut hreflang ne peut être utilisé que si l’attribut href est également utilisé.
L’attribut « Download » indique au navigateur de télécharger la ressource liée au lieu de l’ouvrir. La balise devrait ressembler à ceci :
<a download="nomdufichier">
Il est important d'entrer le nom complet du fichier, incluant son extension. Par exemple, si le fichier est un PDF, le code devrait ressembler à ceci :
<a href="exemple.pdf" download="Exemple">
L’attribut de ce type de balise est le nom du fichier. Dans ce cas, « Exemple ».
Si aucun nom de fichier n'est spécifié, le nom de fichier original sera extrait du document.
L’attribut de balise « rel » spécifie la la nature de la relation entre la ressource courante et la ressource liée. La balise devrait ressembler au modèle suivant:
<a rel="value">
Ce type de balise doit se voir assigner une valeur. Les valeurs d’attributs « rel » les plus courantes sont les suivantes :
rel= "alternate" : Cette valeur sert à identifier la ressource liée comme étant une version alternative de la ressource actuelle
rel= "author" : Permet de fournir un lien vers l’auteur de la ressource à laquelle la balise est attribuée.
rel= “bookmark” : Indique que l’URL est permanente et peut être utilisée comme signet. Souvent utilisée dans les index de longs articles pour naviguer rapidement vers une section spécifique.
rel="help" : Cette valeur indique que le lien contient un document d’aide pour les utilisateurs de la page actuelle
rel="next" : Sert à spécifier qu'un lien mène vers la page suivante de la série. Sert notamment pour les articles, nouvelles, ou galeries de photos.
rel= "prev" : Valeur pour spécifier qu'un lien mène vers la page précédente de la série
rel= "nofollow" : Indiquer aux crawlers des moteurs de recherche de ne pas suivre le lien. Sert à indiquer que vous n'approuver et ne cautionner pas le lien
rel=“search” : Permet de spécifier la page liée. Pour ce faire, il est possible de rechercher du contenu sur la page ou l'ensemble du site
Par exemple, vous pouvez utiliser le code suivant pour indiquer que le lien est une page sur l’auteur de l’article:
Article rédigé par <a href="https://exemple.com/+NomAuteur"
rel="author">Nom de l’auteur</a>
Notez que les moteurs de recherche comme Google utilisent l’attribut « rel » pour obtenir plus d’informations sur un lien.
L’attribut « target » indique au navigateur où ouvrir le lien. La cible peut être le même onglet, un nouvel onglet, une nouvelle fenêtre, etc..
Une balise Target ressemble à ceci :
<a target="value">
Les différentes valeurs possibles des balises de cible incluent:
« _self » : Indique d'ouvrir le lien dans le même cadre (généralement le même onglet ou la même fenêtre)
« _blank » : Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre. Il s'agit de l’approche la plus courante à l'heure actuelle.
« _parent » : Indique au navigateur d'ouvrir le lien à l'intérieur du cadre de niveau supérieur suivant, appelé cadre parent
« top » : Cette valeur ignore toutes les images et ouvre le lien en tant que document supérieur_. Cela se fait dans la même fenêtre du navigateur
« framename » : Indique d'ouvrir le lien dans le cadre défini.
Par exemple, pour créer un lien s’ouvrant dans un nouvel onglet, la balise ressemblerait à ceci :
<a href="https://exemple.com" target="_blank">Site Web</a>
L’élément débute par <a , se termine par </a>. À l'intérieur de ces deux marqueurs se trouvent divers attributs qui composent la balise complète. Nous aborderons les attributs un peu plus bas dans cet article.
Vous pouvez également utiliser les balises d’ancrage dans le but de créer des liens d’ancrage. Les liens d’ancrage mènent à différentes sections d’une même page web.
Lorsque vous créez des liens textuels avec la balise « a », vous devez utiliser un texte d’ancrage. Le texte d’ancrage est la partie visible du lien , celle qui peut être cliquée. Google utilise ce texte pour extraire des informations sur le lien et le contenu vers lequel il pointe.
Attributs des éléments d’ancrage HTML
Vous pouvez ajouter différents attributs à vos balises d’ancrage. Ceux-ci servent à spécifier ce que vous voulez voir se produire lorsqu’un utilisateur clique. Ils servent également à ajouter un des indications sémantiques pour les crawlers et les navigateurs web.
Voici certains des attributs les plus courants et importants :
Href (référence hypertexte)
L’attribut “href,” définit un ancrage de référence hypertexte. Il sert à spécifier la cible de l’élément d’ancrage. Une balise Href ressemble à ceci :
<a href="URL">
Il est couramment utilisé pour définir l’URL de la page vers laquelle mène la balise. Il peut également être utilisé pour lier des fichiers, adresses e-mail, numéros de téléphone, et plus encore.
Par exemple, un lien vers une page Web utiliserait un extrait de code semblable à ceci :
<a href="https://exemple.com">Site Web</a>
La balise d’ancrage href se résume à l’adresse URL entre guillemets. Dans notre exemple, les mots « Site Web» sont le texte d’ancrage, soit la portion visible et cliquable du lien.
Hreflang (référence de langage)
L’attribut « hreflang » indique la langue de la ressource liée. Pour ce faire, il utilise un code de langue à deux lettres ISO 639-1. La balise ressemble à ceci :
<a hreflang="language_code">
Si vous souhaitez spécifier le français comme langue de la page, il faudrait donc utiliser le code suivant :
<a href="https://exemple.com" hreflang="fr">Site Web</a>
L’attribut hreflang est le code de pays ou de langages à deux lettres. Dans notre exemple, il s'agit du "fr" entre guillemets. Notez que l’attribut hreflang ne peut être utilisé que si l’attribut href est également utilisé.
Download (Télécharger)
L’attribut « Download » indique au navigateur de télécharger la ressource liée au lieu de l’ouvrir. La balise devrait ressembler à ceci :
<a download="nomdufichier">
Il est important d'entrer le nom complet du fichier, incluant son extension. Par exemple, si le fichier est un PDF, le code devrait ressembler à ceci :
<a href="exemple.pdf" download="Exemple">
L’attribut de ce type de balise est le nom du fichier. Dans ce cas, « Exemple ».
Si aucun nom de fichier n'est spécifié, le nom de fichier original sera extrait du document.
Rel (relation)
L’attribut de balise « rel » spécifie la la nature de la relation entre la ressource courante et la ressource liée. La balise devrait ressembler au modèle suivant:
<a rel="value">
Ce type de balise doit se voir assigner une valeur. Les valeurs d’attributs « rel » les plus courantes sont les suivantes :
rel= "alternate" : Cette valeur sert à identifier la ressource liée comme étant une version alternative de la ressource actuelle
rel= "author" : Permet de fournir un lien vers l’auteur de la ressource à laquelle la balise est attribuée.
rel= “bookmark” : Indique que l’URL est permanente et peut être utilisée comme signet. Souvent utilisée dans les index de longs articles pour naviguer rapidement vers une section spécifique.
rel="help" : Cette valeur indique que le lien contient un document d’aide pour les utilisateurs de la page actuelle
rel="next" : Sert à spécifier qu'un lien mène vers la page suivante de la série. Sert notamment pour les articles, nouvelles, ou galeries de photos.
rel= "prev" : Valeur pour spécifier qu'un lien mène vers la page précédente de la série
rel= "nofollow" : Indiquer aux crawlers des moteurs de recherche de ne pas suivre le lien. Sert à indiquer que vous n'approuver et ne cautionner pas le lien
rel=“search” : Permet de spécifier la page liée. Pour ce faire, il est possible de rechercher du contenu sur la page ou l'ensemble du site
Par exemple, vous pouvez utiliser le code suivant pour indiquer que le lien est une page sur l’auteur de l’article:
Article rédigé par <a href="https://exemple.com/+NomAuteur"
rel="author">Nom de l’auteur</a>
Notez que les moteurs de recherche comme Google utilisent l’attribut « rel » pour obtenir plus d’informations sur un lien.
Target (Cible)
L’attribut « target » indique au navigateur où ouvrir le lien. La cible peut être le même onglet, un nouvel onglet, une nouvelle fenêtre, etc..
Une balise Target ressemble à ceci :
<a target="value">
Les différentes valeurs possibles des balises de cible incluent:
« _self » : Indique d'ouvrir le lien dans le même cadre (généralement le même onglet ou la même fenêtre)
« _blank » : Ouvre le lien dans un nouvel onglet ou une nouvelle fenêtre. Il s'agit de l’approche la plus courante à l'heure actuelle.
« _parent » : Indique au navigateur d'ouvrir le lien à l'intérieur du cadre de niveau supérieur suivant, appelé cadre parent
« top » : Cette valeur ignore toutes les images et ouvre le lien en tant que document supérieur_. Cela se fait dans la même fenêtre du navigateur
« framename » : Indique d'ouvrir le lien dans le cadre défini.
Par exemple, pour créer un lien s’ouvrant dans un nouvel onglet, la balise ressemblerait à ceci :
<a href="https://exemple.com" target="_blank">Site Web</a>
Mis à jour le : 18/05/2023
Merci !