Link adalah teks yang bisa diklik buat pindah ke halaman lain. Di HTML, link ditulis pakai tag <a> (dari anchor), dan alamat tujuannya ditaruh di atribut href.
🧪 Tebakan cepat:
<a href="www.google.com">dibuka ke mana, ke Google atau ke tempat lain? Tebak dulu, jawabannya ada di bagian "Alamat situs lain ditulis lengkap".
Menulis link
<a href="https://www.google.com">Kunjungi Google</a>
<a ...>adalah tag pembuka.href="https://www.google.com"adalah alamat tujuan link. Ini atribut, sama kayaksrcdi<img>: info tambahan di dalam tag pembuka, ditulisnama="nilai".Kunjungi Googleadalah teks yang dilihat dan diklik pengunjung.</a>adalah tag penutup.
Hasilnya: tulisan Kunjungi Google tampil biru dan bergaris bawah. Diklik, browser pindah ke halaman Google.
Yang bikin <a> bisa diklik itu href. Tanpa href, <a> cuma teks biasa: kelihatan, tapi gak ke mana-mana.
Alamat situs lain ditulis lengkap
Buat pindah ke situs lain, tulis alamatnya lengkap, mulai dari https://:
<a href="https://www.google.com">Google</a>
<a href="www.google.com">Google</a>
Dua link ini kelihatan sama, tapi cuma baris pertama yang membuka Google. Baris kedua gak punya https://, jadi browser menganggap www.google.com itu nama file di situs kamu sendiri. Yang dicari jadinya situskamu.com/www.google.com, halaman yang gak ada.
Buat halaman di situs kamu sendiri, cukup tulis nama file-nya, misalnya href="kontak.html".
Buka di tab baru
Atribut target menentukan di mana link dibuka. Nilai _blank (pakai garis bawah di depan) artinya tab baru:
<a href="https://www.google.com" target="_blank" rel="noopener">Google</a>
Diklik, Google kebuka di tab baru, dan halaman kamu tetap ada di tab lama.
rel="noopener" itu pengaman yang biasa ditulis bareng target="_blank". Dengan atribut ini, halaman di tab baru gak bisa memakai window.opener buat mengarahkan tab asal kamu ke situs lain, misalnya situs palsu. window.opener itu bagian dari JavaScript. Kamu gak perlu paham cara kerjanya, cukup biasakan menulis dua atribut ini berpasangan.
Loncat ke bagian di halaman yang sama
Link juga bisa loncat ke satu bagian di halaman yang sedang dibuka:
<a href="#harga">Lihat harga</a>
<h2 id="harga">Harga</h2>
href="#harga"berisi tanda pagar#lalu sebuah nama. Artinya: loncat ke elemen bernamahargadi halaman ini.id="harga"memberi nama itu ke heading tujuan.idadalah atribut buat menamai satu elemen, dan satu nama cuma boleh dipakai sekali per halaman.
Klik "Lihat harga", halaman langsung scroll ke heading Harga.
Link email pakai mailto:
Isi href dengan mailto: lalu alamat emailnya, tanpa spasi:
<a href="mailto:[email protected]">Hubungi Kami</a>
Diklik, aplikasi email pengunjung kebuka, dan [email protected] sudah terisi sebagai penerima.
⚠️ Jebakan yang sering ketemu
- Lupa
>di tag pembuka.<a href="https://www.google.com"Kunjungi Google</a>bikin teks link-nya hilang, karena browser ngira teks itu masih bagian dari tag. - Lupa
https://. Link-nya nyasar ke file di situs kamu sendiri. href="#"sebagai pengisi. Link kayak gini cuma loncat ke atas halaman. Isihrefdengan tujuan yang beneran.- Teks "klik di sini". Pengguna screen reader sering cuma dengar daftar link, jadi tulis tujuannya: "Lihat harga paket", bukan "klik di sini".
TL;DR: Link ditulis <a href="alamat">teks</a>, dan teks di antara tag itulah yang diklik. Tanpa href, <a> gak bisa diklik. Alamat situs lain ditulis lengkap dari https://. Tab baru pakai target="_blank" plus rel="noopener". Loncat ke bagian halaman: href="#id". Link email: href="mailto:alamat".
