Liens

Dans l'introduction de la section "Attributs", vous avez vu un exemple montrant comment les attributs sont ajoutés à la balise d'ouverture. L'exemple utilisait la balise <a>, mais ni l'élément, ni les attributs spécifiques introduits dans cet exemple n'ont été abordés:

La balise d'ancrage <a> et l'attribut href créent un lien hypertexte. Les liens sont la colonne vertébrale d'Internet. La première page Web contenait 25 liens, indiquant "Tout ce qui existe en ligne concernant W3 est directement ou indirectement associé à ce document". Il est très probable que tout ce qu’il y a en ligne à propos de W3 est également lié directement ou indirectement à ce document !

La puissance du Web et la balise <a> se sont considérablement développées depuis que Tim Berners-Lee a publié cette première explication en août 1991. Les liens représentent une connexion entre deux ressources, dont l'une est le document actuel. Les liens peuvent être créés par <a>, <area>, <form> et <link>. Vous connaissez maintenant la méthode <link>. Vous allez découvrir les formulaires dans une section distincte. Il existe également une section d'apprentissage du formulaire. Au cours de cette session, vous allez découvrir la balise <a> composée d'une seule lettre, mais pas si simple.

Attribut href

Bien que cela ne soit pas obligatoire, l'attribut href figure dans presque toutes les balises <a>. L'adresse du lien hypertexte permet de transformer <a> en lien. L'attribut href permet de créer des liens hypertextes vers des emplacements de la page active, d'autres pages d'un site ou d'autres sites. Il peut également être codé pour télécharger des fichiers ou pour envoyer un e-mail à une adresse spécifique, y compris en incluant un objet et une suggestion de contenu du corps de l'e-mail.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

Le premier lien inclut une URL absolue, qui peut être utilisée sur n'importe quel site dans le monde pour accéder à la page d'accueil de MLW. Les URL absolues incluent un protocole (dans ce cas, https://) et un nom de domaine. Lorsque le protocole est écrit simplement sous la forme //, il s'agit d'un protocole implicite qui signifie "utiliser le même protocole que celui actuellement utilisé".

Les URL relatives n'incluent pas de protocole ni de nom de domaine. Elles sont "relatives" au fichier actuel. MLW est un site composé d'une seule page, mais cette série HTML comporte plusieurs sections. Une URL relative est utilisée <a href="../attributes/">Attributes</a> pour rediriger les utilisateurs de cette page vers la leçon sur les attributs.

Le deuxième lien n'est qu'un identifiant de fragment de lien. Il renvoie vers l'élément avec id="teachers",, le cas échéant, sur la page actuelle. Les navigateurs acceptent également deux liens de haut de page: si vous cliquez sur <a href="#top">Top</a> (non sensible à la casse) ou simplement sur <a href="#">Top</a>, l'utilisateur est fait défiler jusqu'en haut de la page, sauf si un élément dont l'ID top est défini dans la même casse.

MLW est un document assez long. Pour éviter d'avoir à faire défiler la page, vous pouvez ajouter un lien de retour en haut de la section #enseignants:

<a href="#top">Go to top.</a>

Le troisième lien combine les deux valeurs: il contient une URL absolue suivie d'un fragment de lien. Cela permet de créer un lien direct vers une section de l'URL définie (dans ce cas, la section #teachers de la page d'accueil de MLW). La page MLW est chargée, puis le navigateur fait défiler jusqu'à la section des enseignants sans envoyer le fragment dans la requête HTTP.

L'attribut href peut commencer par mailto: ou tel: pour envoyer des e-mails ou passer des appels. Le traitement du lien dépend de l'appareil, du système d'exploitation et des applications installées.

Le lien mailto ne doit pas nécessairement inclure d'adresse e-mail, mais il peut être prérempli avec du texte cc, bcc, subject et body pour préremplir l'e-mail. Par défaut, un client de messagerie est ouvert. Vous pouvez préremplir l'objet et le corps de l'e-mail sans indiquer d'adresse e-mail pour permettre aux visiteurs du site d'inviter leurs propres amis. Dans notre lien, nous incluons l'URL de l'enregistrement dans le pied de page du document:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Le point d'interrogation (?) sépare le mailto: et l'adresse e-mail, le cas échéant, du terme de requête. Dans la requête, les esperluettes (&) séparent les champs et les signes égal (=) associent chaque nom de champ à sa valeur. La chaîne entière est encodée en pourcentage, ce qui est absolument nécessaire si la valeur href n'est pas entre guillemets ou si les valeurs incluent des guillemets.

L'application qui s'ouvre lorsque l'utilisateur clique ou appuie sur un lien tel ou appuie sur la touche Entrée dépend du système d'exploitation, des applications installées et des paramètres de l'appareil. Un iPhone peut ouvrir FaceTime, l'application Téléphone ou les contacts. Un bureau Windows peut ouvrir Skype, s’il est installé.

Il existe plusieurs autres types d'URL, tels que les blobs et les URL de données (voir les exemples dans la discussion sur l'attribut download). Pour les sites sécurisés (diffusés sur https), il est possible de créer et d'exécuter des protocoles spécifiques à une application avec registerProtocolHandler().

Lorsque vous insérez des liens susceptibles d'ouvrir d'autres applications installées, nous vous recommandons d'en informer l'utilisateur. Assurez-vous que le texte situé entre les balises d'ouverture et de fermeture indique à l'utilisateur le type de lien qu'il est sur le point d'activer. Les sélecteurs d'attributs CSS, tels que [href^="mailto:"], [href^="tel:"] et [href$=".pdf"], peuvent être utilisés pour cibler des styles par type d'application.

Ressources téléchargeables

L'attribut download doit être inclus lorsque href pointe vers une ressource téléchargeable. La valeur de l'attribut de téléchargement correspond au nom de fichier suggéré pour la ressource à enregistrer dans le système de fichiers local de l'utilisateur. SVGOMG, l'optimiseur SVG, utilise l'attribut download pour suggérer un nom de fichier pour le blob téléchargeable créé par l'optimiseur. Lorsque hal.svg est optimisé, la balise d'ouverture du lien de téléchargement de SVGOMG se présente comme suit:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Il existe également une démonstration de <canvas> qui crée une URL de données PNG téléchargeable.

Pour créer un lien vers une ressource téléchargeable, incluez l'URL de l'asset en tant que valeur de l'attribut href et le nom de fichier suggéré qui peut être utilisé dans le système de fichiers de l'utilisateur comme valeur de l'attribut download.

Contexte de navigation

L'attribut target permet de définir le contexte de navigation pour la navigation par lien (et l'envoi de formulaire). Nous avons discuté des quatre mots clés non sensibles à la casse précédés d'un trait de soulignement avec l'élément <base>. Elles incluent la valeur par défaut _self, qui est la fenêtre actuelle, _blank, qui ouvre le lien dans un nouvel onglet, _parent, qui est le parent si le lien actuel est imbriqué dans un objet ou un iFrame, et _top, qui est l'ancêtre de niveau supérieur, particulièrement utile si le lien actuel est profondément imbriqué. _top et _parent sont identiques à _self si le lien n'est pas imbriqué. L'attribut target ne se limite pas à ces quatre termes clés: n'importe quel terme peut être utilisé.

Chaque contexte de navigation (c'est-à-dire chaque onglet de navigateur) est associé à un nom de contexte de navigation. Les liens peuvent ouvrir des liens dans l'onglet actuel, dans un nouvel onglet sans nom, ou dans un onglet nommé nouveau ou existant. Par défaut, le nom est une chaîne vide. Pour ouvrir un lien dans un nouvel onglet, l'utilisateur peut effectuer un clic droit et sélectionner "Ouvrir dans un nouvel onglet". Les développeurs peuvent forcer cette opération en incluant target="_blank".

Un lien contenant target="_blank" s'ouvre dans un nouvel onglet sans nom, et s'ouvre dans un nouvel onglet sans nom à chaque clic sur un lien. Cela peut créer de nombreux onglets. Trop d'onglets. Par exemple, si l'utilisateur clique 15 fois sur <a href="registration.html" target="_blank">Register Now</a>, le formulaire d'inscription sera ouvert dans 15 onglets distincts. Pour résoudre ce problème, indiquez un nom de contexte d'onglet. Si vous incluez l'attribut target avec une valeur sensible à la casse (telle que <a href="registration.html" target="reg">Register Now</a>), le premier clic sur ce lien ouvre le formulaire d'inscription dans un nouvel onglet reg. Si vous cliquez 15 fois de plus sur ce lien, l'inscription sera actualisée dans le contexte de navigation de reg, sans ouvrir d'autres onglets.

L'attribut rel contrôle les types de liens créés par le lien, définissant la relation entre le document actuel et la ressource liée dans le lien hypertexte. La valeur de l'attribut doit être une liste d'éléments séparés par des espaces appartenant à une ou plusieurs des valeurs de score des attributs rel compatibles avec la balise <a>.

Vous pouvez inclure le mot clé nofollow si vous ne souhaitez pas que les robots suivent le lien. La valeur external peut être ajoutée pour indiquer que le lien redirige vers une URL externe et ne correspond pas à une page du domaine actuel. Le mot clé help indique que le lien hypertexte fournira une aide contextuelle. Si vous pointez sur un lien avec cette valeur rel, un curseur d'aide s'affiche à la place du curseur normal. N'utilisez pas cette valeur uniquement pour obtenir le curseur d'aide. Utilisez plutôt la propriété cursor CSS. Les valeurs prev et next peuvent être utilisées sur les liens renvoyant vers le document précédent et le document suivant d'une série.

Comme pour <link rel="alternative">, la signification de <a rel="alternative"> dépend d'autres attributs. Les alternatives au flux RSS incluent également type="application/rss+xml" ou type="application/atom+xml, les autres formats incluent l'attribut type et les traductions incluent l'attribut hreflang. Si le contenu situé entre les balises d'ouverture et de fermeture est dans une langue autre que celle du document principal, incluez l'attribut lang. Si la langue du document sous forme de lien hypertexte est dans une autre langue, incluez l'attribut hreflang.

Dans cet exemple, nous incluons l'URL de la page traduite en tant que valeur de href, rel="alternate" pour indiquer qu'il s'agit d'une version alternative d'un site. L'attribut hreflang indique la langue des traductions:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Si la traduction en français est un PDF, vous pouvez fournir l'attribut type avec le type MIME du format PDF de la ressource associée. Bien que le type MIME soit purement informatif, il est toujours judicieux d'informer l'utilisateur qu'un lien ouvrira un document dans un format différent.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Suivi des clics sur les liens

Pour suivre les interactions des utilisateurs, vous pouvez pinguer une URL lorsqu'un utilisateur clique sur un lien. L'attribut ping, s'il est présent, inclut une liste d'URL sécurisées séparées par des espaces (commençant par https) qui doivent être notifiées ou pinguées si l'utilisateur active le lien hypertexte. Le navigateur envoie des requêtes POST avec le corps PING aux URL listées en tant que valeur de l'attribut ping.

Conseils sur l'expérience utilisateur

• Tenez toujours compte de l'expérience utilisateur lorsque vous écrivez du code HTML. Les liens doivent fournir suffisamment d'informations sur la ressource associée pour que l'utilisateur sache sur quoi il clique.
• Dans un bloc de texte, assurez-vous que l'apparence de vos liens diffère suffisamment du texte qui l'entoure pour que les utilisateurs puissent facilement les identifier dans le reste du contenu. Assurez-vous que la couleur seule n'est pas le seul moyen de différencier le texte du contenu qui l'entoure.
• Incluez toujours des styles de focus. Cela permet aux navigateurs au clavier de savoir où ils se trouvent lorsqu'ils parcourent votre contenu avec la touche de tabulation.
• Le contenu situé entre l'<a> d'ouverture et l'</a> de fermeture est le nom accessible par défaut du lien. Il doit informer l'utilisateur de la destination ou de l'objectif du lien. Si le contenu d'un lien est une image, la description alt correspond au nom accessible. Que le nom accessible provienne de l'attribut alt ou d'un sous-ensemble de mots dans un bloc de texte, assurez-vous qu'il fournit des informations sur la destination du lien. Le texte du lien doit être plus descriptif que "cliquez ici" ou "plus d'informations". Ceci est important pour les utilisateurs de lecteurs d'écran et les résultats de votre moteur de recherche !
• N'incluez pas de contenu interactif, tel que <button> ou <input>, dans un lien. N'imbriquez pas non plus de lien dans un élément <button> ou <label>. Bien que la page HTML s'affiche toujours, l'imbrication d'éléments sélectionnables et cliquables dans des éléments interactifs nuit à l'expérience utilisateur.
• Si l'attribut href est présent, appuyez sur la touche Entrée lorsque vous sélectionnez l'élément <a> pour l'activer.
• Les liens ne se limitent pas au langage HTML. L'élément a peut également être utilisé dans un SVG, en formant un lien avec les attributs "href" ou "xlink:href".

Liens et JavaScript

L'attribut links renvoie un HTMLCollection correspondant aux éléments a et area ayant un attribut href.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

Dans cette section, vous avez tout appris sur les liens. La section suivante traite des listes, que nous devons apprendre pour pouvoir les regrouper pour créer des listes de liens (également appelée navigation).

Testez vos connaissances

Testez vos connaissances sur les liens.