Halaman panduan yang panjang tidak enak dibaca dengan menggulir terus dari atas. Pengunjung ingin melompat langsung ke bagian yang ia butuhkan — daftar harga, cara seduh, atau kontak — tanpa memuat halaman baru. HTML menyelesaikannya dengan fragment identifier: tanda kres yang kita tempel di ujung URL untuk menunjuk satu elemen tertentu di dalam halaman.

Fragment Identifier #

Aturan fragment: nilai href yang diawali # diikuti sebuah id membuat browser melompat ke elemen pemilik id tersebut — di halaman yang sama, tanpa permintaan baru ke server. Syaratnya satu: elemen target harus memasang atribut id bernilai sama persis. Contoh berikut memasang daftar isi mini di atas tiga bagian halaman:

html 
<h1>Panduan Kopi Kedai Siti</h1>

<nav>
  <ul>
    <li><a href="#asal-biji">Asal Biji</a></li>
    <li><a href="#cara-seduh">Cara Seduh</a></li>
    <li><a href="#harga">Harga</a></li>
  </ul>
</nav>

<h2 id="asal-biji">Asal Biji</h2>
<p>Biji arabika dari dataran tinggi Gayo dan Toraja.</p>

<h2 id="cara-seduh">Cara Seduh</h2>
<p>Seduh selama 20 detik untuk rasa paling seimbang.</p>

<h2 id="harga">Harga</h2>
<p>Rp18.000 per gelas untuk ukuran reguler.</p>

Hasil Render: ketiga teks pada daftar isi tampil sebagai link; satu klik pada “Cara Seduh” menggulirkan halaman sampai heading Cara Seduh berada di tepi atas jendela browser. Mari kita telaah:

  1. Nilai link (#cara-seduh): fragment — tanda kres menandai “cari elemen di halaman ini”, dan cara-seduh adalah id yang dicari.
  2. Atribut id="cara-seduh" pada h2: target lompatan; tulisannya harus sama persis dengan nilai fragment, termasuk huruf dan tanda hubungnya.
  3. Ketiga id: masing-masing unik dalam satu halaman — dua elemen ber-id sama membuat fragment hanya menemukan yang pertama.
  4. Pengguliran otomatis: browser sendiri yang menggulir jendela sampai target terlihat; kita tidak menulis satu baris kode pun untuk itu, dan alamat pada address bar bertambah menjadi ...#cara-seduh.

Lompat ke Atas dengan #top #

HTML memberi satu pengecualian istimewa: fragment #top. Jika tidak ada elemen ber-id top di halaman, browser menggulir kembali ke posisi paling atas dokumen. Pola ini menjadi cara baku memasang link “kembali ke atas” di bagian bawah halaman panjang:

html 
<p><a href="#top">Kembali ke atas</a></p>

Kombinasi Halaman dan Fragment #

Fragment juga bisa ditempel pada nama berkas: browser memuat halaman tujuan terlebih dahulu, lalu langsung menggulir ke elemen yang ditunjuk. Nilai tentang.html#kontak berarti “buka tentang.html, lalu lompat ke elemen ber-id kontak”:

html 
<p>Alamat dan peta kedai ada di
<a href="tentang.html#kontak">halaman tentang, bagian kontak</a>.</p>

Pola ini menghubungkan bab-bab sebelumnya: URL relatif untuk berpindah berkas, fragment untuk memilih bagiannya.

Ringkasan #

  • Fragment #id membuat link melompat ke elemen ber-id sama di halaman yang sama.
  • Elemen target wajib memasang id unik, ditulis sama persis dengan nilai fragment.
  • Browser menggulir jendela otomatis sampai target terlihat.
  • #top menggulir ke atas halaman; berkas.html#id memuat berkas lalu langsung melompat.

Link tidak selalu menuju halaman. Dua skema berikutnya menyerahkan tugasnya ke aplikasi lain — email dan telepon.