Setiap halaman web yang pernah kita kunjungi saling terhubung lewat satu elemen yang sama: a. Nama resminya anchor element, atau elemen jangkar, dan dialah yang membuat HTML layak disebut Hypertext — teks yang menghubungkan teks lain. Sebelum mengatur ke mana link membawa pengunjung, kita perlu mengenal anatomi elemen ini lebih dulu: pembuka, isi, penutup, dan apa yang terjadi ketika atribut href tidak ditulis.

a: Elemen Jangkar #

Aturan elemen a: menandai satu bagian kecil dari halaman — teks, gambar, atau keduanya — yang bisa diaktifkan pengunjung untuk menuju sumber lain. Sumber itu ditentukan atribut href, sedangkan isi elemen menjadi link text, yaitu teks yang tampil dan diklik pengunjung:

html 
<p>Siti menulis resep baru di <a href="https://example.com/resep-kopi">blog kedainya</a>.</p>

Hasil Render:

Pada hasil render, teks “blog kedainya” tampil sebagai link — biru dan bergaris bawah menurut gaya bawaan browser. Mari kita telaah:

  1. Tag pembuka (<a href="...">): memulai link sekaligus memasang atribut href berisi alamat tujuan — kekuatan penuh elemen a ditentukan oleh atribut ini.
  2. Isi (blog kedainya): link text — inilah yang dilihat, dibaca, dan diklik pengunjung; ganti isinya dan tujuannya tetap sama.
  3. Tag penutup (</a>): menutup area yang bisa diklik; teks setelah penutup kembali menjadi teks biasa.

Aturan isi a: semua elemen inline boleh ditaruh di dalamnya — strong, em, code, sampai img. Link text yang mengandung elemen inline tetap dihitung satu kesatuan klik:

html 
<p><a href="menu.html">Lihat <strong>menu unggulan</strong> minggu ini</a> sebelum berkunjung.</p>

Kedua potongan itu — teks biasa dan teks dalam strong — sama-sama berada di dalam area klik, karena strong diletakkan sebelum tag penutup </a>. Kalau strong tertukar posisi dengan penutup, penekanan justru keluar dari link dan hanya sebagian teks yang bisa diklik.

a Tanpa href: Placeholder #

Aturan pengecualian: elemen a tanpa atribut href tetap sah, tetapi turun kelas menjadi placeholder — tampil seperti teks biasa, tidak bisa diklik, dan tidak masuk ke urutan fokus keyboard:

html 
<nav>
  <ul>
    <li><a href="index.html">Beranda</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a>Galeri (segera)</a></li>
  </ul>
</nav>

Pola ini berguna untuk item menu yang tujuannya belum tersedia. Bandingkan dua li terakhir: item “Menu” membawa pengunjung ke berkas menu.html, sedangkan “Galeri (segera)” sekadar menahan tempat tanpa perilaku apa pun.

Ringkasan #

  • Elemen a adalah anchor: menandai area yang bisa diaktifkan untuk menuju sumber lain.
  • Isi elemen menjadi link text dan boleh memuat elemen inline lain.
  • Tanpa href, elemen a menjadi placeholder non-interaktif.
  • Kekuatan link — ke mana ia membawa — sepenuhnya ditentukan atribut href.

Atribut href itu begitu penting sampai layak mendapat chapter sendiri: bentuk nilainya menentukan bukan hanya tujuan, tetapi juga perilaku browser saat link diklik.