La différence entre a et button

Publié le 2025-05-07

Un <a> n’est pas un <button>. Et inversement.

On pourrait croire que c’est un détail, que tant que ça marche, tout va bien. Mais en réalité, le choix entre <a> et <button> est fondamental pour l’accessibilité, l’UX, et même le référencement.

Un `<a>` = navigation

Tu veux envoyer l’utilisateur vers une autre page, un autre site, ou une ancre interne ?

Utilise un lien :

<a href="/contact">Contactez-nous</a>

Un `<button>` = action

Tu ouvres une modale ? Tu déclenches un menu ? Tu modifies un élément dans la page sans changer d’URL ?

Utilise un bouton :

<button @click="openModal = true">Ouvrir la modale</button>

Pourquoi c’est important ?

Parce que les navigateurs, le clavier et les lecteurs d’écran attendent un comportement précis en fonction des balises utilisées.

Utiliser la mauvaise balise, c’est :

tromper les technologies d’assistance et donc l’humain derrière,
gâcher l’expérience utilisateur (UX),
rendre la navigation difficile, voire impossible, pour certaines personnes.

Petit tip bonus

Tu peux parfaitement styliser un <a> pour qu’il ressemble à un bouton, ou un <button> pour qu’il ressemble à un lien.

Mais…

Ne triche pas avec les rôles HTML.

Ne mets pas role="button" sur un lien,
ne mets pas onclick sur un lien sans href,
ne force pas un <button> à agir comme un lien.

Bref, ne mélange pas tout ! Chaque balise a un rôle sémantique important. Respecter ce rôle, c’est garantir un web plus accessible.

En résumé

Tu veux :

naviguer vers une autre page : Utilise <a>,
déclencher une action dans la page : Utilise <button>

Respecter les balises HTML, c’est coder pour tout le monde.