Balise HTML <a>
La balise <a> est utilisée pour insérer des hyperliens vers d’autres pages, des fichiers, des emplacements dans la même page, des adresses e-mail ou toute autre URL. Vous pouvez utiliser du texte ou une image comme hyperlien.
Dans le navigateur, les hyperliens diffèrent par leur apparence et leur couleur. Par défaut, les liens HTML apparaissent comme du texte bleu souligné. Lorsque vous survolez un lien avec la souris, il devient rouge (lien actif). Les liens déjà cliqués (liens visités) deviennent violets.
Vous pouvez modifier la couleur des liens, supprimer le soulignement ou changer la couleur des liens à l’aide des styles CSS.
TIP
Les attributs "download", "media", "hreflang", "target", "rel" et "type" ne seront présents que si l’attribut "href" est présent.
TIP
Jusqu’à ce que vous définissiez une autre cible, une page liée s’affiche dans la fenêtre actuelle du navigateur.
Syntaxe
La balise <a> se présente par paires. Le contenu est écrit entre la balise ouvrante (<a>) et la balise fermante (</a>).
Attributs
La balise <a> peut avoir des attributs qui fournissent des informations supplémentaires à son sujet.
L’attribut href
L’attribut href est un attribut obligatoire de la balise <a>. Il définit un lien sur la page web ou un emplacement sur la même page web, vers lequel l’utilisateur est redirigé après avoir cliqué sur le lien. La valeur de l’attribut est soit une ancre, soit une URL. L’ancre pointe vers l’ID (identifiant unique) de la partie de la page web référencée. Avant l’ID, on place un croisillon (#).
Cela ressemble à ceci :
Balise HTML <a>
<a href="url">the link text</a>
<a href="#a">the link text</a>Exemple de la balise HTML <a> avec l’attribut href :
Exemple de la balise HTML <a>|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Résultat
Cliquez sur le lien, et vous serez redirigé vers la page d’accueil de notre site web.
En utilisant l’attribut href de la balise <a> avec la balise <img>, vous pouvez créer une image cliquable.
Exemple de la balise HTML <a> pour créer une image cliquable :
Exemple de la balise HTML <a> pour créer une image cliquable :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
height: 90vh;
}
</style>
</head>
<body>
<a href="https://en.wikipedia.org/wiki/France">
<img src="https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="France" />
</a>
</body>
</html>L’attribut target
L’attribut target est utilisé pour indiquer au navigateur où ouvrir le document (par défaut, les liens s’ouvrent dans la fenêtre actuelle).
L’attribut target peut prendre les valeurs suivantes :
- _blank– ouvre le lien dans une nouvelle fenêtre.
- _self-ouvre le lien dans la fenêtre actuelle.
- _parent - ouvre le document dans le cadre parent.
- _top - ouvre le document sur toute la largeur de la fenêtre.
Exemple de la balise HTML <a> avec l’attribut target :
Exemple de la balise HTML <a> avec un attribut target|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Résultat
L’attribut rel
Cet attribut définit la relation du document actuel avec le document lié. Les valeurs de l’attribut peuvent être les suivantes :
- alternate - une version alternative du document.
- author- référence à l’auteur du document ou de l’article.
- bookmark - un lien permanent à utiliser pour les signets.
- nofollow - liens vers un document non approuvé (cela indique aux moteurs de recherche que le robot d’exploration ne doit pas suivre ce lien).
Valeur nofollow
Si vous souhaitez créer un lien nofollow, utilisez rel="nofollow". Cela informe les moteurs de recherche que vous ne soutenez pas le contenu à l’autre extrémité du lien. La valeur d’attribut nofollow est généralement utilisée pour les liens payants et la publicité. Parfois, nofollow est considéré comme une balise ou un attribut, mais en réalité, c’est une valeur de l’attribut rel.
Exemple de l’attribut rel avec la valeur "nofollow" :
Exemple de l’attribut "rel" avec la valeur "nofollow" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p>This text is from <a href="https://www.lipsum.com/" rel="nofollow" target="_blank">Lorem Ipsum</a>.</p>
</body>
</html>Attributs
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | Defines the character-set of a linked document. Not used in HTML5. |
| coords | coordinates | Defines the coordinates of a link. Not used in HTML5. |
| download | filename | Defines that the target will be downloaded when a hyperlink is clicked. |
| href | URL | Defines the URL of the linked document. |
| hreflang | language_code | Defines the language of the linked document. |
| media | media_query | Defines what media/device the linked document is optimized for. |
| name | section_name | Defines the name of an anchor. Not used in HTML5. |
| ping | list_of_URLs | Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Defines the relationship between the target object and the linked document. |
| rev | text | Defines a reverse link, the inverse relationship of the "rel" attribute. Not used in HTML5. |
| shape | default rect circle poly | Defines the shape of the hyperlink. Not used in HTML5. |
| target | _blank _parent _self _top | Defines where to open the linked document. |
| type | media_type | Defines the media type in the form of a MIME- type for the linked URL. |
La balise <a> prend également en charge les attributs globaux et les attributs d’événement.
Comment styliser une balise HTML <a>
{
"tag_name": "a"
}Practice
What are the features and uses of the HTML <a> tag?