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>