La balise HTML <a>
La balise HTML <a> crée des hyperliens vers des pages, fichiers, sections et liens e-mail ou téléphone. Exemples target, rel et download.
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.
Les attributs "download", "media", "hreflang", "target", "rel" et "type" ne seront présents que si l'attribut "href" est présent.
Tant que vous ne définissez pas une autre cible, la page liée s'affiche dans la fenêtre de navigateur courante.
Syntaxe
La balise <a> fonctionne par paires. La destination du lien est définie avec l'attribut href sur la balise ouvrante, et le contenu cliquable (texte ou image) est écrit entre les balises ouvrante (<a>) et fermante (</a>).
<a href="https://www.w3docs.com/">Visit W3docs</a>Le texte "Visit W3docs" devient l'hyperlien cliquable, et un clic dessus navigue vers l'URL indiquée dans href.
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 dans 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 dièse (#).
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 :
Example of the HTML <a> Tag|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 :
<!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 courante).
L'attribut target peut prendre les valeurs suivantes :
_blank– ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet._self– ouvre le lien dans la fenêtre courante (valeur par défaut)._parent– ouvre le document dans le cadre parent._top– ouvre le document dans le corps entier de la fenêtre.
Exemple de la balise HTML <a> avec l'attribut target :
Example of the HTML <a> Tag with a target attribute|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
Sécurité avec target="_blank" : rel="noopener noreferrer"
Lorsque vous ouvrez un lien dans un nouvel onglet avec target="_blank", la page nouvellement ouverte peut, dans les navigateurs anciens, accéder à votre page via la propriété JavaScript window.opener. Une page malveillante pourrait l'utiliser pour rediriger votre onglet d'origine vers un site de phishing — une attaque connue sous le nom de reverse tabnabbing.
Pour l'éviter, ajoutez rel="noopener noreferrer" :
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
External site
</a>noopener– définitwindow.openerànulldans le nouvel onglet, empêchant la page de destination de contrôler ou de référencer la page qui l'a ouverte.noreferrer– fait la même chose quenoopeneret empêche également le navigateur d'envoyer l'en-têteReferer, de sorte que la destination ne sache pas quelle page le visiteur consultait.
Les navigateurs modernes appliquent désormais noopener automatiquement pour tout lien target="_blank", mais il est recommandé de définir rel explicitement afin que la protection s'applique aussi dans les navigateurs plus anciens et soit visible dans votre code.
L'attribut rel
Cet attribut définit la relation du document courant avec le document lié. Les valeurs possibles de l'attribut sont 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 favoris.nofollow– lien vers un document non approuvé (cela indique aux moteurs de recherche que le robot d'exploration ne doit pas suivre ce lien).noopener/noreferrer– valeurs de sécurité utilisées avectarget="_blank"(voir ci-dessus).
La valeur nofollow
Si vous souhaitez créer un lien nofollow, utilisez rel="nofollow". Cela informe les moteurs de recherche que vous ne cautionnez pas le contenu à l'autre bout 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 il s'agit en réalité d'une valeur de l'attribut rel.
Exemple de l'attribut rel avec la valeur "nofollow" :
Example of the "rel" attribute with the "nofollow" value:
<!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>L'attribut download
L'attribut download indique au navigateur de télécharger la ressource liée au lieu d'y naviguer. Il fonctionne pour les ressources servies depuis la même origine (ainsi que pour les URL blob: et data:).
Si vous donnez une valeur à l'attribut, cette valeur devient le nom de fichier suggéré pour le fichier enregistré, quelle que soit la dénomination du fichier sur le serveur. Si vous le laissez vide, le navigateur conserve le nom de fichier d'origine.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Saves the file using its original name -->
<a href="/files/report.pdf" download>Download the report</a>
<!-- Saves the same file as "annual-report.pdf" -->
<a href="/files/report.pdf" download="annual-report.pdf">
Download the annual report
</a>
</body>
</html>Liens e-mail et téléphone : mailto: et tel:
En dehors des URL classiques, l'attribut href peut contenir des schémas spéciaux qui ouvrent le client de messagerie ou l'application téléphonique du visiteur au lieu d'une page web.
Un lien mailto: ouvre le client de messagerie par défaut avec l'adresse pré-remplie. Vous pouvez également ajouter un objet et un corps de message via des paramètres de requête :
<a href="mailto:[email protected]">Email us</a>
<a href="mailto:[email protected]?subject=Hello&body=I%20have%20a%20question">
Email us about your question
</a>Un lien tel: invite l'appareil à composer le numéro, ce qui est particulièrement utile sur les téléphones mobiles :
<a href="tel:+1234567890">Call us: +1 (234) 567-890</a>Lien vers une section de la même page (fragments)
Pour accéder directement à une partie d'une page, définissez href avec un dièse (#) suivi de l'id de l'élément cible. On appelle cela un lien de fragment ou lien d'ancre.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- The link -->
<a href="#section2">Go to Section 2</a>
<h2 id="section1">Section 1</h2>
<p>First section content...</p>
<!-- The target: its id matches the href without the # -->
<h2 id="section2">Section 2</h2>
<p>Second section content...</p>
</body>
</html>Cliquer sur le lien fait défiler la page jusqu'à l'élément dont l'id correspond à la valeur après le #. Vous pouvez également créer un lien vers une section d'une autre page en combinant une URL et un fragment, par exemple href="page.html#section2". Pour en savoir plus sur la construction des adresses de lien, consultez HTML URL.
L'attribut hreflang
L'attribut hreflang indique la langue du document vers lequel pointe le lien (par exemple hreflang="es" pour une page en espagnol). Il est purement informatif — utilisé par les moteurs de recherche et les technologies d'assistance — et ne modifie pas la page courante. Cela diffère de l'attribut global lang, qui déclare la langue de l'élément sur lequel il est placé.
<a href="https://es.example.com/" hreflang="es">Versión en español</a>Accessibilité : rédiger un texte de lien descriptif
Les utilisateurs de lecteurs d'écran naviguent souvent de lien en lien, n'entendant que le texte du lien hors contexte. Un texte générique tel que "cliquez ici" ou "en savoir plus" ne leur indique rien sur la destination. Faites toujours en sorte que le texte du lien décrive la destination.
<!-- Avoid -->
<p>To read our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text is meaningful on its own -->
<p>Read about <a href="/pricing">our pricing plans</a>.</p>Consultez HTML Links pour en savoir plus sur les bonnes pratiques de création de liens.
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| charset | char_encoding | Définit le jeu de caractères d'un document lié. Non utilisé en HTML5. |
| coords | coordinates | Définit les coordonnées d'un lien. Non utilisé en HTML5. |
| download | filename | Indique que la cible sera téléchargée lorsque l'hyperlien est cliqué. |
| href | URL | Définit l'URL du document lié. |
| hreflang | language_code | Définit la langue du document lié. |
| media | media_query | Définit le type de média/appareil pour lequel le document lié est optimisé. |
| name | section_name | Définit le nom d'une ancre. Non utilisé en HTML5. |
| ping | list_of_URLs | Définit une liste d'URL séparées par des espaces auxquelles, lorsque le lien est suivi, des requêtes POST avec le corps ping seront envoyées par le navigateur (en arrière-plan). Généralement utilisé pour le suivi. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Définit la relation entre l'objet cible et le document lié. |
| rev | text | Définit un lien inverse, la relation opposée de l'attribut "rel". Non utilisé en HTML5. |
| shape | default rect circle poly | Définit la forme de l'hyperlien. Non utilisé en HTML5. |
| target | _blank _parent _self _top | Définit où ouvrir le document lié. |
| type | media_type | Définit le type de média sous la forme d'un type MIME pour l'URL liée. |
La balise <a> prend également en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <a>
Les liens ont quatre états que vous pouvez styliser séparément avec des pseudo-classes CSS. Pour fonctionner correctement, ils doivent être écrits dans cet ordre : :link, :visited, :hover, :active (mémorisez-le avec "LoVe HAte").
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a:link { color: #1a73e8; } /* unvisited link */
a:visited { color: #6f42c1; } /* visited link */
a:hover { text-decoration: none; } /* on mouse-over */
a:active { color: #d93025; } /* on click */
</style>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Vous pouvez également supprimer le soulignement ou changer la couleur des liens avec CSS.