<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.
Comparaison point par point
#Utilisation principale
Attribut requis pour fonctionner
Change l’adresse URL
Peut s’ouvrir dans un nouvel onglet
Ajoute une entrée à l’historique de navigation
Quand l’utiliser
Exemple
#<button type="button" onclick="alert('Modifications enregistrées')">Enregistrer les modifications</button>
<a href="/tarifs">Aller aux tarifs</a>Définition et utilisation
#<button> exécute une action au sein de la page en cours : il envoie un formulaire, vide des champs, ou lance votre code JavaScript quand il a type="button". Il ne change pas lui-même l’adresse de la page, sauf pour un formulaire envoyé avec la méthode get.
<a> sert à la navigation : il change d’adresse, va vers une ancre sur la même page, ou ouvre un fichier à télécharger. Sans l’attribut href, ce n’est qu’une coquille vide, ni cliquable ni focalisable. Il peut s’ouvrir dans un nouvel onglet (target="_blank") et, contrairement à un bouton, ajoute une entrée à l’historique de navigation, ce qui donne tout son sens au bouton "retour".
Règle simple : si le clic fait seulement quelque chose sur la même page, c’est <button>. S’il mène ailleurs, c’est <a>. Ne construisez jamais un <div> cliquable pour l’un de ces rôles, car vous perdriez la prise en charge gratuite du clavier et des lecteurs d’écran.
Syntaxe
#<button type="button">...</button>
<a href="adresse">...</a>Plus d’exemples
#<form onsubmit="event.preventDefault(); this.querySelector('output').textContent = 'Envoyé !'">
<button>Envoyer</button>
<output></output>
</form>Un bouton sans type="button" a, dans un formulaire, le type par défaut submit.
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
Documentation MDN (nouvel onglet)
</a>Bonnes pratiques
#- Si le clic fait seulement quelque chose sur la même page, utilisez
<button>. S’il mène ailleurs, utilisez<a>. - Ne construisez pas de
<div>cliquables à la place de l’un ou l’autre. Vous perdriez la prise en charge du clavier qu’ils offrent gratuitement. - Un lien sans
hrefn’est ni focalisable ni cliquable. Ce n’est qu’une coquille vide.
Entrées associées
#- <button>Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.
- <a>Un lien vers une autre page, un fichier, une adresse e-mail ou un endroit sur la même page.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <nav>Un bloc de liens de navigation principaux : menu, sommaire, fil d’Ariane.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.