Liens
La balise a permet de créer des liens hypertextes. Il s'agit d'une balise inline non orpheline (elle peut avoir du contenu).
Bonnes pratiques :
- Ne pas faire de lien Cliquer ici, mais exprimer avec précision ce que va ouvrir le lien Visiter Slamwiki 2.0
- Préciser le type de document associé s'il n'est pas en HTML
- Spécifier toujours un title, pour informer avant de cliquer
Exemple
Utilisation de la balise a :
<a href="https://www.google.com">Google</a>
La balise a peut avoir des enfants :
<a href="https://www.google.com">
<img src="/assets/img/google.png" alt="Google image"/>
<span>Google</span>
</a>
href
href permet de désigner la cible du lien.
Liens externes
Il doit spécifier une url complète, commençant par le protocole :
<a href="https://example.com">Website</a>
Liens internes
URL absolue
Une URL absolue fait référence à la racine du serveur Web et commence par / :
<a href="/index/home">Accueil</a>
URL relative
Une URL relative exprime la position de la ressource par rapport à l'emplacement actuel, elle commencera par ./, ou par un emplacement non précédé du / :
Ces 2 liens pointe vers le même document, si l'adresse actuelle est https://monsite.com/index
L'adresse du lien sera https://monsite.com/index/docs/home
<a href="docs/home">Documents</a> <a href="./docs/home">Documents</a>
Avec parcours
Il est possible d'effectuer un parcours pour exprimer une URL relative :
Si par exemple, il faut retourner au dossier parent pour atteindre le dossier docs :
<a href="../docs/home">Documents</a> <a href="./../docs/home">Documents</a>
Vers fragment
Il est possible d'utiliser un fragment, sur une URL interne, ou externe, qu'elle soit absolue ou relative, pour atteindre directement une partie du document marquée par un identifiant :
<a href="#contact">Contact</a>
<h2 id="contact">Pour nous contacter</h2>
Target
L'attribut target permet de spécifier la fenêtre qui sera la cible du lien :
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>
| _blank | Ouvre le lien dans un nouvel onglet |
|---|---|
| _self | Ouvre le lien dans la frame active (par défaut) |
| _parent | Ouvre le lien dans la frame parent |
| _top | Ouvre le lien vers le body de la fenêtre active |
| name | Ouvre le lien dans une cible nommée (déjà ouverte précédemment |
Assitance
Apporter des informations d'assistance en renseignant l'attribut title qui fait apparaître une infobulle au survol de la souris :
<a href="https://www.google.com" title="Aller vers Google">Google</a>
Download
Utiliser l'attribut download pour préciser qu'il s'agit d'un lien de téléchargement :
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" download="firefox-latest-64bit-installer.exe"> Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France) </a>
L'attribut download a un double intérêt :
- Celui de forcer le téléchargement, pour les types de fichiers qui auraient pu s'afficher dans le navigateur (pdf par exemple)
- De permettre de renommer côté client le fichier téléchargé
rel
Il permet de spécifier le lien qui lie votre site au destinataire du lien :
<a href="https://slamwiki2.kobject.net" rel="nofollow">Slamwiki 2.0</a>
| Valeur | Signification |
|---|---|
| nofollow | Indique aux moteurs de ne pas suivre ce lien pour le référencement. |
| alternate | Le lien pointe vers une version alternative de ce document. |
| ugc | Le lien a été produit par une action utilisateur (commentaire par exemple). |
tel et mailto
Il est possible de faire un lien vers une adresse mail :
Le préfix mailto: provoque l'ouverture du client de messagerie.
<a href="mailto:user@kobject.net">user@kobject.net</a>
Ou vers un numéro de téléphone :
Permet d'appeler directemetn le numéro, sur un support qui le supporte :
<a href="tel:0606060606">Appelez-moi</a>
jcheron