Navigasi Antarhalaman

Situs nyata hampir selalu terdiri atas beberapa halaman: beranda, halaman tentang, kontak, dan bagian-bagian lain. Menu navigasi yang menyatukan semuanya pada dasarnya hanyalah kumpulan elemen a yang tertata dalam sebuah daftar. Pada Chapter ini kita menyusun situs kecil berisi tiga halaman, menata foldernya dengan satu subdirektori, menghubungkan halaman-halaman itu dengan relative path antar folder, lalu membungkus menu tersebut dengan elemen nav.

Merancang Situs Tiga Halaman #

Rancangan kita berangkat dari struktur folder berikut:

situs-budi/
├── index.html
├── tentang.html
├── kontak.html
└── artikel/
    └── index.html

File index.html berperan sebagai beranda. Browser dan server umumnya menjadikan nama ini halaman bawaan: ketika pengunjung membuka alamat folder tanpa nama file, index.html yang ditampilkan. Folder artikel menampung subhalaman berisi index.html miliknya sendiri; letak bersarang inilah yang membuat kita perlu relative path antar folder, materi yang telah kita pelajari pada Chapter sebelumnya.

Menu Navigasi dengan nav dan ul #

Menu situs pada umumnya ditulis sebagai daftar tak berurut (ul) yang setiap itemnya memuat satu link, lalu dibungkus elemen nav. Penulisan demikian menguntungkan dua pihak sekaligus: browser dan screen reader memahami bahwa deretan link itu berperan sebagai navigasi utama, sedangkan kita memperoleh struktur daftar yang rapi untuk ditata dengan CSS kelak. Section Semantic HTML membahas elemen nav lebih dalam; untuk saat ini cukup ikuti polanya:

<nav>
  <ul>
    <li><a href="index.html">Beranda</a></li>
    <li><a href="tentang.html">Tentang</a></li>
    <li><a href="kontak.html">Kontak</a></li>
    <li><a href="artikel/index.html">Artikel</a></li>
  </ul>
</nav>

Perhatikan entri terakhir: menuju halaman di dalam subdirektori berarti menuliskan nama folder diikuti garis miring lalu nama filenya.

Relative Path Antar Folder #

Menu yang sama perlu dituliskan berbeda pada setiap halaman, karena relative URL selalu dihitung dari letak file yang memuatnya. Tabel berikut merangkum penulisan menu untuk dua posisi dalam rancangan kita:

Dari dalam folder artikel, setiap path diawali ../ untuk naik satu tingkat kembali ke akar folder. Satu poin kecil yang menyelamatkan banyak jam kerja:

Contoh Lengkap dalam Satu File #

File berikut adalah beranda situs contoh. Simpan dengan nama index.html di dalam folder situs-budi, lengkapi dua file saudaranya (tentang.html dan kontak.html dapat berupa salinan sederhana), lalu coba jalankan menu navigasinya:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Situs Budi</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="tentang.html">Tentang</a></li>
      <li><a href="kontak.html">Kontak</a></li>
      <li><a href="artikel/index.html">Artikel</a></li>
    </ul>
  </nav>
  <h1>Selamat datang di situs Budi</h1>
  <p>Situs latihan ini memuat catatan belajar HTML beserta artikel singkat.</p>
  <p>Mulai perkenalan dari <a href="tentang.html">halaman tentang</a>.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Menu navigasi berisi empat butir daftar: Beranda, Tentang, Kontak,
    Artikel
  - Judul besar "Selamat datang di situs Budi"
  - Dua paragraf sambutan, salah satunya memuat link ke halaman tentang

Mari kita telaah bagian yang menentukan:

1. Baris 9-16 (elemen nav dengan ul): menu ditandai sebagai navigasi utama; setiap li memuat satu a dengan href menuju file di situs sendiri.
2. Baris 14 (artikel/index.html): path masuk subdirektori; browser menggabungkannya dengan alamat halaman saat ini yang berada di akar folder.
3. Baris 19 (link dalam paragraf): navigasi tidak harus berada di menu; link teks di dalam konten menghubungkan halaman dengan cara yang sama.

Dengan tiga halaman saling terhubung, kita telah memiliki situs yang utuh dalam bentuk paling dasar. Menu tadi membuka halaman pada tab yang sama; kapan link layak dibuka di tab baru beserta atribut keamanannya, kita bahas pada Chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen nav
• MDN Web Docs — Creating links
• WHATWG — HTML Living Standard: Elemen nav

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Situs Budi</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="tentang.html">Tentang</a></li>
      <li><a href="kontak.html">Kontak</a></li>
      <li><a href="artikel/index.html">Artikel</a></li>
    </ul>
  </nav>
  <h1>Selamat datang di situs Budi</h1>
  <p>Situs latihan ini memuat catatan belajar HTML beserta artikel singkat.</p>
  <p>Mulai perkenalan dari <a href="tentang.html">halaman tentang</a>.</p>
</body>
</html>