Chers développeurs, arrêtez d'utiliser des boutons à la place des liens !

Un bouton n’est pas un lien et un lien n’est pas un bouton. On ne peut pas utiliser l’un à la place de l’autre. Même si, graphiquement, les deux peuvent être identiques, en tant que développeur, il est important d’utiliser le bon élément au bon endroit et au bon moment.

Un lien (<a>) sert à naviguer vers une autre page, ou une ancre sur la même page. Un bouton (<button>) sert à effectuer une action sur la page courante comme soumettre un formulaire ou ouvrir un modal.

Exemple et contre-exemple

Voici un exemple de code correct :

1@Component({
2  selector: 'app-root',
3  imports: [RouterLink],
4  template: `<a routerLink="/">Go Home</a> `,
5})
6export class AppComponent {}

Et voici un contre-exemple à éviter :

1@Component({
2  selector: 'app-root',
3  template: `<button (click)="navigateToHome()">Go Home</button> `,
4})
5export class AppComponent {
6  router = inject(Router);
7
8  navigateToHome() {
9    this.router.navigate(['/']);
10  }
11}

J’ai malheureusement trop souvent vu, dans des applications, le contre-exemple : l’utilisation d’un bouton pour naviguer à la place d’un lien simplement parce que, dans le design, le lien ressemblait à un bouton.

D’aucuns pourraient arguer que naviguer est une action et que donc on pourrait utiliser un bouton pour naviguer. C’est une erreur.

Problèmes posés

Utiliser un bouton à la place d’un lien pose plusieurs problèmes.

Référencement (SEO) :

Les moteurs de recherche utilisent les liens pour explorer et indexer les pages Web. Utiliser un bouton à la place d’un lien nuit au référencement de votre site.

Ouverture dans un nouvel onglet :

Avec un lien, l’utilisateur peut choisir d’ouvrir la destination dans un nouvel onglet. En optant pour un bouton, vous supprimez cette possibilité et risquez de frustrer vos utilisateurs.

Copie de l’URL :

Un lien permet à l’utilisateur de copier l’URL de destination (en faisant Clic droit puis Copier le lien). En utilisant un bouton, cette action devient impossible.

Maintenabilité :

Utiliser un bouton à la place d’un lien alourdit le code, crée une complexité inutile sans apporter le moindre bénéfice.

Conclusion

En résumé, un lien est fait pour naviguer, un bouton est fait pour interagir avec la page courante. Même si leur apparence peut être similaire, leur rôle est bien distinct. En utilisant le bon élément HTML, vous préservez l’accessibilité, le référencement, l’UX et la maintenabilité de vos applications.