Link Dasar: a href

Analogi: Pintu Teleportasi Antar Ruangan

Bayangkan sebuah mal raksasa tanpa pintu penghubung. Setiap toko terisolasi, kamu harus keluar gedung lalu masuk lagi lewat pintu depan untuk pindah toko. Melelahkan dan tidak masuk akal. Sekarang bayangkan tiap toko punya pintu yang langsung terhubung ke toko lain: sekali melangkah, kamu berpindah tempat.

Itulah link di web. Huruf "H" pertama dari HTML singkatan dari Hypertext, teks yang bisa melompat ke teks lain. Tag <a> (anchor, jangkar) adalah pintunya, dan atribut href (hypertext reference) adalah alamat ruangan tujuannya. Tanpa link, web hanyalah kumpulan halaman yang terisolasi. Dengan link, halaman-halaman itu menjadi satu jaringan raksasa yang saling terhubung. Inilah ide yang membuat web menjadi "web".

Kenapa Link Bekerja Seperti Ini

Tim Berners-Lee merancang web supaya dokumen bisa saling merujuk tanpa harus disalin. Daripada menggandakan isi halaman lain ke halamanmu, kamu cukup menaruh "pintu" menuju halaman itu. Pintu ini harus punya tiga hal: penanda bahwa ia bisa diklik (tag a), alamat tujuan (atribut href), dan teks yang menjelaskan isi tujuan supaya pengguna tahu apa yang menantinya.

Atribut href adalah bagian terpenting: tanpa href, tag a hanyalah teks biasa yang tidak bisa diklik. Ini jebakan umum pemula yang menulis <a>Klik saya</a> lalu heran kenapa tidak berfungsi. Selain itu ada dua jenis alamat: relatif untuk halaman di situsmu sendiri (tentang.html), dan absolut untuk situs orang lain (https://google.com). Pakai relatif untuk halaman sendiri supaya link tetap jalan walau domainmu berubah, misalnya dari localhost ke domain asli.

Contoh 1: Paling Sederhana

<a href="https://example.com">Kunjungi Example</a>
<a href="tentang.html">Tentang Kami</a>

Dua baris, dua jenis link. Yang pertama absolut: alamat lengkap menuju situs lain. Yang kedua relatif: file tentang.html yang berada di folder yang sama. Teks di dalam tag adalah yang diklik pengguna, jadi buatlah deskriptif. "Kunjungi Example" jauh lebih jelas daripada "klik di sini".

Contoh 2: Navigasi Situs yang Realistis

Contoh yang lebih mirip halaman asli, misalnya menu navigasi sebuah situs:

<nav>
  <a href="index.html">Beranda</a>
  <a href="tentang.html">Tentang</a>
  <a href="kontak.html">Kontak</a>
  <a href="https://github.com" target="_blank" rel="noopener">GitHub Kami</a>
</nav>

Tiga link pertama adalah navigasi internal: relatif, terbuka di tab yang sama supaya tombol back browser tetap berguna. Link keempat eksternal: absolut, dibuka di tab baru dengan target="_blank", dan selalu dipasangi rel="noopener". Atribut rel="noopener" ini bukan hiasan: tanpa itu, halaman tujuan bisa mengutak-atik halamanmu lewat window.opener. Ini celah keamanan nyata yang pernah dieksploitasi di dunia nyata, bukan sekadar teori.

Kesalahan Umum Pemula

Salah: tag a tanpa href.

<a>Klik saya</a>

Benar: selalu sertakan href, walau tujuannya bagian halaman sendiri.

<a href="#promo">Klik saya</a>
<!-- ... -->
<section id="promo">Promo spesial!</section>

Kenapa salah? Tanpa href, browser tidak merendernya sebagai link: tidak bisa diklik, tidak bisa difokuskan keyboard, dan screen reader tidak mengumumkannya sebagai tautan. Kalau tujuannya belum ada, pakai tombol (<button>) atau tautan jangkar ke id, jangan a kosong.

Salah: target="_blank" tanpa rel="noopener".

<a href="https://situs-asing.com" target="_blank">Kunjungi</a>

Benar: selalu pasangkan keduanya untuk link eksternal.

<a href="https://situs-asing.com" target="_blank" rel="noopener">Kunjungi</a>

Kenapa salah? Halaman yang dibuka di tab baru mendapat akses window.opener ke halamanmu. Situs jahat bisa mengganti isi halaman aslimu dengan halaman phishing selagi kamu lengah melihat tab baru. rel="noopener" memutus akses itu. Satu atribut kecil, perlindungan besar.

Salah: membuka semua link di tab baru.

<a href="tentang.html" target="_blank">Tentang</a>
<a href="kontak.html" target="_blank">Kontak</a>

Benar: tab baru hanya untuk link eksternal atau dokumen.

<a href="tentang.html">Tentang</a>
<a href="kontak.html">Kontak</a>
<a href="https://blog-orang.com" target="_blank" rel="noopener">Blog Teman</a>

Kenapa salah? Setiap tab baru menumpuk di browser pengguna dan merusak kebiasaan tombol back. Aturannya: biarkan pengguna tetap di tab yang sama saat menjelajah situsmu, buka tab baru hanya saat mereka pergi ke situs orang lain atau mengunduh dokumen.

Salah: teks link yang tidak menjelaskan tujuan.

<p>Untuk info lebih lanjut <a href="panduan.html">klik di sini</a>.</p>

Benar: teks link menjelaskan isi tujuannya.

<p>Baca <a href="panduan.html">panduan lengkap pendaftaran</a>.</p>

Kenapa salah? Pengguna screen reader sering memindai halaman dengan membaca daftar semua link saja, terlepas dari kalimatnya. "Klik di sini, klik di sini, klik di sini" tidak memberi mereka informasi apa pun. Teks link yang deskriptif membantu semua orang, termasuk pengguna Google yang melihat linkmu di hasil pencarian.

Catatan teknis: Selain halaman, href bisa menunjuk ke bagian halaman (#id), alamat email (mailto:[email protected]), atau nomor telepon (tel:+62221234567). Ini membuat satu tag a sangat serbaguna: navigasi, kontak, dan unduhan file semuanya memakai mekanisme yang sama.