Klik biru bergaris bawah — kebiasaan internet yang udah kamu lakuin ribuan kali tanpa mikir. Itu link, dan dia adalah jiwa dari World Wide Web. Tanpa link, web cuma kumpulan dokumen terpisah yang gak nyambung. Tag <a> (a-nya dari "anchor", jangkar) bikin tulisan apapun jadi pintu portal ke halaman lain — bisa di website kamu sendiri, atau kabur ke situs orang lain di seberang dunia.

💡 Asal-usul "Anchor". Disebut anchor karena dulu link bisa nge-jangkar ke titik spesifik di tengah halaman (misalnya #section-2), kayak nge-loncat ke halaman 47 dari daftar isi buku. Bukan cuma loncat ke halaman lain, tapi loncat ke titik tertentu di halaman itu.

Sintaks <a>

Bungkus teks dengan tag <a> + atribut href (URL tujuan):

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

Ketika elemen ini ditekan, browser akan diarahkan ke halaman yang ditautkan menggunakan tab yang sama.

Buka di Tab Baru — target="_blank"

Untuk membuka link di tab baru tanpa tutup tab sekarang, tambah atribut target="_blank":

<a href="https://google.com" target="_blank"> Google </a>

🎭 Analogi sehari-hari

Link = papan petunjuk arah di mall ("Toilet → Lantai 2"). Klik = jalan ke tempat itu. target="_blank" = buka pintu baru, jendela mall lama tetap kebuka.

⚠️ Jebakan yang sering ditemui

• target="_blank" tanpa rel="noopener" = security hole. Tab baru bisa akses window.opener halaman asal — phishing risk. Selalu rel="noopener noreferrer".
• href="#" sebagai placeholder = scroll ke atas halaman + kena di history. Pakai <button> kalau bukan navigasi.
• Link tanpa konteks ("Klik di sini", "baca lebih") buruk untuk a11y — screen reader user dengar daftar "klik di sini". Pakai teks deskriptif.
• href="google.com" (tanpa https://) = relative path! Browser cari /halamankamu/google.com. Selalu protocol lengkap.
• href="javascript:..." = anti-pattern. Pakai event handler.

🎯 <a> vs <button> vs <div> — pilih yang mana?

• Pindah halaman / scroll ke section (href="/about", href="#bab-3") → <a>
• Trigger aksi (submit form, buka modal, toggle menu) → <button>
• Container layout pure tanpa interaksi → <div> (jangan kasih onclick)

Patokan: kalau ada URL, pake <a>. Kalau gak ada URL tapi ada aksi, pake <button>. <div onclick> = anti-pattern — gak keyboard-accessible, gak di-announce screen reader, gak tab-able. Browser udah kasih dua tools yang bener — pake yang sesuai.

TL;DR: <a href="URL"> = link/anchor. Tab baru: target="_blank" + WAJIB rel="noopener noreferrer" (security). Anchor link ke section: href="#id". Pilih <a> kalau ada URL/navigasi, <button> kalau aksi tanpa URL. Hindari href="#" placeholder dan <div onclick> (anti-pattern, gak accessible).