Nav

Pengunjung berpindah halaman lewat tautan, dan tautan tersedia di banyak tempat: menu di atas, breadcrumb di dalam halaman, deretan tautan di footer, hingga link di tengah paragraf. Elemen nav menandai kelompok tautan yang berperan sebagai navigasi utama, bukan sekadar kumpulan tautan. Chapter ini membahas batasan makna nav, pola penulisannya dengan list, dan cara menangani situs yang memuat lebih dari satu nav.

Makna nav Menurut Spesifikasi #

WHATWG mendefinisikan nav sebagai section halaman yang berisi tautan ke halaman lain atau ke bagian dalam halaman. Spesifikasi segera menambahkan batasan penting: tidak semua kelompok tautan perlu dibungkus nav. Elemen ini ditujukan untuk blok navigasi besar, sedangkan tautan di dalam paragraf tetap ditulis apa adanya. Peran navigation yang melekat pada nav membuat pembaca layar dapat melompat antar blok navigasi, sehingga menandai blok yang tepat justru menjaga lompatan itu bermakna.

Kapan Link Tidak Perlu nav #

Kriteria yang mudah dipakai: bila kelompok tautan itu dapat diberi nama navigasi (misalnya “menu utama” atau “breadcrumb”), nav cocok; bila tautan muncul sesuai alur tulisan, nav justru menambah derau bagi pembaca layar.

nav Lebih dari Satu #

Situs nyata hampir selalu memuat beberapa blok navigasi. Spesifikasi mengizinkan nav sebanyak yang dibutuhkan; tugas kita adalah memberi label agar pembaca layar dapat membedakannya. Cara paling sederhana adalah atribut aria-label, yang memberi nama pada elemen tanpa menampilkan teks visual — kita menyentuhnya secukupnya karena pembahasan penuhnya menunggu section Accessibility. Pada contoh di bawah, tiga nav diberi label berbeda: Navigasi utama, Breadcrumb, dan Navigasi footer.

Pola nav + ul + li #

Menu situs pada dasarnya berupa daftar item setara, sehingga pola dari section Lists berlaku penuh: ul berisi beberapa li, dan setiap li memuat satu a. Breadcrumb memakai ol karena jalurnya berurutan, dari beranda menuju kategori, lalu ke halaman detail. Struktur ini menegaskan kembali prinsip semantic HTML: makna daftarnya tetap terbaca meskipun CSS kelak menghapus bullet dan nomornya.

Contoh Menu Situs #

Berkas berikut memuat tiga blok navigasi pada halaman detail produk Kedai Kopi Siti:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kedai Kopi Siti</title>
</head>
<body>
  <header>
    <p>Kedai Kopi Siti</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="galeri.html">Galeri</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li>Kopi Susu Gula Aren</li>
      </ol>
    </nav>
    <h1>Kopi Susu Gula Aren</h1>
    <p>Perasan gula aren asli dipadukan dengan espresso dan susu segar. Tersedia ukuran reguler dan besar.</p>
  </main>
  <footer>
    <nav aria-label="Navigasi footer">
      <ul>
        <li><a href="tentang.html">Tentang Kami</a></li>
        <li><a href="syarat.html">Syarat Layanan</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 Kedai Kopi Siti</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Nama kedai dan menu empat tautan berbullet di bagian atas
  - Breadcrumb bernomor "Beranda / Menu / Kopi Susu Gula Aren"
    diikuti judul produk dan satu paragraf
  - Dua tautan footer berbullet serta baris hak cipta di bawah

Mari kita telaah peran setiap blok:

1. Baris 11-18 (nav utama): menu empat tautan ditulis sebagai ul; atribut aria-label="Navigasi utama" menamai blok ini agar terbedakan dari nav lainnya.
2. Baris 21-27 (nav breadcrumb): jalur navigasi memakai ol karena urutannya bermakna; item terakhir ditulis tanpa tautan karena berupa halaman saat ini.
3. Baris 32-37 (nav footer): dua tautan sekunder tetap dibungkus nav berlabel karena membentuk blok navigasi tersendiri, bukan sekadar dua tautan lepas.
4. Baris 28-29 (h1 dan p): konten inti halaman berada setelah breadcrumb, dan keseluruhannya dibungkus main dari chapter sebelumnya.

Dengan tiga nav berlabel, pembaca layar mendengar tiga blok bernama yang dapat dilompati satu per satu, alih-alih deretan tautan tanpa nama. Chapter berikutnya berpindah dari navigasi ke isi: pasangan article dan section, dua elemen yang paling sering saling dipertukarkan.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen nav
• MDN Web Docs — Learn: Structuring documents
• WHATWG — HTML Living Standard: Sections

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kedai Kopi Siti</title>
</head>
<body>
  <header>
    <p>Kedai Kopi Siti</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="galeri.html">Galeri</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li>Kopi Susu Gula Aren</li>
      </ol>
    </nav>
    <h1>Kopi Susu Gula Aren</h1>
    <p>Perasan gula aren asli dipadukan dengan espresso dan susu segar. Tersedia ukuran reguler dan besar.</p>
  </main>
  <footer>
    <nav aria-label="Navigasi footer">
      <ul>
        <li><a href="tentang.html">Tentang Kami</a></li>
        <li><a href="syarat.html">Syarat Layanan</a></li>
      </ul>
    </nav>
    <p>&copy; 2025 Kedai Kopi Siti</p>
  </footer>
</body>
</html>