Ceci est une ancienne révision du document !
HTML - 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 si 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 |
jcheron