Liens

Dans l'introduction aux attributs, nous avons montré 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 permettent de créer un lien hypertexte. Les liens sont le pilier d'Internet. La première page Web contenait 25 liens et indiquait : "Tout ce qui existe en ligne sur le W3 est lié directement ou indirectement à ce document." Il est fort probable que tout ce qui est disponible en ligne sur W3 soit également lié directement ou indirectement à partir de ce document.

La puissance du Web et de la balise <a> a considérablement augmenté 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 associations peuvent être créées par <a>, <area>, <form> et <link>. Vous avez découvert <link> et vous en apprendrez plus sur les formulaires dans une section distincte. Il existe également une section Form Learn complète. Dans cette session, vous allez découvrir le tag <a>, qui n'est pas si simple que ça.

Attribut href

Bien que l'attribut href ne soit pas obligatoire, il est présent dans presque toutes les balises <a>. C'est l'adresse du lien hypertexte qui transforme <a> en lien. L'attribut href permet de créer des liens hypertextes vers des emplacements de la page actuelle, d'autres pages d'un site ou d'autres sites. Il peut également être codé pour télécharger des fichiers ou envoyer un e-mail à une adresse spécifique, en incluant même un objet et un contenu suggéré pour le 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 au 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 sous la forme //, il s'agit d'un protocole implicite qui signifie "utiliser le même protocole que celui qui est actuellement utilisé".

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

Le deuxième lien n'est qu'un identifiant de fragment de lien et renvoie à l'élément avec id="teachers",, s'il y en a un, sur la page actuelle. Les navigateurs sont également compatibles avec deux liens "en haut de la page" : cliquer sur <a href="#top">Top</a> (sans tenir compte de la casse) ou même sur <a href="#">Top</a> renvoie l'utilisateur en haut de la page, sauf si un élément avec l'ID top est défini avec la même casse.

Le MLW est un document assez long. Pour éviter de faire défiler la page, vous pouvez ajouter un lien vers le haut de la section #teachers depuis le bas :

<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, en l'occurrence la section #teachers de la page d'accueil de MLW. La page MLW se charge et le navigateur fait défiler la page jusqu'à la section "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 n'a pas besoin d'inclure une adresse e-mail, mais il peut le faire, ainsi que le texte cc, bcc, subject et body pour préremplir l'e-mail. Par défaut, un client de messagerie s'ouvre. Vous pouvez préremplir l'objet et le corps de l'e-mail sans adresse e-mail, pour permettre aux visiteurs du site d'inviter leurs propres amis. Dans notre lien, en bas de page du document, nous incluons l'URL de l'enregistrement :

<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 sur un lien tel, appuie dessus ou appuie sur la touche Entrée dépend du système d'exploitation, des applications installées et des paramètres de son appareil. Un iPhone peut ouvrir FaceTime, l'application Téléphone ou Contacts. Un bureau Windows peut ouvrir Skype, si l'application est installée.

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 (ceux diffusés via https), il est possible de créer et d'exécuter des protocoles spécifiques aux applications avec registerProtocolHandler().

Lorsque vous incluez des liens susceptibles d'ouvrir d'autres applications installées, il est préférable d'en informer l'utilisateur. Assurez-vous que le texte entre les balises d'ouverture et de fermeture indique à l'utilisateur le type de lien qu'il s'apprête à 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 "download" 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 que l'optimiseur crée. Lorsque hal.svg est optimisé, la balise d'ouverture du lien de téléchargement de SVGOMG ressemble à ceci :

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

Il existe également une démo 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'élément en tant que valeur de l'attribut href et un nom de fichier suggéré pour l'utilisateur en tant que 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). Les quatre mots clés insensibles à la casse et précédés d'un trait de soulignement ont été abordés avec l'élément <base>. Par exemple :

• (Par défaut) _self : ouvre le lien dans la fenêtre actuelle.
• _blank : ouvrir le lien dans un nouvel onglet.
• _parent : ouvre le lien dans l'objet parent ou l'iFrame.
• _top : ouvre le lien dans l'ancêtre le plus élevé. Cela est particulièrement utile si le lien est profondément imbriqué.

Si le lien n'est pas imbriqué, _top et _parent agissent de la même manière que _self. L'attribut target n'est pas limité à ces quatre termes clés : n'importe quel terme peut être utilisé.

Chaque contexte de navigation (ou chaque onglet de navigateur) possède un nom de contexte de navigation. Les liens peuvent s'ouvrir dans l'onglet actuel, dans un nouvel onglet sans nom, ou dans un nouvel onglet ou un onglet nommé 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 avec target="_blank" s'ouvre dans un nouvel onglet avec un nom nul, ce qui ouvre un nouvel onglet sans nom à chaque clic sur un lien. Cela peut créer de nombreux onglets. Trop d'onglets ouverts. Par exemple, si l'utilisateur clique sur <a href="registration.html" target="_blank">Register Now</a> 15 fois, le formulaire d'inscription s'ouvre dans 15 onglets distincts. Pour résoudre ce problème, vous devez fournir un nom de contexte d'onglet. En incluant l'attribut target avec une valeur sensible à la casse, telle que <a href="registration.html" target="reg">Register Now</a>, le premier clic ouvrira le formulaire d'inscription dans un nouvel onglet reg. Si vous cliquez 15 fois de plus sur ce lien, l'enregistrement sera rechargé dans le contexte de navigation reg, sans ouvrir d'onglets supplémentaires.

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

Le mot clé nofollow peut être inclus si vous ne souhaitez pas que les robots d'indexation suivent le lien. La valeur external peut être ajoutée pour indiquer que le lien redirige vers une URL externe et non vers 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 au lieu du pointeur normal. N'utilisez pas cette valeur uniquement pour obtenir le curseur d'aide. Utilisez plutôt la propriété CSS cursor. Les valeurs prev et next peuvent être utilisées sur les liens pointant 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 de flux RSS incluront également type="application/rss+xml" ou type="application/atom+xml, les formats alternatifs incluront l'attribut type et les traductions incluront l'attribut hreflang. Si le contenu 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 associé est différente, 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 fournit 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 française est un PDF, vous pouvez fournir l'attribut "type" avec le type MIME PDF de la ressource associée. Bien que le type MIME soit purement consultatif, il est toujours judicieux d'informer l'utilisateur qu'un lien ouvrira un document d'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>

Suivre les clics sur les liens

Une façon de suivre les interactions des utilisateurs consiste à envoyer un ping à une URL lorsqu'un lien est cliqué. L'attribut ping, s'il est présent, inclut une liste d'URL sécurisées (qui commencent par https) séparées par des espaces et qui doivent être notifiées ou pingées si l'utilisateur active le lien hypertexte. Le navigateur envoie des requêtes POST avec le corps PING aux URL listées comme 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, l'apparence de vos liens doit être suffisamment différente de celle du texte environnant pour que les utilisateurs puissent les identifier plus facilement. Utilisez plusieurs indicateurs visuels, comme une couleur et un soulignement. La couleur seule ne suffit pas.
• Incluez toujours des styles de sélection. Cela permet aux utilisateurs qui naviguent au clavier de savoir où ils se trouvent lorsqu'ils parcourent votre contenu à l'aide de la touche de tabulation.
• Le contenu entre la balise d'ouverture <a> et la balise de fermeture </a> correspond au 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. Le texte du lien et le texte alt doivent être plus descriptifs que "cliquez ici" ou "plus d'informations". Au lieu de cela, il doit fournir à l'utilisateur des informations sur la destination du lien lorsqu'il est activé. C'est essentiel pour les utilisateurs de lecteurs d'écran et les résultats des moteurs de recherche.
• N'incluez pas de contenu interactif, tel qu'un <button> ou un <input>, dans un lien. N'imbriquez pas non plus de lien dans un <button> ou un <label>. Bien que la page HTML s'affiche toujours, l'imbrication d'éléments cliquables et pouvant être sélectionnés au clavier dans des éléments interactifs nuit à l'expérience utilisateur.
• Si l'attribut href est présent, appuyer sur la touche Entrée lorsque l'élément <a> est sélectionné l'activera.
• Les liens ne se limitent pas au format HTML. L'élément a peut également être utilisé dans un SVG, 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 qui possèdent 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 porte sur les listes, que nous devons apprendre pour pouvoir créer des listes de liens, également appelées "navigation".

Vérifier que vous avez bien compris

Testez vos connaissances sur les liens.