Situs yang tumbuh akan menimbun link penting di banyak tempat: menu di kepala halaman, daftar isi di tengah artikel, deretan tautan di kaki halaman. HTML memberi satu elemen untuk menandai kelompok link yang benar-benar berperan sebagai navigasi: nav. Elemen ini tidak mengubah tampilan apa pun — ia memberi tanda semantik bahwa di sinilah blok navigasi berada, dan tanda itu dibaca oleh pembaca layar serta alat bantu lain.

Elemen nav #

Aturan nav: elemen ini membungkus blok navigasi utama — kumpulan link penting untuk menjelajahi situs atau halaman. Mekanismenya: pembaca layar umumnya menyediakan cara melompat langsung ke elemen nav pertama, sehingga pengunjung yang tidak melihat layar bisa mencapai menu tanpa menelusuri seluruh halaman. Pola klasiknya memadukan tiga elemen yang sudah kita kenal — nav, ul, dan a:

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

Hasil Render: empat teks link tersusun sebagai daftar bertitik — gaya bawaan ul; elemen nav sendiri tidak menambahkan tampilan apa pun. Mari kita telaah:

  1. nav sebagai pembungkus: menandai seluruh blok sebagai area navigasi — inilah sinyal yang ditangkap pembaca layar.
  2. ul di dalam nav: menu adalah daftar tujuan, jadi dipadankan dengan elemen daftar; strukturnya juga gampang ditata CSS, misalnya mengubah deret menurun menjadi baris mendatar.
  3. li per item: satu item menu per li — penambahan atau pengurangan menu tinggal menambah atau membuang satu li.

Kapan Tidak Memakai nav #

Tanda nav menjadi berharga justru karena tidak dipasang di mana-mana. Tiga kelompok link berikut biasanya tidak memakai nav: deretan tautan di kaki halaman (kebijakan privasi, media sosial), link yang tumbuh di dalam paragraf, dan daftar tautan iklan atau rujukan. Alasannya sama — melompati blok itu tidak membantu pengunjung; nav sebaiknya disisakan untuk blok navigasi utama.

Dua pemakaian yang memang layak nav:

html 
<nav>
  <h2>Daftar Isi</h2>
  <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>

Contoh ini adalah in-page nav — navigasi dalam satu halaman lewat fragment, seperti dipraktikkan di chapter Link ke Bagian Halaman. Berbeda dari menu situs di contoh pertama, isinya menunjuk bagian-bagian halaman, bukan berkas lain. Keduanya sah memakai nav karena keduanya memang alat menjelajah.

Ringkasan #

  • nav membungkus blok navigasi utama situs atau halaman; ia tidak mengubah tampilan.
  • Pola klasik: nav membungkus ul, satu item menu per li, satu link per item.
  • Tautan kaki halaman dan link dalam paragraf biasanya tidak perlu nav.
  • Beberapa nav diperbolehkan — beri aria-label pembeda.

Satu blok nav pun belum menjadi navigasi situs — yang menentukan adalah konsistensinya di seluruh halaman, materi chapter berikutnya.