Hyperlink (atau link) adalah teks atau gambar yang bisa diklik untuk berpindah ke halaman lain, bagian tertentu dalam sebuah halaman, file, alamat email, atau nomor telepon. Di HTML, hyperlink dibuat dengan tag a (singkatan dari anchor) dan atribut href yang berisi alamat tujuannya. Kemampuan melompat dari satu dokumen ke dokumen lain inilah yang membuat web disebut “web”, tanpa hyperlink, internet hanyalah kumpulan halaman yang terisolasi satu sama lain.

Tapi di balik satu tag yang kelihatannya sederhana ini, ada banyak hal yang sering dilewatkan pemula: kapan pakai URL absolut vs relatif, cara membuat link melompat ke bagian tertentu halaman, kenapa target="_blank" wajib ditemani rel="noopener", sampai kapan seharusnya pakai a dan kapan pakai button. Panduan ini membahas semuanya dari nol, lengkap dengan contoh kode yang bisa langsung kamu coba, praktik membuat halaman kartu nama online, daftar kesalahan umum, dan FAQ.

Hyperlink Adalah… (Definisi dan Sejarah Singkat)

Hyperlink adalah elemen di halaman web yang menghubungkan satu dokumen ke dokumen lain, begitu diklik, browser membawa pengguna ke alamat tujuannya. Kata “hyper” berasal dari hypertext: teks yang tidak harus dibaca berurutan seperti buku, tapi bisa dilompati ke mana saja lewat tautan. Dalam percakapan sehari-hari, orang menyebutnya “link” saja, keduanya merujuk hal yang sama.

Konsep hypertext inilah fondasi web. Bahkan nama HTML sendiri adalah singkatan dari HyperText Markup Language, bahasa markup untuk hypertext. Jadi hyperlink bukan sekadar fitur tambahan; ia ada di jantung desain web sejak awal. Kalau kamu masih meraba-raba apa itu HTML secara keseluruhan, mampir dulu ke lesson apa itu HTML di Hyper Sheets atau baca panduan belajar HTML untuk pemula, artikel ini mengasumsikan kamu sudah tahu struktur dasar dokumen HTML.

Tujuan sebuah hyperlink tidak terbatas pada halaman web lain. Satu tag a yang sama bisa mengarah ke:

Halaman lain, baik di situs yang sama maupun situs berbeda.
Bagian tertentu dalam halaman, misalnya langsung melompat ke bab “Kesimpulan”.
File, PDF, gambar, ZIP, yang bisa dibuka atau diunduh.
Alamat email, membuka aplikasi email dengan alamat tujuan terisi otomatis.
Nomor telepon, di HP, mengetuknya langsung membuka dialer.

Semua variasi itu akan kita bahas satu per satu. Tapi pertama, mari bedah anatominya dulu.

Anatomi Tag a: Cara Membuat Hyperlink di HTML

Cara membuat hyperlink di HTML adalah dengan menulis tag a, mengisi atribut href dengan alamat tujuan, dan menaruh teks yang bisa diklik di antara tag pembuka dan penutup. Tiga bagian itu, tag, href, dan anchor text, adalah anatomi lengkap sebuah link paling sederhana.

<a href="https://www.wikipedia.org/">Kunjungi Wikipedia</a>

Anatomi sebuah tag a

<ahref="https://belajarweb.dev"target="_blank">Teks Link</a>

<a ...> & </a>Tag pembuka & penutup, pembungkus link.
href="..."Atribut tujuan (URL/alamat). Bagian paling penting, tanpa ini, a bukan link.
target="_blank"Atribut opsional, buka tujuan di tab baru.
Teks LinkAnchor text, bagian yang terlihat & diklik pengguna.

Mari bedah satu per satu:

a, nama tagnya, singkatan dari anchor (jangkar). Ia butuh tag pembuka dan penutup.
href, singkatan dari hypertext reference. Atribut inilah yang menyimpan alamat tujuan. Tanpa href, sebuah a bukan link yang berfungsi.
Anchor text, teks di antara tag pembuka dan penutup (“Kunjungi Wikipedia”). Inilah bagian yang terlihat dan bisa diklik pengguna.

Secara default, browser menampilkan link sebagai teks biru bergaris bawah, dan kursor berubah jadi ikon tangan saat melayang di atasnya. Warna dan garis bawah itu bisa kamu ubah dengan CSS (kita bahas nanti), tapi perilaku dasarnya selalu sama: klik, lalu pindah.

Satu hal yang perlu kamu tahu sejak awal: a adalah elemen inline. Artinya ia mengalir di dalam baris teks, tidak memaksa baris baru, dan bisa diselipkan di tengah paragraf, persis seperti yang kamu lihat di artikel ini. Kalau perbedaan inline vs block masih samar, penjelasan lengkapnya ada di artikel inline adalah.

Link juga boleh membungkus lebih dari sekadar teks pendek:

<p>
  Belajar web development paling efektif dengan
  <a href="/latihan/">latihan langsung di browser</a>,
  bukan cuma menonton video.
</p>

Kalau kamu ingin latihan interaktif menulis berbagai bentuk link dengan umpan balik langsung, lesson links di Hyper Sheets menyediakan editor di browser, kamu mengetik, hasilnya langsung terlihat.

Jenis-Jenis Tujuan Link di HTML

Isi atribut href menentukan jenis link-nya: URL absolut untuk situs lain, URL relatif untuk halaman di situs sendiri, tanda pagar untuk bagian dalam halaman, mailto: untuk email, tel: untuk telepon, dan path file (plus atribut download) untuk unduhan. Tag-nya selalu a yang sama; yang berubah hanya alamat tujuannya. Bagian ini membedah semuanya.

URL Absolut vs URL Relatif

URL absolut adalah alamat lengkap: protokol, domain, dan path-nya ditulis semua. URL relatif hanya menulis path-nya, dan browser melengkapi sisanya berdasarkan alamat halaman yang sedang dibuka.

<!-- URL absolut: alamat lengkap -->
<a href="https://www.wikipedia.org/wiki/HTML">Artikel HTML di Wikipedia</a>

<!-- URL relatif terhadap root situs (diawali garis miring) -->
<a href="/blog/">Semua artikel blog</a>

<!-- URL relatif terhadap folder halaman saat ini -->
<a href="tentang.html">Tentang kami</a>

<!-- Naik satu folder dulu, baru masuk file -->
<a href="../index.html">Kembali ke beranda</a>

Kapan pakai yang mana? Aturan praktisnya:

Absolut, wajib untuk link ke situs lain, karena browser butuh tahu domain tujuannya.
Relatif, pilihan terbaik untuk link antar halaman di situs sendiri. Alasannya: portabilitas. Kalau situsmu pindah domain (misalnya dari situs-lama.com ke situs-baru.com), semua link relatif tetap jalan tanpa diubah satu pun. Link internal yang ditulis absolut harus diedit semua.

Link ke Bagian Tertentu Halaman (Anchor `#id`)

Kamu bisa membuat link yang melompat ke bagian tertentu dalam halaman, bukan cuma ke halaman lain. Caranya dua langkah: beri id pada elemen tujuan, lalu tulis href dengan tanda pagar diikuti id tersebut.

<!-- Langkah 1: tandai tujuannya dengan id -->
<h2 id="kontak">Hubungi Kami</h2>

<!-- Langkah 2: buat link menuju id itu -->
<a href="#kontak">Lompat ke bagian kontak</a>

Begitu diklik, browser langsung menggulung halaman ke elemen ber-id="kontak". Pola ini dipakai untuk daftar isi artikel panjang, tombol “kembali ke atas”, dan navigasi halaman landing satu layar.

Kamu bahkan bisa menggabungkannya dengan URL halaman lain, link di bawah ini membuka halaman berbeda dan langsung melompat ke bagian tertentu:

<a href="/tentang.html#tim">Kenalan dengan tim kami</a>

html {
  scroll-behavior: smooth;
}

Link Email (`mailto:`) dan Telepon (`tel:`)

Awalan mailto: membuat link yang membuka aplikasi email pengguna dengan alamat tujuan sudah terisi. Awalan tel: membuka dialer telepon, sangat berguna diakses dari HP.

<a href="mailto:[email protected]">Kirim email ke kami</a>

<!-- Bisa sekalian mengisi subjek (spasi ditulis %20) -->
<a href="mailto:[email protected]?subject=Tanya%20Kerja%20Sama">
  Email dengan subjek terisi
</a>

<!-- Nomor telepon: tulis dengan kode negara, tanpa spasi -->
<a href="tel:+6281234567890">Telepon kami</a>

Dua catatan praktis: pertama, mailto: hanya berfungsi mulus kalau pengguna punya aplikasi email yang terpasang dan terkonfigurasi, di komputer warnet atau browser tanpa akun email, kliknya bisa terasa “tidak terjadi apa-apa”. Kedua, untuk tel: selalu tulis nomor dalam format internasional (+62...) supaya bisa dihubungi dari mana pun.

Link Download File dengan Atribut `download`

Secara default, kalau href menunjuk ke file yang bisa ditampilkan browser (PDF, gambar, video), browser akan membukanya, bukan mengunduhnya. Atribut download mengubah perilaku itu: klik langsung memicu unduhan.

<!-- Buka PDF di tab (perilaku default) -->
<a href="/files/panduan.pdf">Baca panduan (PDF)</a>

<!-- Paksa unduh -->
<a href="/files/panduan.pdf" download>Unduh panduan</a>

<!-- Unduh dengan nama file khusus -->
<a href="/files/panduan.pdf" download="Panduan-BelajarWeb-2026.pdf">
  Unduh panduan (nama rapi)
</a>

Satu batasan penting: atribut download hanya dijamin bekerja untuk file dari domain yang sama dengan halamannya (same-origin). Untuk file dari domain lain, browser umumnya mengabaikan atribut ini demi keamanan dan kembali ke perilaku default.

Membuka Link di Tab Baru: target=“_blank” dan rel=“noopener”

Cara membuat link terbuka di tab baru adalah menambahkan atribut target="_blank" pada tag a, dan setiap kali memakainya, tambahkan juga rel="noopener". Yang pertama membuka tab baru; yang kedua menutup celah keamanan bernama reverse tabnabbing. Anggap keduanya satu paket.

<a href="https://situs-eksternal.com/" target="_blank" rel="noopener">
  Buka referensi ini di tab baru
</a>

Kenapa rel="noopener" penting? Tanpa itu, halaman yang dibuka di tab baru mendapat akses ke objek window.opener, referensi JavaScript ke tab asal yang membukanya. Halaman jahat bisa memanfaatkannya untuk mengganti alamat tab asalmu diam-diam, misalnya mengarahkannya ke halaman login palsu yang tampilannya meniru situs aslinya. Pengguna kembali ke tab lama, melihat “halaman login”, memasukkan password, dan datanya dicuri. Serangan ini disebut reverse tabnabbing, dan rel="noopener" mematikannya dengan memutus akses window.opener tersebut.

Kabar baiknya, browser-browser modern kini otomatis memberlakukan perilaku noopener pada semua target="_blank". Tapi menuliskannya secara eksplisit tetap praktik terbaik: melindungi pengguna browser lama, dan membuat niatmu terbaca jelas oleh developer lain (dan oleh dirimu sendiri enam bulan lagi).

Ada dua nilai rel lain yang sering muncul bersama dan layak kamu kenal:

rel="noreferrer", mencegah browser mengirim informasi referrer (alamat halaman asal) ke situs tujuan, dan otomatis mencakup efek noopener juga.
rel="nofollow", sinyal untuk mesin pencari bahwa kamu tidak memberikan “endorsement” ke link tersebut. Umumnya dipakai untuk link berbayar atau konten kiriman pengguna yang tidak kamu kurasi.

<a href="https://sponsor.com/" target="_blank" rel="noopener nofollow">
  Situs sponsor
</a>

Link Berupa Gambar dan Tombol

Hyperlink tidak harus berupa teks, bungkus tag img dengan tag a, dan gambar itu jadi bisa diklik. Prinsipnya sama untuk elemen visual lain: apa pun yang berada di antara tag pembuka dan penutup a menjadi area yang bisa diklik.

<a href="/">
  <img src="/logo.png" alt="Kembali ke beranda BelajarWeb" width="120" height="40">
</a>

Pola di atas adalah standar logo situs: klik logo, kembali ke beranda. Ada satu detail krusial di sana, atribut alt. Karena link ini tidak punya teks, alt gambar itulah yang menjadi “anchor text” bagi pembaca layar (screen reader) dan bagi mesin pencari. Tulis alt yang menjelaskan tujuan link-nya (“Kembali ke beranda BelajarWeb”), bukan sekadar deskripsi visual (“logo berwarna biru”). Selengkapnya soal menulis gambar yang benar ada di lesson images di Hyper Sheets.

Kebutuhan umum lainnya: link yang terlihat seperti tombol. Solusinya bukan mengubah tag, tapi mendandani a dengan CSS:

<a href="/daftar/" class="btn">Daftar Sekarang</a>

.btn {
  display: inline-block;      /* supaya padding vertikal bekerja penuh */
  padding: 12px 24px;
  background: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}
.btn:hover {
  background: #1d4ed8;
}

Perhatikan display: inline-block, karena a aslinya elemen inline, padding atas-bawah tidak akan mendorong elemen sekitarnya tanpa deklarasi ini. Hasilnya: secara visual tombol, secara semantik tetap link. Dan itu penting, kita bahas kenapa di bagian a vs button nanti.

Styling Link dengan CSS: Warna, Underline, dan Urutan LVHA

Link punya empat kondisi yang bisa di-styling lewat pseudo-class, :link, :visited, :hover, :active, dan urutan penulisannya di CSS harus mengikuti singkatan LVHA agar semuanya bekerja. Ditambah :focus untuk pengguna keyboard, lima selector ini adalah kotak peralatan lengkap untuk mendandani link.

Arti masing-masing kondisi:

Pseudo-class	Kapan aktif
`:link`	Link yang belum pernah dikunjungi
`:visited`	Link yang sudah pernah dikunjungi
`:hover`	Kursor sedang melayang di atas link
`:active`	Link sedang ditekan (antara klik dan lepas)
`:focus`	Link sedang menerima fokus keyboard (via tombol Tab)

Contoh lengkapnya, ditulis dalam urutan yang benar:

/* L-V-H-A: Link, Visited, Hover, Active */
a:link {
  color: #2563eb;
}
a:visited {
  color: #7c3aed;
}
a:hover,
a:focus {
  color: #1d4ed8;
  text-decoration-thickness: 2px;
}
a:active {
  color: #b91c1c;
}

Kenapa urutannya harus LVHA? Karena keempat selector itu punya specificity yang sama persis, sehingga yang menang adalah yang ditulis paling akhir. Kalau kamu menaruh a:hover sebelum a:visited, efek hover tidak akan pernah terlihat pada link yang sudah dikunjungi, deklarasi :visited menimpanya. Cara menghafalnya yang populer: LoVe, HAte. Konsep pseudo-class ini berlaku untuk banyak elemen lain juga; kalau mau mendalaminya, ada lesson pseudo-classes di Hyper Sheets dengan latihan langsung.

Tiga catatan penting saat mendandani link:

:visited sengaja dibatasi browser. Demi privasi (agar situs tidak bisa “membaca” riwayat browsing pengguna lewat CSS), hanya properti seputar warna yang boleh diubah pada :visited, kamu tidak bisa mengubah ukuran atau menyembunyikan elemennya.
Jangan hapus underline tanpa pengganti. text-decoration: none boleh saja, asal link tetap bisa dibedakan dari teks biasa dengan cara lain yang jelas, bukan cuma beda warna tipis. Pengguna dengan buta warna bisa tidak melihat bedanya sama sekali. Di dalam paragraf, underline tetap penanda paling aman.
Jangan matikan outline fokus. a:focus { outline: none } tanpa gaya pengganti membuat pengguna keyboard tersesat, mereka tidak tahu sedang berada di link mana. Kalau outline default dirasa kurang cocok dengan desain, ganti dengan gaya fokus lain yang sama jelasnya, jangan dihapus.

Anchor Text yang Baik: Aksesibilitas Sekaligus SEO

Anchor text yang baik adalah yang menjelaskan tujuan link-nya bahkan saat dibaca lepas dari kalimat sekitarnya, “lihat panduan Flexbox lengkap” jauh lebih baik daripada “klik di sini”. Ini bukan sekadar soal gaya menulis: anchor text deskriptif berdampak langsung ke aksesibilitas dan SEO sekaligus.

Bandingkan dua versi ini:

<!-- Kurang baik: tidak menjelaskan apa-apa -->
<p>Untuk panduan lengkapnya, <a href="/panduan/">klik di sini</a>.</p>

<!-- Baik: tujuan link terbaca jelas -->
<p>Selengkapnya ada di <a href="/panduan/">panduan lengkap belajar HTML</a>.</p>

Dari sisi aksesibilitas: pengguna pembaca layar sering menavigasi halaman dengan melompat dari link ke link, mendengarkan daftar anchor text-nya saja tanpa konteks kalimat. Bayangkan mendengar “klik di sini… klik di sini… baca selengkapnya… klik di sini”, tidak ada informasi sama sekali tentang ke mana masing-masing link menuju. Anchor text deskriptif membuat navigasi seperti ini benar-benar berfungsi. Topik ini dibahas lebih dalam di lesson accessibility di Hyper Sheets.

Dari sisi SEO: mesin pencari memakai anchor text sebagai petunjuk tentang isi halaman tujuan. Link dengan teks “panduan belajar HTML” memberi tahu Google bahwa halaman tujuannya membahas belajar HTML; teks “klik di sini” tidak memberi tahu apa-apa. Ironisnya, artikel yang sedang kamu baca ini pun mempraktikkan prinsip yang sama, perhatikan setiap link di dalamnya. Anchor text hanyalah satu dari beberapa sinyal on-page; sinyal penting lainnya seperti judul dan deskripsi halaman diatur lewat meta tags, yang bisa kamu pelajari di lesson meta tags di Hyper Sheets.

Sedikit tentang atribut title pada link, karena sering disalahpahami:

<a href="/glosarium/" title="Kumpulan istilah web development dan artinya">
  Glosarium
</a>

title memunculkan tooltip kecil saat kursor melayang di atas link. Terdengar berguna, tapi ada jebakannya: tooltip itu tidak muncul di layar sentuh (tidak ada kursor untuk melayang) dan tidak diakses konsisten oleh pembaca layar. Kesimpulannya: title boleh dipakai untuk informasi bonus yang tidak penting-penting amat, tapi jangan pernah menaruh informasi krusial hanya di title. Kalau informasinya penting, tulis di anchor text atau di kalimat sekitarnya.

Kapan Pakai Tag a, Kapan Pakai button?

Aturannya satu kalimat: a untuk navigasi (berpindah ke URL lain), button untuk aksi (menjalankan sesuatu di halaman ini). Kalau klik-nya mengubah alamat di address bar, itu link. Kalau klik-nya membuka modal, mengirim formulir, atau menyalakan dark mode, itu tombol.

<!-- Navigasi: pengguna berpindah halaman → pakai a -->
<a href="/harga/">Lihat paket harga</a>

<!-- Aksi: sesuatu terjadi di halaman ini → pakai button -->
<button type="button">Tampilkan password</button>

Kenapa perbedaan ini bukan sekadar formalitas? Karena browser dan teknologi asistif memperlakukan keduanya berbeda:

Interaksi keyboard beda. Link diaktifkan dengan tombol Enter; button diaktifkan dengan Enter dan Space. Pengguna keyboard punya ekspektasi ini dan bingung saat “link” tidak merespons Space padahal kelihatannya tombol.
Pembaca layar mengumumkannya beda. “Link, lihat paket harga” memberi tahu pengguna bahwa mengaktifkannya akan pindah halaman. “Tombol” menandakan aksi. Salah tag berarti memberi ekspektasi yang salah.
Link punya fitur bawaan browser. Klik tengah untuk buka tab baru, klik kanan untuk salin alamat, Ctrl+klik, simpan link, semua gratis dari tag a ber-href. Sebuah button (apalagi div ber-onclick) tidak punya satu pun dari itu.

Dari sini juga lahir dua larangan klasik:

<!-- Jangan: div bukan link ataupun tombol -->
<div onclick="location.href='/harga/'">Lihat paket harga</div>

<!-- Jangan: href="#" palsu untuk memicu JavaScript -->
<a href="#" onclick="bukaModal()">Buka modal</a>

div ber-onclick tidak bisa difokus keyboard, tidak dikenali sebagai link oleh pembaca layar, dan tidak punya fitur klik-tengah. Sementara a ber-href="#" adalah tombol yang menyamar: ia melompat ke atas halaman saat diklik dan berbohong kepada teknologi asistif. Keduanya punya solusi yang sama, pakai elemen yang semantiknya benar. Memilih tag berdasarkan makna, bukan tampilan, adalah inti dari semantic HTML; kalau konsep ini baru buatmu, lesson semantic HTML di Hyper Sheets tempat yang pas untuk mendalaminya.

Praktik: Membuat Kartu Nama Online dengan Berbagai Jenis Link

Mari praktikkan semua yang sudah dibahas dengan membuat satu halaman kartu nama online: ada navigasi anchor, link email, link telepon, tombol unduh CV, dan link sosial media yang terbuka di tab baru. Halaman kecil ini memakai hampir semua jenis link yang ada di artikel ini, salin, jalankan, lalu utak-atik.

Langkah 1: Struktur HTML

<body>
  <header>
    <nav class="menu">
      <a href="#tentang">Tentang</a>
      <a href="#kontak">Kontak</a>
    </nav>
  </header>

  <main>
    <section id="tentang">
      <h1>Budi Santoso</h1>
      <p>Front-end developer yang sedang belajar di
        <a href="https://learnhypersheets.com/" target="_blank" rel="noopener">
          Hyper Sheets</a>.
      </p>
      <a href="/files/cv-budi.pdf" download="CV-Budi-Santoso.pdf" class="btn">
        Unduh CV (PDF)
      </a>
    </section>

    <section id="kontak">
      <h2>Kontak</h2>
      <ul>
        <li><a href="mailto:[email protected]">[email protected]</a></li>
        <li><a href="tel:+6281234567890">+62 812-3456-7890</a></li>
        <li>
          <a href="https://github.com/budisantoso"
             target="_blank" rel="noopener">
            Portofolio kode di GitHub
          </a>
        </li>
      </ul>
      <a href="#tentang">Kembali ke atas</a>
    </section>
  </main>
</body>

Perhatikan keputusannya: menu memakai anchor #id karena semuanya satu halaman; email dan telepon memakai skema mailto: dan tel:; CV memakai download dengan nama file yang rapi; dan link keluar (Hyper Sheets, GitHub) memakai target="_blank" plus rel="noopener" karena pengunjung kemungkinan ingin kembali ke kartu nama.

Langkah 2: Styling Link-nya

html {
  scroll-behavior: smooth; /* lompatan anchor jadi halus */
}

/* Link di dalam teks: underline dipertahankan */
a {
  color: #2563eb;
}
a:visited {
  color: #7c3aed;
}
a:hover,
a:focus {
  color: #1d4ed8;
}

/* Link menu: tanpa underline, tapi ada pengganti saat hover/focus */
.menu a {
  text-decoration: none;
  font-weight: 600;
  margin-right: 16px;
}
.menu a:hover,
.menu a:focus {
  text-decoration: underline;
}

/* Link yang didandani jadi tombol */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}
.btn:visited {
  color: white; /* jaga kontras: jangan biarkan ungu :visited merusak tombol */
}
.btn:hover,
.btn:focus {
  background: #1d4ed8;
}

Tiga hal yang layak digarisbawahi dari CSS di atas. Pertama, urutan selector mengikuti LVHA di setiap kelompok. Kedua, underline di link menu memang dihapus, tapi konteksnya navigasi (pengguna sudah berekspektasi itu link) dan ada pengganti yang jelas saat hover dan focus. Ketiga, .btn:visited sengaja di-set putih; tanpa itu, link tombol yang sudah diklik akan berubah ungu dan merusak tampilannya.

Kalau kamu ingin melanjutkan halaman kecil ini jadi website utuh yang online, lengkap dengan struktur file dan cara deploy gratis, lanjutkan dengan panduan membuat website pertama.

Kesalahan Umum Saat Membuat Hyperlink

Kesalahan paling sering seputar hyperlink: lupa menulis href, memakai target="_blank" tanpa rel="noopener", anchor text yang tidak deskriptif, menghapus underline tanpa pengganti, dan memakai div ber-onclick padahal yang dibutuhkan adalah link. Berikut daftarnya beserta cara memperbaikinya, cek satu per satu terhadap kode yang pernah kamu tulis.

1. Tag a tanpa href

<!-- Terlihat seperti link, tapi bukan -->
<a>Halaman berikutnya</a>

2. target=“_blank” tanpa rel=“noopener”

Sudah dibahas panjang di atas: tanpa rel="noopener", halaman tujuan bisa membajak tab asal lewat window.opener (reverse tabnabbing). Browser modern sudah menambalnya secara implisit, tapi biasakan menulis eksplisit, gratis, satu atribut, dan menutup celah di browser lama.

3. Anchor text “klik di sini”

Selain buruk untuk pengguna pembaca layar dan tidak memberi sinyal apa pun ke mesin pencari, “klik di sini” juga memaksa semua pembaca memindai kalimat sekitarnya untuk tahu link itu ke mana. Tulis ulang kalimatnya supaya tujuan link menjadi anchor text-nya.

4. Menghilangkan underline tanpa pengganti affordance

text-decoration: none pada link di dalam paragraf, tanpa penanda pengganti yang jelas, membuat link tidak bisa dibedakan dari teks biasa, apalagi bagi pengguna dengan gangguan penglihatan warna. Kalau desain menuntut tanpa underline, pastikan ada pembeda lain yang kuat, dan kembalikan underline saat :hover dan :focus.

5. div + onclick padahal butuh link

<!-- Jangan begini -->
<div class="card" onclick="location.href='/artikel/hyperlink/'">
  Baca artikel
</div>

Semua masalah aksesibilitas dan hilangnya fitur bawaan browser (klik tengah, salin alamat, dan kawan-kawan) sudah dibahas di bagian a vs button. Versi benarnya sederhana: bungkus dengan a ber-href, styling tetap bebas lewat CSS.

6. Link di dalam link

HTML melarang tag a bersarang di dalam a lain, hasil render-nya tidak terprediksi karena browser akan “memecah” struktur itu semaunya. Kasus umumnya: membuat seluruh card bisa diklik dengan membungkusnya pakai a, padahal di dalam card ada link lain. Solusinya: rancang ulang supaya hanya ada satu link, atau biarkan hanya judul card yang menjadi link.

7. Lupa menguji dengan keyboard

Kesalahan meta yang menaungi banyak kesalahan lain: tidak pernah mencoba menavigasi halamannya sendiri dengan tombol Tab. Coba sekarang di halaman buatanmu, tekan Tab berulang kali. Apakah setiap link bisa dicapai? Apakah terlihat jelas link mana yang sedang fokus? Dua menit pengujian ini menangkap sebagian besar masalah di daftar ini.

Cek Pemahaman

Kamu membuat link ke situs lain yang terbuka di tab baru. Atribut apa yang wajib ditambahkan bersama target=_blank demi keamanan?

FAQ Seputar Hyperlink

Hyperlink adalah apa?

Hyperlink adalah teks atau gambar di halaman web yang bisa diklik untuk berpindah ke tujuan lain: halaman web lain, bagian tertentu dalam halaman, file, alamat email, atau nomor telepon. Di HTML, hyperlink dibuat dengan tag a dan atribut href yang berisi alamat tujuannya.

Apa fungsi tag a di HTML?

Tag a (anchor) berfungsi membuat hyperlink, menghubungkan halaman yang sedang dibuka ke tujuan lain. Teks atau gambar di antara tag pembuka dan penutupnya menjadi area yang bisa diklik, dan atribut href menentukan ke mana pengguna dibawa saat mengkliknya.

Apa itu href?

href (singkatan dari hypertext reference) adalah atribut pada tag a yang menyimpan alamat tujuan link. Isinya bisa URL lengkap (https://...), path relatif (/blog/), anchor dalam halaman (#kontak), alamat email (mailto:...), atau nomor telepon (tel:...). Tanpa href, tag a tidak berfungsi sebagai link.

Bagaimana cara membuat link terbuka di tab baru?

Tambahkan atribut target="_blank" pada tag a, dan sertakan juga rel="noopener" untuk keamanan: <a href="https://contoh.com" target="_blank" rel="noopener">teks link</a>. Tanpa rel="noopener", halaman tujuan bisa mendapat akses ke tab asal lewat window.opener dan menyalahgunakannya (reverse tabnabbing).

Apa beda link dan hyperlink?

Secara praktis tidak ada bedanya, keduanya merujuk hal yang sama. “Hyperlink” adalah istilah teknis lengkapnya (dari kata hypertext), sedangkan “link” adalah sebutan sehari-harinya. Dalam dokumentasi HTML kamu juga akan menemui istilah “anchor”, yang merujuk pada tag a pembuat hyperlink itu sendiri.

Bagaimana cara membuat link ke bagian tertentu halaman?

Dua langkah: beri atribut id pada elemen tujuan (misalnya <h2 id="kontak">), lalu buat link dengan href berisi tanda pagar plus id itu: <a href="#kontak">Ke bagian kontak</a>. Untuk melompat ke bagian tertentu di halaman lain, gabungkan URL-nya: href="/tentang.html#kontak". Tambahkan CSS scroll-behavior: smooth supaya lompatannya mulus.

Langkah Selanjutnya

Sekarang kamu sudah memegang semua bagian pentingnya: anatomi tag a dan href, berbagai jenis tujuan link dari URL relatif sampai tel:, paket target="_blank" plus rel="noopener", styling dengan urutan LVHA, sampai garis batas antara a dan button. Satu tag yang tadinya terlihat remeh ternyata menyimpan keputusan desain, keamanan, dan aksesibilitas sekaligus, dan sekarang kamu bisa mengambil semua keputusan itu dengan sadar.

Cara terbaik mengunci pemahaman ini adalah langsung praktik. Buka kembali lesson links yang disebut di awal artikel dan kerjakan latihannya sampai tuntas, lalu lanjutkan menyusuri materi HTML lengkap dari dasar, link hanyalah satu dari puluhan lesson yang tersusun berurutan di sana. Selamat ngoding!