<button>
Déclencher une action, et pourquoi ce n'est jamais un <a>
<button> — Le bouton
La balise <button> représente un contrôle interactif qui déclenche une action. Trois types : submit (envoyer un formulaire), reset (réinitialiser) et button (action personnalisée). Ce n'est jamais un <a> déguisé.
Quand l'utiliser
Tu veux soumettre un formulaire, ouvrir un menu, afficher un dialogue, lancer un calcul ou toute action qui ne navigue pas vers une autre page. Si ça navigue, c'est un <a>.
Ce que tu gagnes
Accessibilité : un <button> est focusable et activable au clavier nativement (Entrée et Espace). Un <div onclick> ne l'est pas sans travail supplémentaire.
Exemple de code
<form action="/subscribe" method="post">
<input type="email" name="email" required>
<button type="submit">Subscribe</button>
<button type="reset">Clear</button>
</form>
<button type="button" aria-expanded="false" aria-controls="menu">
Open menu
</button>Pour aller plus loin
- Posez la souris — tout ce qui est cliquable doit être utilisable au clavier
- WHATWG —
<button> - W3C — ARIA Button Pattern
- MDN —
<button>