Créer des liens HTML5
Les liens HTML sont une composante essentielle sur les sites web. Et il en existe de plusieurs types en fonction du document vers lequel il pointe: page Internet, fichier, mail, etc.
L’ajout d’un lien
Pour définir un lien, il suffit d’utiliser la balise <a>, dans laquelle vous mettez le texte du lien :
Ce texte n'est pas le lien, <a>mais celui-là, oui</a>Et après vous avez des attributs à mettre dans cette balise:
Vous avez l’attribut href qui définit l’URL cible du lien, donc la page du site Internet que vous ciblez, ou le fichier que vous ciblez avec le lien.
hreflang, très rarement utilisé, définit la langue du document cible, si celle-là est différente du document de départ c’est-à-dire si vous avez défini votre document HTML 5 en français, pas besoin d’utiliser la balise hreflang si vous renvoyez toujours sur des sites français, par contre si vous renvoyez sur un site avec un contenu en anglais, vous utilisez cet attribut-là, hreflang pour spécifier EN, pour dire que l’URL de destination pointe sur un document en anglais. ping contient différentes URL, séparées par un espace qui reçoivent une notification lorsque l’utilisateur clique sur le lien. Il s’avère que les blogs de type
WordPress les utilise dans ses liens, c’est les ping que vous voyez lorsque lorsque des internautes font référence à votre article. Cet attribut n’est pas toujours supporté par les navigateurs et l’utilisateur peut le désactiver.
Exemple:
<a href="pageCible.html" id="demo" ping="_ping?url=demo">Texte que l'utilisateur verra</ a>Ici vous avez un exemple de création de liens, donc là vous renvoyez sur une page du site Internet; avec ping, par contre, vous informez une autre page Internet que l’utilisateur a cliqué sur le lien, donc le navigateur justement envoie une requête POST à l’URL spécifiée dans l’attribut et c’est très utile, comme je vous l’ai dit, pour les données analytiques d’un site internet, comme ça vous savez par exemple quels sont les sites Internet qui pointent vers votre article, vers votre page HTML.
Vous avez également l’attribut rel qui définit la relation entre le document de départ et le fichier ou le document ciblé par les liens. Vous avez différentes valeurs comme alternate, archives, author, bookmark, contact, etc. Enfin, avec target vous définissez la façon d’ouvrir la cible du lien : soit vous remplacez la page actuelle (self), soit ça ouvre le lien dans une nouvelle fenêtre ou dans un nouvel onglet du navigateur (_blank). Par exemple si ce n’est pas un document HTML 5, vous allez utiliser ce dernier attribut pour dire, afficher son, afficher image, afficher PDF, ou un autre type de fichier, donc très pratique également.
Exemple:
Accéder à la suite: <a href ="page2.html" target ="_blank" >cliquez ici</a>
Lien vers une page
La balise href peut utiliser un chemin relatif, c’est-à-dire à partir de la page actuelle, pas besoin de donner une adresse complète avec http://etc. Pour aller vers un document qui se trouve dans le même répertoire que la page actuelle, vous indiquez uniquement le nom de ce document:
<a href="document.html" >Lien vers un document dans le même répertoire </a>Si le document se trouve dans un sous-répertoire, indiquez le nom de ce répertoire, un slash puis le nom du document:
<a href="sous_repertoire/document.html" >Lien vers un document dans le même répertoire</a> Enfin, si le document se trouve plus haut dans l’arborescence (vous voulez accéder au répertoire contenant la page actuelle), vous utilisez le raccourci .. puis un slash et le nom du fichier:
<a href="../document.html">Lien vers un document dans le même répertoire</a>Les liens dans une page
Vous pouvez déclarer une ancre : vous l’avez sûrement vu dans des sites Internet, vous avez une icône avec une flèche qui remonte vers le haut et le lien s’appelle remonter en haut, cela s’appelle une ancre. Vous pouvez définir des ancres dans votre page et vous en servir dans vos liens pour accéder rapidement à un certain endroit de votre document HTML.
Exemple:
<body id="haut">
<!-- LE contenu html de votre page -->
<a href="#haut">Remonter en haut</a>
</body>Vous pouvez bien évidemment faire des liens vers un fichier. Il suffit de renseigner si le fichier est dans le même répertoire formation.pdf, ça fonctionne exactement comme l’affichage d’une page HTML, ou vous pouvez pointer sur un fichier dans un autre domaine, vous mettez http le nom de domaine.
Conclusion
Pour créer vos liens HTML, souvenez-vous de la balise a et de son attribut href. Indiquez ensuite le lien vers l’élément que vous souhaitez, qu’il soit ailleurs sur Internet, dans le même dossier que votre page, dans le dossier supérieur ou dans un dossier fils.
Étiquette :balise HTML, balises HTML, href, hreflang, HTML 5, lien hypertexte, lien retour, ping, post, texte html, url, WordPress, WordPress 5
