<a>

• href

  URL

  L’adresse de destination. Elle peut être absolue (https://…), relative (/formations), une ancre sur la même page (#faq), ou un schéma spécial, comme mailto: ou tel:.

• target

  _self | _blank | _parent | _top | nom

  Indique où ouvrir l’adresse. _self (par défaut) l’ouvre dans l’onglet actuel, _blank dans un nouvel onglet ou une nouvelle fenêtre. Les navigateurs modernes coupent automatiquement l’accès de la nouvelle page vers la page d’origine avec _blank.

• rel

  liste de mots-clés

  Décrit la relation entre la page actuelle et la cible. Vous rencontrerez le plus souvent noopener et noreferrer (sécurité et confidentialité), nofollow et sponsored (pour les moteurs de recherche, sur des liens non approuvés ou payants) et external.

• download

  nom de fichier (facultatif)

  Demande au navigateur de télécharger le fichier au lieu de l’ouvrir. La valeur donnée devient le nom de fichier proposé. Cela ne fonctionne que pour les adresses du même domaine, ainsi que pour les adresses blob: et data:.

• hreflang

  code de langue

  Indique dans quelle langue est rédigée la page cible, par exemple en ou fr. Le navigateur ne l’impose pas, c’est une indication pour l’utilisateur et les robots.

• type

  type MIME

  Suggère quel type de fichier se trouve derrière l’adresse, par exemple application/pdf. Comme hreflang, ce n’est qu’une indication.

• referrerpolicy

  no-referrer | origin | same-origin | strict-origin-when-cross-origin | …

  Détermine la quantité d’informations sur la page source que le navigateur envoie dans l’en-tête Referer après un clic. no-referrer n’envoie rien.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

La plupart des navigateurs affichent cet élément avec ces styles par défaut :

a:link, a:visited {
  color: (dépend du navigateur);
  text-decoration: underline;
  cursor: pointer;
}
a:link:active, a:visited:active {
  color: (dépend du navigateur);
}

• Le texte d’un lien devrait dire où il mène. Plutôt que « cliquez ici », écrivez « téléchargez le tarif en PDF ».
• Un lien sert à la navigation, un bouton à une action. Si le clic n’ouvre rien et se contente de faire quelque chose sur la page, utilisez <button>.
• Pour les liens qui s’ouvrent dans un nouvel onglet, il vaut mieux le signaler dans le texte ou par une icône, pour ne pas surprendre l’utilisateur.

• <button> vs <a>→<button> exécute une action sur la page, par ex. envoyer un formulaire. <a> navigue : il change d’adresse ou ouvre une ressource. Les deux fonctionnent au clavier.
• <nav>→Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
• <button>→Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.