Les liens hypertextes
- Episode N° 9
- Difficulté facile
- Publié le 29/04/2020 par Ronan HELLO
- Dernière mise à jour le 21/12/2023
Dans ce chapitre nous allons voir comment manipuler les liens. Ces balises sont à la base de toute navigation sur internet. Nous ne faisons que de passer de liens en liens pour naviguer entre les sites sur cette géante toile, et si vous êtes sur mon site aujourd'hui, c’est grâce aux liens que vous avez suivi pour atterrir jusqu’ici !
La balise <a>
Pour créer un lien, rien de plus simple, et pourtant un chapitre entier leur est consacré. Il vous suffit de créer une balise <a>, d’y insérer entre l’ouverture et la fermeture, le texte ou l’élément que vous souhaitez rendre cliquable. Il suffit ensuite d’ajouter l’adresse à laquelle on souhaite rediriger l’utilisateur dans un attribut href comme ceci :
<a href="https://ronan-hello.fr">Un super site de formation</a>
L’attribut href
La balise <a> peut avoir différents comportements, notamment en fonction de ce que l’attribut href a pour valeur. Vous pouvez renseigner l’attribut href avec des URLs absolue, c’est à dire des URLs contenant le protocole (https://) et le nom de domaine (ronan-hello.fr). En utilisant des URLs absolue, vous permettez de naviguer entre les pages de votre site, mais également sur d’autres sites internet. C’est le format qu’il faudra privilégier lors de la construction de vos liens.
L’attribut href peut également être renseigné à l’aide d’URLs relative, c’est à dire sans protocole et sans domaine, une URL directe vers un dossier ou un fichier de votre serveur. Par exemple :
<a href="contact.html">Contactez-moi</a>
Ce lien redirigera vers la page “Contact” du site sur lequel le lien est cliqué. Les URLs relatives permettent de naviguer uniquement au sein d’un même site internet. Pour les exercices que nous allons réaliser, nous devrons utiliser des URL relatives, et cela est dû au fait que nous ne possédons pas encore de serveur pour héberger nos fichiers afin de les rendre disponibles au monde entier.
Les ancres
Depuis le début nous parlons de lien permettant de changer de page, que ce soit sur notre site ou ailleurs, mais qu’en est-il de la navigation interne à la page ? Comment scroller au bon endroit d’une page en cliquant sur un lien ? Avec une ancre bien sûr !
Pour mettre en place une ancre, il faut ajouter un attribut id sur l’élément à atteindre au scroll, et copier la valeur de cet attribut id préfixé d’un # dans l’attribut href du lien, comme ceci :
<a href="#footer">Scroller jusqu’au footer</a>
Ce lien ne fonctionnera que si sur la page il y’a une balise avec un attribut id qui a pour valeur footer, comme ceci:
<footer id="footer">Le footer de mon site</footer>
Les ancres sont très pratiques pour des sites mono-page, ou pour cibler un élément précis dans la page à l’aide d’un bouton d’appel à l’action (CTA pour Call To Action).
L’attribut target
Plus haut nous parlions de liens sortants, vous avez probablement déjà remarqué que parfois certains liens s’ouvrent sur la même page, et parfois, dans un nouvel onglet ou même une nouvelle fenêtre ?
Il est possible d’effectuer ce genre de comportement à l’aide de l’attribut target, si vous y mettez la valeur _blank, automatiquement, le lien cliqué s’ouvrira dans un nouvel onglet. Pratique non ? (Attention tout de même, pour des raisons de sécurité il faudra ajouter un attribut rel, nous verrons tout cela plus bas).
Mais il ne faut surtout pas limiter le rôle de l’attribut target à cette simple fonctionnalité. L’attribut target peut prendre plusieurs valeurs comme:
_blank: La page s’ouvrira dans un nouvel onglet (oui je le remets pour faire une liste complète)_self: La page s’ouvrira dans la même fenêtre (Le lien s’ouvre dans le même<iframe>ou<frame>)_parent: La page s’ouvrira dans la fenêtre parente (Dans le cas d’une balise<iframe>ou<frame>)_top: La page s’ouvrira dans la fenêtre ou la frame est active (Dans le cas d’une balise<iframe>ou<frame>toujours)
Honnêtement, comme la balise <iframe> ne sert que dans certains cas spéciaux comme des chats conversationnels, des outils de supports ou des vidéos, ces attributs (à l’exception de _blank) sont très rarement utilisés, surtout lorsque vous débutez.
L’attribut rel
L’attribut rel placé sur une balise <a> indique le type de relation souhaité entre la page qui comporte le lien et la page de destination. Cet attribut peut prendre plusieurs valeurs différentes comme décrit ici :
nofollow: vous n’approuvez pas forcément le contenu de la destination du lienalternate: le lien redirige vers une version alternative de la page actuelle (la même page dans une autre langue par exemple).ugc: le lien a été généré par un utilisateur (typiquement dans un commentaire)sponsored: le lien a été acheté et vous souhaitez en informer les moteurs de recherche.
Bien entendu il existe encore une fois beaucoup plus de valeurs possible, je vous laisserai aller lire la documentation. L’idée est plutôt de vous lister ceux dont vous aurez besoin pour débuter et être autonome dans la création de liens (même si je doute que vous allez avoir des liens sponsorisé tout de suite).
L’attribut download
Nous n’avons pas encore parlé du téléchargement sur internet et pourtant, c’est encore une des fonctionnalité de notre balise <a>. Premièrement, si vous souhaitez que votre navigateur télécharge un contenu, il suffit de mettre dans l’attribut href de votre balise, une URL que votre navigateur habituel ne peut pas interpréter (comme par exemple une url qui finit par .docx ou .zip. Lorsque le navigateur rencontre ce genre d’extension dans l’URL, il télécharge automatiquement la ressource ciblée.
Vous me direz, jusque-là, c’est logique. Mais alors pourquoi ajouter un attribut download si le téléchargement se fait automatiquement par le navigateur avec une URL renseigné dans l’attribut href ?
Deux réponses, premièrement, si vous utilisez l’attribut comme un attribut booléen (sans valeur, comme ci-dessous)
<a href="downloads/presentation.pdf" download>Mon fichier PDF</a>
Cela forcera le téléchargement quoi qu’il arrive, même si le navigateur peut prendre en charge la ressource, comme par exemple les fichiers PDF.
Mais si vous donnez une valeur à l’attribut download comme ici, le fichier téléchargé sera automatiquement renommé, c’est assez utile pour dater automatiquement un téléchargement par exemple. (Cette fonction de date automatique nécessite l’ajout d’un autre langage de programmation).
<a href="downloads/presentation.pdf" download="compte_rendu">Mon fichier PDF<a>
Le fichier télécharger s'appellera donc “compt_rendu.pdf” et non “presentation.pdf”, pratique non ? C’est assez utile pour conserver des nom à des fins d’organisation coté serveur et des noms user friendly côté navigateur, on optimisera alors l'expérience utilisateur.
Les attributs mailto: et tel:
Là encore, on va pousser les fonctionnalités des liens en se servant du navigateur. Vous avez probablement déjà vu que lorsque l’on clique sur une adresse email, automatiquement votre client mail s’ouvre, prêt à envoyer un email ? Eh bien figurez-vous que ce n’est pas si automatique que ça en a l’air.
Pour arriver à ce résultat, il faudra ajouter un préfixe mailto: dans l’attribut href de notre balise <a> comme dans l’exemple suivant :
<a href="mailto:contact@ronan-hello.fr">contact@ronan-hello.fr</a>
Vous pouvez bien entendu, mettre le texte cliquable que vous souhaitez, vous n’êtes pas obligés de mettre une adresse email, vous pouvez mettre un texte du type “Contactez-nous par email”.
Et pour les appels alors ? Et bien c’est exactement la même logique, si vous souhaitez automatiquement lancer un appel au clic sur un numéro de téléphone, il faudra ajouter le préfixe tel: comme ceci:
<a href="tel:0606060606">Appelez-moi</a>
Je pense que nous avons fait un tour relativement complet pour être à l’aise avec les liens, j'espère que vous avez bien pris le temps de tester l’ensemble des configurations possibles mentionnées plus haut. C’est en faisant qu’on apprend le mieux, aucun doute là-dessus.
Je le redis ici, n’hésitez pas à consulter la documentation, les liens sont très simples à manipuler, mais ont un large choix de réglages possible permettant de subvenir à beaucoup de cas de figure différents.
Vous devez être connecté pour pouvoir commenter. Se connecter