Liens HTML
Les liens naviguent vers d'autres pages ou vers une partie d'une page. Apprenez à créer des liens HTML avec la balise <a> : href, URL absolues et relatives, et cibles.
Les sites web contiennent différents types de liens qui vous emmènent directement vers d'autres pages ou vous permettent de naviguer vers une partie particulière de la page. Les liens en HTML sont appelés hyperliens. Ils sont définis à l'aide de la balise <a>.
Les hyperliens sont appliqués à une phrase, un mot, une image ou tout élément HTML.
La couleur par défaut des liens en HTML est :
- liens non visités : soulignés et bleus
- liens visités : soulignés et violets
- liens actifs : soulignés et rouges
Il s'agit du style par défaut des liens, mais vous pouvez supprimer le soulignement ou changer la couleur des liens à l'aide des styles CSS.
Syntaxe
La balise <a> vient par paires : l'ouverture <a> indique où le lien doit commencer et la fermeture </a> indique où le lien se termine.
Pour créer un hyperlien, vous devez utiliser la balise <a> et l'attribut href, dont la valeur est l'URL, ou l'emplacement, vers lequel le lien pointe.
Liens HTML
<a href="url">your text</a>.Exemple de la balise HTML <a> avec l'attribut href :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Link example</h2>
<a href="https://www.w3docs.com/">W3Docs.com</a>
</body>
</html>Dans l'exemple ci-dessus, nous avons utilisé <h2> pour définir un sous-titre et la balise <a> pour créer un lien. Entre les balises <a> et </a>, nous avons le texte W3Docs.com, que le navigateur affiche sous la forme d'un lien bleu souligné. En cliquant dessus, l'utilisateur est redirigé vers la page d'accueil de notre site.
Attribut Target
Pour ouvrir un lien dans une nouvelle page, vous devez ajouter target="_blank" à votre code. L'attribut target indique exactement où ouvrir la page liée. Avec target="_blank", la page liée s'ouvrira dans une nouvelle fenêtre ou dans un nouvel onglet.
Les valeurs les plus courantes pour target sont :
_self— ouvrir dans le même onglet (c'est la valeur par défaut, donc vous l'écrivez rarement)._blank— ouvrir dans un nouvel onglet ou une nouvelle fenêtre.
Liens HTML
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>Pourquoi rel="noopener noreferrer" est important
Remarquez rel="noopener noreferrer" sur le lien ci-dessus. Lorsque vous ouvrez un lien avec target="_blank", la nouvelle page peut normalement accéder à la page qui l'a ouverte via la propriété window.opener. Une page malveillante pourrait l'utiliser pour rediriger silencieusement votre onglet d'origine vers une page de hameçonnage — une attaque appelée reverse tabnabbing.
L'ajout de rel="noopener" coupe cette référence, de sorte que la nouvelle page ne peut pas toucher votre onglet. noreferrer fait la même chose et empêche également le navigateur d'envoyer l'en-tête Referer à la nouvelle page. En règle générale, ajoutez toujours rel="noopener noreferrer" chaque fois que vous créez un lien vers un site externe avec target="_blank".
Attribut ID
Pour naviguer vers une partie spécifique de la page, utilisez l'attribut id.
Voici comment procéder :
-
Utilisez l'attribut
idpour donner un nom à la partie de la page vers laquelle un utilisateur doit être redirigé après avoir cliqué sur le lien. La valeur de l'attribut peut être un mot ou une phrase qui décrit cette partie (si vous utilisez une phrase, il ne doit pas y avoir d'espaces — utilisez des underscores à la place.)
Ex.<h2 id="jump">Link example with id attribute</h2>. Nous avons utilisé l'attributidappelé "jump". -
Créez un hyperlien en utilisant l'
idde la cible du lien, précédé d'un dièse (#)
Ex.<a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.
Voyons maintenant à quoi cela ressemblera dans le code HTML. Dans l'exemple ci-dessous, faites défiler jusqu'au lien en bas, cliquez sur le lien et vous reviendrez en haut.
Exemple de la balise HTML <a> avec l'attribut id :
Exemple de lien avec un attribut id
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="jump">Link example with id attribute</h2>
<p>
Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
</p>
<p>
Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
</p>
<p>
Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
</p>
<p>
Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
</body>
</html>Vous pouvez également accéder à un id sur une page différente en ajoutant le fragment à la fin de l'URL de cette page. Par exemple, si la page about contient un élément avec id="contact", ce lien ouvre cette page et fait défiler directement jusqu'à lui :
<a href="/about#contact">Contact us</a>Comment appliquer un hyperlien à une image
Pour appliquer un hyperlien à une image, vous devez simplement mettre l'image dans la balise <a>. Cela se fait avec la balise <img>, qui doit posséder certains attributs obligatoires :
- src - la source de l'image
- alt - le texte alternatif de l'image
- width - la largeur de l'image
- height - la hauteur de l'image
Exemple des balises <a> et <img> pour appliquer un hyperlien à une image :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
</a>
</body>
</html>Les images HTML seront abordées en profondeur dans le prochain chapitre.
Titres de liens
L'attribut title est utilisé pour spécifier des informations supplémentaires sur un élément. Ces informations sont souvent affichées sous forme d'infobulle lorsque vous passez la souris sur l'élément.
Exemple de titres de liens :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Link Title Example</h1>
<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>The <span class="attribute">title</span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
</body>
</html>URL absolues et relatives
La valeur que vous placez dans href peut être l'un de deux types d'adresse. Connaître la différence est l'un des aspects les plus importants pour créer des liens correctement.
Une URL absolue est l'adresse web complète, incluant le protocole (https://) et le nom de domaine. Utilisez-la pour créer un lien vers une page sur un autre site web :
<a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a>Une URL relative pointe vers une page sur le même site web, décrite par rapport à l'emplacement de la page actuelle. Le navigateur complète le protocole et le domaine pour vous. Les URL relatives se présentent sous plusieurs formes :
<!-- Same folder as the current page -->
<a href="./contact.html">Contact</a>
<!-- One folder up, then into another folder -->
<a href="../images/logo.png">Logo</a>
<!-- Root-relative: starts at the site root, no matter where the current page is -->
<a href="/about">About us</a>Comment choisir :
- Un
/en début (un chemin root-relative comme/about) part toujours du sommet de votre site, de sorte que le même lien fonctionne sur toutes les pages. C'est généralement le choix le plus sûr pour la navigation à l'échelle du site. ./signifie "ce dossier" et../signifie "remonter d'un dossier". Ces chemins relatifs au document se cassent si vous déplacez ultérieurement la page dans un autre dossier, alors utilisez-les avec précaution.- Utilisez une URL absolue complète uniquement lorsque la cible se trouve sur un autre domaine.
Voir HTML URL pour un aperçu plus approfondi de la construction des URL.
Exemple de liens absolus et relatifs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>External and internal paths</h1>
<p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML (absolute)</a></p>
<p><a href="/about">About us (root-relative)</a></p>
</body>
</html>Liens e-mail et téléphone
La valeur de href ne se limite pas aux pages web. Avec des schémas d'URL spéciaux, vous pouvez ouvrir le client de messagerie de l'utilisateur ou, sur un téléphone, lancer un appel.
Un lien mailto: ouvre un nouvel e-mail adressé à l'adresse indiquée :
<a href="mailto:[email protected]">Email us</a>Un lien tel: permet aux utilisateurs mobiles d'appuyer pour composer un numéro de téléphone :
<a href="tel:+15551234567">Call us</a>Les attributs rel, download et hreflang
En plus de href, target et title, la balise <a> accepte plusieurs autres attributs utiles.
L'attribut rel décrit la relation entre la page actuelle et la page liée. Vous avez déjà vu rel="noopener noreferrer" pour la sécurité. Une autre valeur courante est rel="nofollow", qui indique aux moteurs de recherche de ne pas transmettre de crédit de classement au lien :
<a href="https://example.com" rel="nofollow">Sponsored link</a>L'attribut download indique au navigateur de télécharger la cible au lieu d'y naviguer. Vous pouvez lui donner une valeur pour suggérer un nom de fichier :
<a href="/files/report.pdf" download="annual-report.pdf">Download the report</a>L'attribut hreflang indique la langue du document lié. Il ne modifie pas le comportement pour les utilisateurs, mais il aide les navigateurs et les moteurs de recherche à comprendre la cible :
<a href="https://example.fr/" hreflang="fr">French version</a>Pour la liste complète des attributs supportés par la balise <a>, consultez la référence HTML <a> tag.
Accessibilité : rédigez un texte de lien descriptif
Les utilisateurs de lecteurs d'écran passent souvent d'un lien à l'autre en n'entendant que le texte du lien hors contexte. Des libellés vagues comme "cliquer ici" ou "en savoir plus" ne leur disent rien sur la destination du lien. Rédigez un texte de lien qui décrit la destination par lui-même :
<!-- Avoid: meaningless out of context -->
<p>To learn about our pricing, <a href="/pricing">click here</a>.</p>
<!-- Better: the link text describes the target -->
<p>See our <a href="/pricing">pricing plans</a>.</p>Gardez les mots significatifs à l'intérieur des balises <a>, assurez-vous que les liens sont visuellement distincts du texte environnant, et évitez d'utiliser l'URL brute comme texte de lien pour les liens importants.