Aller au contenu principal
ShadowAcademy

Les langages HTML Liens et images

Les liens

Le lien

<a href="https://exemple.fr/calendrier">Voir le calendrier des ateliers</a>

href est la destination, le contenu est le texte cliquable. Ce texte doit dire où mène le lien : « Voir le calendrier des ateliers » plutôt que « cliquez ici », qui ne veut rien dire pour quelqu'un qui parcourt la liste des liens d'une page.

Ouvrir dans un nouvel onglet

<a href="https://exemple.fr" target="_blank" rel="noopener">...</a>

target="_blank" ouvre un nouvel onglet. Il s'accompagne de rel="noopener" : sans lui, la page ouverte peut, par script, prendre le contrôle de l'onglet d'origine et le rediriger vers une imitation. Les navigateurs récents se protègent seuls, mais l'attribut coûte peu et protège les autres.

Les ancres : aller à une section

Un lien peut viser un endroit de la même page, grâce à l'attribut id :

<a href="#regles">Aller aux règles</a>
...
<h2 id="regles">Règles</h2>

Le # dans href introduit l'identifiant. Un id est unique dans la page.

2 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

  • Le lien vers le calendrier facile lecon a valider
  • Sauter à une section facile lecon a valider