Halaman yang panjang — panduan, dokumen kebijakan, atau artikel dengan banyak bagian — memaksa pengunjung menggulir bolak-balik untuk mencari satu bagian tertentu. HTML menyediakan jalan pintas berupa fragment identifier: tanda # diikuti sebuah nama di akhir URL, yang memerintahkan browser menggulir langsung ke bagian tersebut. Pada Chapter ini kita membuat target dengan atribut id, menulis link fragment, menggabungkan fragment dengan alamat halaman lain, serta menutup halaman panjang dengan link kembali ke atas.

Fragment Identifier dan id #

Fragment identifier adalah bagian URL setelah tanda #, misalnya #jam pada panduan.html#jam. Browser memperlakukannya sebagai perintah: setelah halaman terbuka, browser mencari elemen dengan id yang sama dengan nilai fragment, lalu menggulir halaman hingga elemen itu berada di bagian atas layar. Nilai yang dicocokkan berasal dari atribut id, global attribute yang dapat dipasang pada semua elemen HTML.

Membuat navigasi internal berarti bekerja dua arah. Sisi pertama adalah target: beri id pada elemen yang akan dituju. Sisi kedua adalah link: tulis href berupa tanda # diikuti nama id tersebut:

html 
<h2 id="jam">Jam Buka</h2>
html 
<a href="#jam">Lihat jam buka</a>

Output yang Dihasilkan:

text 
Browser menampilkan link "Lihat jam buka"; klik menggulir halaman hingga
heading "Jam Buka" berada di bagian atas layar.

Dua aturan yang wajib kita jaga: nilai id tidak boleh mengandung spasi, dan nilai id harus unik dalam satu dokumen. Bila dua elemen ber-id sama, browser menunjuk elemen pertama saja, sedangkan validator menandai duplikat tersebut sebagai galat.

Kombinasi Halaman dan Fragment #

Fragment tidak terbatas pada halaman yang sedang dibuka. Kita dapat melekatkannya pada alamat halaman lain, sehingga link membuka dokumen baru sekaligus menggulir ke bagian tertentu:

html 
<a href="panduan.html#jam">Jam buka pada panduan</a>

Pola ini sering kita temui pada daftar isi yang menghubungkan beberapa dokumen sekaligus, misalnya halaman indeks yang merangkum isi tiga panduan berbeda. Bagian panduan.html menentukan dokumen mana yang terbuka; bagian #jam menentukan letak bagian yang ditonjolkan setelah halaman selesai dimuat.

href="#top" dan Fragment Kosong #

Standar HTML menetapkan satu nilai fragment istimewa: #top. Bila tidak ada elemen ber-id top, fragment #top tetap mengembalikan tampilan ke awal dokumen — perilaku yang pas untuk link “kembali ke atas” tanpa perlu menandai elemen apa pun. Perlu dibedakan dengan href="#": fragment kosong yang tidak menunjuk elemen manapun. Penulisan tersebut tetap sah di mata validator, tetapi karena tidak membawa maksud target, gunakan #top atau id konkret ketika tujuan kita memindahkan tampilan.

Mengatur Perilaku Gulir #

Secara bawaan, browser memindahkan tampilan seketika: satu saat halaman berada di puncak, saat berikutnya langsung pada bagian tujuan. Properti CSS scroll-behavior mengubah lompatan itu menjadi guliran halus:

css Guliran halus untuk seluruh fragment 
html {
  scroll-behavior: smooth;
}

CSS baru akan kita pelajari pada section tersendiri; untuk saat ini, baris di atas cukup disalin ke dalam dokumen latihan bila ingin menguji efeknya. Tanpa CSS pun seluruh navigasi internal tetap bekerja, hanya saja perpindahannya tidak dianimasikan.

Contoh Lengkap: Halaman dengan Daftar Isi #

File berikut menyatukan seluruh pola di atas: sebuah panduan warung dengan daftar isi di puncak halaman dan link kembali ke atas pada tiap bagian:

html navigasi-internal.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panduan Warung Siti</title>
</head>
<body>
  <h1>Panduan Warung Siti</h1>
  <p>Daftar isi:</p>
  <ul>
    <li><a href="#menu">Menu andalan</a></li>
    <li><a href="#jam">Jam buka</a></li>
    <li><a href="#alamat">Alamat</a></li>
  </ul>
  <h2 id="menu">Menu andalan</h2>
  <p>Soto ayam dan es teh manis menjadi pesanan yang paling sering dipesan
    pengunjung.</p>
  <p><a href="#top">Kembali ke atas</a></p>
  <h2 id="jam">Jam buka</h2>
  <p>Warung melayani pembeli setiap hari mulai pukul 07.00 hingga 20.00.</p>
  <p><a href="#top">Kembali ke atas</a></p>
  <h2 id="alamat">Alamat</h2>
  <p>Jl. Melati No. 10, Bandung.</p>
  <p><a href="#top">Kembali ke atas</a></p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Judul "Panduan Warung Siti" dengan daftar isi tiga link
  - Klik satu item daftar isi menggulir halaman ke bagian terkait
  - Link "Kembali ke atas" mengembalikan tampilan ke puncak halaman

Mari kita telaah mekanismenya baris demi baris:

  1. Baris 11-15 (daftar isi): tiga link fragment ber-href #menu, #jam, dan #alamat; tidak ada nama file karena link dan tujuannya berada pada halaman yang sama.
  2. Baris 16, 20, 23 (h2 ber-id): setiap heading memuat satu id yang persis sama dengan salah satu fragment di daftar isi.
  3. Baris 19, 22, 25 (link #top): fragment istimewa ini mengembalikan tampilan ke puncak dokumen meskipun tidak ada elemen ber-id top.

Lompatan tadi seluruhnya bekerja di dalam satu dokumen. Chapter berikutnya memperbesar skalanya: menyusun beberapa halaman menjadi satu situs yang saling terhubung lewat menu navigasi.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

navigasi-internal.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Panduan Warung Siti</title>
</head>
<body>
  <h1>Panduan Warung Siti</h1>
  <p>Daftar isi:</p>
  <ul>
    <li><a href="#menu">Menu andalan</a></li>
    <li><a href="#jam">Jam buka</a></li>
    <li><a href="#alamat">Alamat</a></li>
  </ul>
  <h2 id="menu">Menu andalan</h2>
  <p>Soto ayam dan es teh manis menjadi pesanan yang paling sering dipesan
    pengunjung.</p>
  <p><a href="#top">Kembali ke atas</a></p>
  <h2 id="jam">Jam buka</h2>
  <p>Warung melayani pembeli setiap hari mulai pukul 07.00 hingga 20.00.</p>
  <p><a href="#top">Kembali ke atas</a></p>
  <h2 id="alamat">Alamat</h2>
  <p>Jl. Melati No. 10, Bandung.</p>
  <p><a href="#top">Kembali ke atas</a></p>
</body>
</html>