Link dan Anchor

Link: Jantungnya Web

Web disebut "web" (jaring) karena halaman-halamannya saling terhubung lewat link. Tag pembuat link adalah <a> (anchor), dan alamat tujuannya ditulis di atribut href:

<a href="https://www.google.com">Kunjungi Google</a>

Teks di antara tag pembuka dan penutup disebut teks link. Inilah yang diklik pengunjung.

Link Absolut vs Relatif

Absolut: alamat lengkap, dipakai untuk ke situs lain.

<a href="https://learn.omnidevv.biz.id">Belajar Ngoding</a>

Relatif: alamat relatif terhadap file saat ini, dipakai untuk pindah antar halaman dalam situsmu sendiri.

<a href="tentang.html">Tentang Saya</a>
<a href="blog/artikel-pertama.html">Artikel Pertama</a>

Kalau file tentang.html ada di folder yang sama, cukup tulis namanya. Ini bikin situsmu tetap jalan walau dipindah ke domain lain.

Buka di Tab Baru

Tambahkan target="_blank" supaya link terbuka di tab baru, bukan menggantikan halamanmu:

<a href="https://www.google.com" target="_blank">Google (tab baru)</a>

Catatan teknis: Saat memakai target="_blank", tambahkan juga rel="noopener". Tanpa itu, halaman yang dibuka bisa mengakses halamanmu lewat window.opener, celah keamanan yang disebut tabnabbing. Jadi pola amannya: <a href="..." target="_blank" rel="noopener">.

Link ke Bagian Halaman yang Sama

Kamu bisa bikin link yang melompat ke bagian tertentu dalam satu halaman. Caranya: beri id ke elemen tujuan, lalu link ke #id tersebut:

<a href="#resep">Lompat ke Resep</a>

<!-- jauh di bawah -->
<h2 id="resep">Resep Mie Goreng</h2>

Teknik ini fondasi dari daftar isi dan navigasi satu halaman.

Link Email dan Telepon

Link tidak harus ke halaman web:

<a href="mailto:[email protected]">Kirim Email</a>
<a href="tel:+6281234567890">Telepon Saya</a>

Klik mailto: membuka aplikasi email, klik tel: membuka dialer di HP.

Teks Link yang Baik

Tulis teks link yang menjelaskan tujuannya. Hindari "klik di sini":

<!-- Kurang baik -->
<p>Untuk tutorial, <a href="/html">klik di sini</a>.</p>

<!-- Baik -->
<p>Baca <a href="/html">tutorial HTML untuk pemula</a>.</p>

Screen reader sering membacakan daftar link secara terpisah dari konteks kalimat, jadi teks link harus masuk akal sendirian.