Vaste sujet comprenant des aspects fonctionnels variés (liens vers d'autres sites, navigation, ancre dans la page, redirection...) avec un impact net sur l'ergonomie, l'accessibilité et le référencement, des formes techniques multiples (link, lien "a" classique et mailto...), sans oublier l'aspect juridique des liens externes !
Aspects juridiques des liens externes (parasitisme, ©, lien de contenu illicite...).
Utilité : Apporte des aides supplémentaires à la navigation.
Voir sur la page : Entête <head> (link)
- Reconnaissable, grâce à une couleur spécifique et au soulignement (à réserver aux liens).
- Explicite, par le texte cliquable et éventuellement l'attribut title.
Quelques pages à propos de navigation et de menus sur le weblog de Vincent Bénard:
En savoir plus :
Le contenu d'un lien (le texte cliquable) est pris en compte par les moteurs de recherches.
Il est ainsi avantageux (pour la page visée par le lien) que ce lien comprenne
des mots clé en rapport avec le contenu de la page visée.
On préférera donc un lien du type : "La culture des amaryllis"
et on évitera : "La culture des amaryllis Fiche 1" ou "cliquez ici"
Une "application" possible qui fait bien comprendre cela : le "Google bombing".
Cela vaut aussi bien pour les liens internes qu'externes.
En savoir plus :
Affiche une info-bulle, pour préciser le lien. Survolez ici pour voir.
<a href="" title="titre s'affichant au survol

 donne un saut de ligne avec IE.">
NB : Passer à la ligne dans la source ou insérer le code 
 donne un saut de ligne avec IE. Ce procédé n'est pas standard et ne marche qu'avec IE.
<a href="../index.htm" accesskey="1">Accueil</a>
Pour aller à "Accueil", faites [Alt] [Maj] [1]. Appuyez encore sur [Entrée] sous IE.
<a href="../index.htm" tabindex="20">Web-jardin</a>
La touche [Tab] permet de passer d'un lien au suivant dans l'ordre où ils se présentent sur la page. Les n° de tabindex permettent de modifier l'ordre de passage. Utilisez des N° tels 4, 8, 12, 16, 20 pour pouvoir intercaler ultérieurement des liens supplémentaires.
<a href="http://xxx.com/index.htm" hreflang="en">page-anglaise</a>
Si la page liée est dans une langue différente, il est souhaitable d'indiquer la langue dans le lien. Les lecteurs d'écran exploitent l'info.
On peut styler les liens différemment selon l'attribut hreflang grâce au sélecteur d'attribut. Cette feuille de style place un drapeau en background à droite du lien :
a[hreflang|=fr]{background:url(../flag/fr.png) 100% 0% no-repeat}
<a href="http://xxx.jp/index.htm" charset="Shift_JIS">page-sans-charset</a>
Si la page liée ne s'affiche pas correctement par manque d'indication du charset, on peut tenter d'y remédier en l'indiquant dans le lien.
En savoir plus :
Pour le contrôle automatique des liens internes ou externes, sur le disque dur ou sur le web.
Pour les liens internes, voir aussi "Etre prévenu des liens rompus".
Softs :
Extension Firefox :
Scripts :
Outils en ligne :
Les menus en JS "brut" sont à utiliser avec modération, sinon à proscrire.
Leurs inconvénients sont multiples :
- Mauvaise utilisabilité
- Très mauvaise accessibilité
- inaccessibles à la majorité des moteurs de recherche.
Le lien "retour arrière" ou "back" : Indiquer une page par défaut est indispensable (JS désactivé dans 10% des cas).
<a href="URL_page-par-defaut" onclick="history.back();return false;">back</a>
Menus JS (dynamiques) restant utilisables sans JS (statiques) :
<a href="mailto:NOM@internet.fr">contact</a>
On peut ajouter des paramètres : carbon copie (cc=), blind carbon copie (bcc=) (éventuellement plusieurs mailtos séparés par des point virgules), sujet (subject=) et message (body=). Après le mailto, le premier paramètre est précédé de "?" les suivants de "&" (donc &). Ne pas séparer les paramètres par des guillemets.
<a href="mailto:Elle@FAI.fr?Cc=Lui@FAI.fr&bcc=moi@fai.fr; surprise@fai.fr&subject=objet du message&body=texte">constatez vous même</a>
<a href="mailto:NOM@%69nternet%2Efr">NOM</a>
Pour éviter que l'adresse ne soit récoltée par les robots des spameurs, on propose de la coder en remplaçant l'arobase @ (@ ou %40), le point (. ou %2E) et une partie des lettres par leur code décimal et surtout hexadécimal. Le mélange de plusieurs codage semble être une meilleure garantie.
L'hexadécimal ne convient que pour le codage de l'adresse dans l'attribut href ou dans un formulaire. On ne peut l'utiliser pour l'affichage en clair à l'écran : il n'est pas "traduit" et apparaît tel quel. Le code décimal seul ne présentant plus une protection suffisante aujourd'hui, on peut proposer de remplacer l'arobase (ou l'adresse entière) par une image...
<a href="mailto:NOM&64;FAI%2Efr">NOM<img src="aro.gif">FAI.fr</a>
2e ligne : décimal, écrire &#xx; - 3e ligne : hexadécimal, écrire %xx
Pour en savoir plus :
Crypter un email par un service en ligne :
Tester la page en ligne pour vérifier que l'email est bien cachée :