Dans une balise d'ancre <a>, il faut préciser à l'aide de l'attribut href l'URL de la page vers laquelle le lien doit mener.
Cet URL peut être relatif (ne pas débuter par https://) si la page ciblée est sur le même site que la page qui contient le lien.
Ex :
<a href="contact.php">
Pour cibler une page d'un autre site Web, l'hyperlien utilisera un URL qui débute par https://. À ce moment, il est d'usage de faire ouvrir la page dans un nouvel onglet.
Ex :
<a href="https://mondomaine.com/unepage.html" target="_blank">
Une bonne pratique consiste à ajouter une icône à côté des liens externes afin que l'internaute sache qu'il s'apprête à quitter le site actuel. Ceci peut être fait automatiquement à l'aide de la technique expliquée sur cette fiche : « Ajouter une icône à côté des liens externes ».
Parfois, le lien devra mener vers un endroit spécifique dans la page. Ce peut être n'importe quel élément HTML qui a un attribut id.
Dans les fiches que j'écris, j'aime ajouter des id à un titre de section lorsque d'autres pages font référence au texte de cette section.
Ex :
<h2 id="attributsformulaires">Attributs qu'on peut retrouver dans la plupart des balises de formulaire</h2>
À l'intérieur de cette même page, un lien vers un id débutera par un #.
On peut atteindre directement cette section à l'aide de ce lien :
Ex :
<a href="#attributsformulaires">Attributs</a>
Pour cibler cette section à partir d'une autre page Web on ajoutera le # suivi du id à la suite de l'URL.
Ex :
<a href="https://apical.xyz/fiches/les_formulaires_html/Balises_de_formulaire_HTML#attributsformulaires" ...>Attributs</a>
Note : Par abus de langage, on donne parfois le nom ancre à l'élément HTML vers lequel le lien pointe puisqu'autrefois, plutôt que d'utiliser un id, on devait ajouter une balise <a name="..."> à l'endroit désiré.
Dans mes fiches, il m'arrive régulièrement de vouloir ajouter un lien vers une section précise d'une page que je n'ai pas écrite. Si l'auteur de la page a ajouté un id à l'endroit désiré, tout va bien.
Dans le cas contraire, il est tout de même possible d'arriver à mes fins. Pour ce faire, je crée un lien vers un fragment de texte (en anglais, text fragment). Pour ce faire, j'ajoute :~: juste après le #, suivi par un extrait du texte.
Dans le fragment de texte, il est important de remplacer les espaces par la suite de caractères %20. D'autres caractères devront également être encodés. Pour plus de détails, consultez la fiche « Encodage dans l'URL (UTF-8, comme par exemple %20 pour un espace) ».
Ex :
<a href="https://dev.mysql.com/doc/refman/8.0/en/mysqldump.html#:~:text=mysqldump%20requires%20at%20least" ...>Privilèges</a>
Notez que cette fonctionnalité, bien que tout à fait fonctionnelle, n'est pas encore reconnue comme une norme du W3C.
« <a>: l'élément d'ancre ». MDN. https://developer.mozilla.org/fr/docs/Web/HTML/Element/a
« Creating links ». Open Classrooms. https://openclassrooms.com/en/courses/2479876-build-your-website-with-html5-and-css3/2490386-creating-links
« WICG/scroll-to-text-fragment ». GitHub. https://github.com/WICG/scroll-to-text-fragment
« Text Fragments ». GitHub. https://wicg.github.io/scroll-to-text-fragment/
▼Publicité
