Atribut href

Elemen a hanyalah wadah; atribut href adalah kemudinya. Nilai href menentukan ke mana link membawa pengunjung, dan bentuk nilainya — alamat lengkap, nama berkas, tanda kres, atau skema khusus — mengubah cara browser memperlakukan link itu. Chapter ini memetakan semua bentuk nilai tersebut sekaligus dua kejutan kecil yang sering menjebak pemula.

href Menentukan Tujuan dan Perilaku #

Aturan href: nilainya adalah alamat tujuan, ditulis dalam bentuk URL. Mekanismenya sederhana — saat link diklik, browser membaca nilai href lalu memutuskan tindakan berdasarkan bentuknya: memuat halaman baru, melompat dalam halaman yang sama, atau menyerahkan ke aplikasi lain. Tabel berikut merangkum bentuk yang akan kita pakai sepanjang section ini:

Bentuk nilai	Contoh	Perilaku saat diklik
URL absolut	`https://example.com/menu`	Memuat alamat lengkap di domain itu
URL relatif	`menu.html`	Memuat berkas relatif terhadap halaman saat ini
Fragment	`#kontak`	Melompat ke elemen ber-`id` `kontak` di halaman yang sama
Kres saja	`#`	Menggulir ke atas halaman
Skema email	`mailto:[email protected]`	Membuka aplikasi email pengunjung
Skema telepon	`tel:+6281234567890`	Membuka aplikasi telepon
Nilai kosong	`href=""`	Memuat ulang halaman saat ini

Empat variasi pertama dalam satu contoh:

html
<p>Menu lengkap ada di <a href="https://example.com/menu">situs utama</a>.</p>
<p>Atau baca <a href="tentang.html">cerita di balik kedai</a> terlebih dahulu.</p>
<p>Pertanyaan lain? <a href="#kontak">Lihat bagian kontak</a> di bawah halaman ini.</p>
<p>Ada masalah pesanan? Email <a href="mailto:[email protected]">[email protected]</a>.</p>

Mari kita telaah:

Baris 1 (https://example.com/menu): URL absolut — alamat lengkap dengan skema dan domain, dibahas tuntas di chapter Absolute dan Relative URL.
Baris 2 (tentang.html): URL relatif — browser menggabungkannya dengan alamat halaman saat ini.
Baris 3 (#kontak): fragment — browser mencari elemen ber-id kontak tanpa memuat ulang halaman; mekanismenya dibedah di chapter Link ke Bagian Halaman.
Baris 4 (mailto:[email protected]): skema mailto — browser menyerahkan ke aplikasi email, dibahas di chapter Link Email dan Telepon.

Dua Kejutan: # dan Nilai Kosong #

Kres tunggal href="#" tampak seperti link tanpa tujuan, tetapi browser menanganinya sebagai fragment yang menunjuk ke atas dokumen — efeknya, satu klik menggulir halaman ke posisi paling atas. Nilai kosong lebih mengejutkan lagi:

html
<a href="#">Kembali ke atas</a>
<a href="">Pesan tiket (segera)</a>

Link pertama menggulir ke atas halaman; link kedua tidak diam, melainkan dianggap menunjuk ke URL halaman saat ini sehingga satu klik memuat ulang halaman.

Rasakan ketiganya sekaligus pada demo berikut. Gulir dahulu ke bawah bingkai demo, lalu klik tiap link dan perhatikan perilakunya: fragment melompat ke bagian Kontak di bawah, kres menggulir kembali ke atas, dan link eksternal memuat halaman dari domain lain di tempat demo itu sendiri.

Link ketiga memuat alamat daring dan membutuhkan koneksi internet; setelah bingkai demo berganti menjadi halaman example.com, muat ulang halaman ini untuk mengembalikan demo.

Ringkasan #

Nilai href menentukan tujuan link sekaligus perilaku browser saat link diklik.
Bentuk nilai mencakup URL absolut, URL relatif, fragment, kres, skema mailto/tel, dan nilai kosong.
href="#" menggulir ke atas halaman; href="" memuat ulang halaman saat ini — keduanya bukan link mati.

Dua bentuk pertama pada tabel — URL absolut dan relatif — menentukan bagaimana browser menghitung alamat akhir, dan salah pilih jenis menyebabkan link rusak saat situs dipindahkan. Chapter berikutnya membedah keduanya.