Button vs Link

Di hampir setiap kode yang kita tinjau, ada satu keputusan yang berulang: elemen yang bisa diklik itu sebaiknya a atau button? Pertanyaan ini klasik karena keduanya tampak sama setelah diberi CSS — kursor berubah menjadi tangan, bisa diklik, bisa distyling menyerupai apa pun. Meski tampak sama, keduanya berbeda secara semantik, dan pilihan yang salah berdampak nyata pada keyboard, pembaca layar, sampai mesin pencari.

Chapter ini menegaskan aturan pemilihannya, membedah salah kaprah yang paling sering muncul, dan menutup dengan tabel perbandingan yang bisa dijadikan rujukan cepat.

Aturan Dasar: Navigasi atau Aksi #

Aturannya satu kalimat: link untuk navigasi, button untuk aksi.

• Elemen a membawa pengguna berpindah — ke halaman lain, ke bagian lain halaman yang sama lewat anchor, atau ke URL eksternal. Tujuannya selalu berupa alamat.
• Elemen button menjalankan sesuatu di halaman ini: membuka dialog, mengirim form, men-toggle details, menampilkan popover. Tujuannya berupa perilaku, bukan alamat.

Mekanismenya berbeda di akarnya. Link memicu navigasi browser — alamat pada href dimuat ke jendela. button memicu event click yang ditangani skrip, atau perilaku bawaan seperti submit pada type="submit". Browser, pembaca layar, dan mesin pencari membaca maksud itu dari nama elemennya sebelum melihat tampilannya.

Salah Kaprah: Link untuk Aksi #

Pola yang paling sering kita temui di kode lama — link dengan href="#" yang isinya menunggu onclick:

<a href="#" onclick="bukaDialog()">Buka detail pesanan</a>

Markup ini tampak bekerja, tetapi menyisakan beberapa persoalan. Pertama, fokus dan semantik: pembaca layar mengumumkan elemen ini sebagai link, padahal fungsinya tombol — pengguna mengharapkan navigasi, bukan aksi. Kedua, keyboard: tombol button dapat diaktifkan dengan Enter maupun Space, sementara link hanya merespons Enter — pengguna yang menekan Space tidak mendapat apa pun. Ketiga, perilaku bawaan: href="#" memaksa scroll ke atas halaman setiap kali onclick lupa mencegahnya. Keempat, mesin pencari menelusuri link sebagai jalur antar halaman; ratusan link kosong menuju # mengaburkan struktur situs.

Perbaikannya sederhana — pakai elemen yang sesuai fungsinya:

<button type="button" id="bukaDetail">Buka detail pesanan</button>

Satu baris markup, tanpa atribut tambahan: semantik benar, Space dan Enter bekerja, tidak ada lompatan ke atas halaman.

Sebaliknya, arah kebalikannya juga salah: button untuk navigasi. Jika tujuannya halaman menu Kedai Kopi Siti, pakailah a href="/menu". button yang menavigasi lewat location.href membuang kemampuan penting link: klik tengah untuk membuka di tab baru, klik kanan untuk menyalin alamat, dan penandaan warna bawaan untuk tautan yang sudah dikunjungi.

Perbandingan Enam Aspek #

Keduanya bisa dibuat tampak kembar sepenuhnya lewat CSS — dan justru itulah momen keputusannya diuji. Klik tombol pada kolom kiri, lalu klik link pada kolom kanan, dan bandingkan apa yang terjadi:

Link pada kolom kanan memuat alamat daring dan membutuhkan koneksi internet; setelah diklik, bingkai demo berganti menjadi halaman tujuan — muat ulang halaman ini untuk mengulang perbandingannya.

Tombol menjalankan aksi di tempat: hasilnya muncul di bawahnya tanpa perpindahan apa pun. Link membawa bingkai demo ke alamat https://example.com/menu — perpindahan adalah perilaku bawaannya, bukan hasil skrip. Penampilan serupa tidak mengubah keduanya: browser tetap membaca maksudnya dari nama elemennya.

Ringkasan #

• Link untuk navigasi ke alamat — halaman lain, anchor, atau URL eksternal; button untuk aksi di halaman.
• Pola a href="#" dengan onclick menyisakan persoalan semantik, keyboard, perilaku scroll, dan penelusuran mesin pencari.
• button untuk navigasi membuang klik tengah, penyalinan alamat, dan penanda tautan yang sudah dikunjungi.
• Tampilan tidak mengubah makna: setelah CSS diterapkan, keputusan tetap dibaca dari nama elemennya.

Chapter penutup section ini merangkum seluruh elemen interaktif native dalam satu peta dan menimbangnya melawan solusi custom.