Beginner · Level 2: HTML and Accessibility FoundationsBeginner20 menitBahasa Indonesia

Link vs Button

Pahami kapan memakai link dan kapan memakai button agar interaksi halaman lebih jelas.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan link untuk berpindah tempat dan button untuk menjalankan aksi
Memilih elemen berdasarkan maksud pengguna, bukan tampilan visual
Menghindari kesalahan umum saat memilih link atau button

HTMLAccessibilityForms

Isi lesson

6 blok

1.
Tampilan bisa mirip, maknanya berbedaBelum selesaiWajib
2.
Contoh di FluentStackBelum selesaiWajib
3.
Jangan memilih dari bentuk visual sajaBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Contoh link dan buttonBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Tampilan bisa mirip, maknanya berbeda

Wajib

Link dan button bisa dibuat terlihat mirip dengan CSS. Tetapi di HTML, maknanya berbeda. Link dipakai ketika user berpindah tempat: membuka halaman, bagian halaman, file, atau website lain. Button dipakai ketika user menjalankan aksi di halaman: mengirim form, membuka menu, membuka modal, menyimpan data, atau menandai sesuatu selesai.

Bagian ini memengaruhi progres lesson.

Contoh di FluentStack

Wajib

Di FluentStack, teks seperti Semua track, Lihat roadmap, atau Buka dokumentasi adalah link karena membawa kamu ke halaman atau resource lain. Tombol seperti Kirim jawaban, Tandai selesai, atau Reset adalah button karena menjalankan aksi di halaman yang sedang kamu pakai.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan memilih dari bentuk visual saja

Kesalahan yang sering terjadi adalah memakai button untuk navigasi biasa atau link untuk aksi form. Pilih dari maksud user: berpindah tempat berarti link, menjalankan aksi berarti button. Tampilan visual bisa diatur belakangan dengan CSS.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kalau user menekan elemen untuk membuka halaman dokumentasi MDN di tab baru, elemen mana yang paling tepat?

Progres lesson naik setelah jawaban benar.

Contoh link dan button

Wajib

html

<a href="/roadmap">Lihat roadmap</a>

<button type="button">Buka menu</button>

<button type="submit">Kirim form</button>

a dengan href membawa user ke tujuan lain. button type="button" menjalankan aksi biasa di halaman. button type="submit" dipakai untuk mengirim form.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Gunakan link untuk berpindah tempat.
Gunakan button untuk menjalankan aksi.
Tampilan bisa dibuat mirip dengan CSS, tetapi makna HTML tetap harus benar.
Berikutnya, kamu akan membuat form sederhana dengan label dan input.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tampilan bisa mirip, maknanya berbeda.

Memuat progres Review module