Cara Membuat Navigasi Website dengan HTML: Tag nav, ul, li, dan Anchor yang Terstruktur
Daftar Isi
Navigasi website merupakan kumpulan tautan yang membantu pengguna berpindah ke halaman atau bagian penting dari sebuah situs. Karena Anda sudah mengenal list, link, dan elemen semantik HTML, tahap berikutnya adalah menyusun ketiganya menjadi struktur navigasi yang mempunyai makna jelas. Pola yang sangat umum adalah menggunakan elemen <nav> sebagai penanda area navigasi, <ul> sebagai daftar tautan, <li> untuk setiap item, dan <a> sebagai tautan yang benar-benar dapat diikuti. Hubungan tersebut lebih penting daripada tampilan visual: HTML menentukan struktur dan tujuan konten, sedangkan pengaturan horizontal, warna, jarak, atau menu responsif umumnya menjadi tanggung jawab CSS dan, pada pola interaktif tertentu, JavaScript. Tutorial ini berfokus pada struktur HTML terlebih dahulu sehingga hasil dasarnya tetap berguna meskipun belum diberi CSS. Praktik dapat dilakukan hanya dengan editor teks dan browser modern; tidak diperlukan framework, package manager, library, server, maupun dependency eksternal. Kita akan menggunakan satu file index.html dan beberapa tautan fragment agar seluruh contoh dapat diuji secara lokal.
Struktur navigasi yang baik bukan berarti setiap link di sebuah dokumen harus dimasukkan ke dalam <nav>. Elemen tersebut ditujukan bagi blok tautan navigasi yang penting, misalnya navigasi utama situs, daftar isi, atau navigasi bagian tertentu. Tautan yang kebetulan muncul di dalam paragraf tidak otomatis memerlukan elemen <nav>. Di dalam contoh ini, daftar tak berurutan dipilih karena menu utama merupakan kumpulan item sejajar secara konseptual dan urutannya tidak menentukan langkah yang harus diikuti. Setiap anchor akan mempunyai href yang mengarah ke ID bagian dalam halaman, seperti #tentang dan #kontak. Kita juga akan membedakan navigasi ke fragment internal dari navigasi ke dokumen lain, memeriksa kecocokan antara nilai href dan id, serta mengenal aria-current="page" dalam konteks navigasi antardokumen. Dengan demikian, praktik tidak berhenti pada kode yang terlihat seperti menu, tetapi menghasilkan markup yang logis, dapat diikuti melalui keyboard, dan lebih mudah dipahami serta dipelihara.
Landasan Sains dan Prinsip Kerja Metode
HTML membentuk struktur dokumen melalui elemen dan hubungan hierarkis di antaranya. Elemen <nav> adalah elemen sectioning yang merepresentasikan bagian halaman yang menyediakan tautan navigasi. Browser tidak memerlukan <nav> agar sebuah anchor dapat bekerja; sebuah <a href="..."> tetap merupakan hyperlink ketika ditempatkan di luar <nav>. Nilai elemen semantik terletak pada pemberian makna terhadap struktur dokumen. Struktur tersebut dapat digunakan oleh teknologi bantu untuk membantu pengguna mengenali wilayah navigasi. Karena itu, penggunaan <nav> bukan pengganti anchor dan bukan pula mekanisme pemindahan halaman. Anchor tetap menjadi komponen yang memiliki tujuan tautan melalui atribut href. Apabila satu halaman mempunyai beberapa area <nav>, masing-masing dapat diberi nama yang dapat diakses bila diperlukan agar tujuan setiap area dapat dibedakan, misalnya dengan aria-label="Navigasi utama" dan aria-label="Daftar isi". Namun, untuk sebuah navigasi utama tunggal yang konteksnya sudah jelas, atribut tambahan tidak perlu digunakan sekadar untuk memperbanyak markup.
Pemakaian <ul> dan <li> memberikan hubungan daftar yang memang sesuai dengan sifat sekumpulan pilihan navigasi. Struktur yang lazim adalah nav > ul > li > a. Ini bukan aturan bahwa <nav> wajib memiliki <ul>; HTML mengizinkan konten lain yang sesuai di dalamnya. Daftar dipakai karena secara semantik masuk akal ketika beberapa tujuan navigasi dianggap sebagai kumpulan item. Elemen <li> harus menjadi anak dari elemen daftar yang sesuai, sedangkan anchor berada di dalam item daftar. Pendekatan ini juga menghasilkan HTML yang tetap mudah dibaca tanpa stylesheet. Yang perlu dihindari adalah membuat elemen bukan-tautan, seperti <div> atau <span>, lalu memperlakukannya sebagai link hanya melalui tampilan visual. Anchor yang memiliki href sudah menyediakan semantik dan perilaku hyperlink bawaan, termasuk kemampuan memperoleh fokus keyboard dan diaktifkan dengan mekanisme standar browser. HTML native semacam ini biasanya lebih sederhana dibanding meniru perilaku link dengan elemen generik.
Ketika href berisi fragment identifier seperti #kontak, browser mencari elemen dalam dokumen yang ID-nya cocok, yaitu id="kontak", kemudian menavigasi ke bagian tersebut. Karena itu, ketepatan karakter antara fragment dan ID merupakan parameter fungsional, bukan sekadar gaya penamaan. Untuk halaman lain, href="tentang.html" berarti browser meminta atau membuka resource relatif terhadap URL dokumen saat ini; struktur direktori kemudian memengaruhi apakah URL tersebut benar. Teks link juga perlu menjelaskan tujuan secara masuk akal. Teks seperti “Tentang” atau “Kontak” biasanya lebih informatif dalam menu daripada beberapa tautan yang seluruhnya bertuliskan “Klik di sini”. Navigasi juga tidak memerlukan target="_blank" secara default. Membuka link pada konteks browsing yang sama merupakan perilaku alami anchor dan menghindari pembuatan tab baru yang tidak diperlukan. Prinsip intinya adalah memanfaatkan perilaku HTML native, membuat tujuan link valid, mempertahankan hierarki daftar yang benar, dan baru kemudian menambahkan presentasi atau interaksi jika kebutuhan proyek memang memerlukannya.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Untuk HTML navigasi tidak terdapat formula numerik atau komposisi bahan. Parameter yang relevan adalah struktur elemen, atribut, serta hubungan antara URL dan target. Tabel berikut merangkum sepuluh komponen yang akan dipakai atau diperiksa selama praktik. Beberapa merupakan elemen dan beberapa merupakan atribut atau aturan URL; semuanya mempunyai fungsi yang berbeda. Spesifikasi ini dapat dijadikan checklist ketika Anda meninjau markup tanpa bergantung pada tampilan CSS.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
| nav | Satu area navigasi utama pada contoh | Menandai blok tautan navigasi penting secara semantik |
| ul | Satu daftar di dalam nav | Mengelompokkan item navigasi sebagai daftar tak berurutan |
| li | Satu elemen untuk setiap item menu | Merepresentasikan setiap anggota daftar navigasi |
| a | Satu anchor aktif per item menu | Menyediakan hyperlink yang dapat diikuti pengguna |
| href fragment | Format #id, misalnya #kontak | Mengarahkan browser ke target dalam dokumen yang sama |
| id target | Nilai cocok dengan fragment tanpa karakter # | Menentukan elemen tujuan navigasi fragment |
| href relatif | Misalnya tentang.html bila file sejajar | Menghubungkan dokumen berdasarkan lokasi URL relatif |
| Teks link | Deskriptif dan singkat | Memberi pengguna informasi tentang tujuan tautan |
| aria-label | Opsional pada nav ketika perlu nama pembeda | Memberi nama yang dapat diakses pada wilayah navigasi |
| aria-current | Nilai page untuk link halaman aktif | Menyatakan item yang merepresentasikan halaman saat ini |
href="#" sebagai pengganti tujuan navigasi yang sebenarnya hanya agar elemen terlihat seperti link. Fragment kosong semacam itu tidak menyatakan target menu yang berguna dan dapat memindahkan posisi halaman. Untuk navigasi fragment, buat ID target yang benar; untuk halaman lain, gunakan URL yang benar. Selain itu, jangan menambahkan role="navigation" pada elemen <nav> tanpa kebutuhan khusus karena elemen tersebut sudah memiliki semantik navigasi native.Panduan Langkah Kerja Bertahap
Membuat Dokumen HTML dan Kerangka Navigasi
Buat folder kerja sederhana, lalu buat file bernama index.html. Karena latihan ini hanya memerlukan HTML native, file dapat dibuka langsung dari filesystem menggunakan browser modern. Mulailah dengan dokumen lengkap agar encoding, bahasa dokumen, judul, dan struktur konten jelas. Pada tahap pertama, buat elemen <nav> yang berisi sebuah <ul>. Setiap pilihan menu ditempatkan pada <li> dan setiap item berisi anchor. Tiga anchor akan menuju bagian Beranda, Tentang, dan Kontak dalam dokumen yang sama.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Latihan Navigasi HTML</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</body>
</html>Simpan file lalu buka index.html di browser. Hasil yang diharapkan pada tahap ini adalah daftar tiga tautan. Tampilan bawaan dapat berupa daftar vertikal dengan bullet karena kita memang belum menambahkan CSS. Jangan menilai keberhasilan dari apakah menu sudah horizontal: orientasi bukan bagian dari semantik HTML. Anda dapat menekan tombol Tab berulang kali untuk memastikan ketiga anchor dapat menerima fokus, kemudian perhatikan status URL atau status link browser ketika link disorot. Bila tautan diklik sekarang, target fragment belum tersedia karena elemen dengan ID terkait belum dibuat. Hal tersebut disengaja pada langkah pertama: struktur menu sudah valid secara konseptual, tetapi hubungan fragment baru akan diselesaikan pada langkah berikutnya.
Verifikasi juga hierarkinya melalui fitur Elements/Inspector pada DevTools bila tersedia. Pastikan <ul> berada di dalam <nav>, setiap <li> berada langsung dalam daftar, dan setiap anchor berada di dalam item yang sesuai. Atribut aria-label memberikan nama “Navigasi utama” pada area tersebut. Dalam contoh sederhana ini atribut itu tidak wajib untuk membuat menu berfungsi, tetapi berguna sebagai contoh penamaan area navigasi dan akan tetap relevan jika dokumen nantinya mempunyai lebih dari satu landmark navigasi.
Menghubungkan Fragment dengan ID Bagian Halaman
Selanjutnya buat target nyata untuk ketiga fragment. Tambahkan elemen <main> setelah navigasi dan buat tiga <section> dengan ID beranda, tentang, dan kontak. Nilai fragment pada anchor memiliki tanda #, sedangkan nilai atribut id tidak. Jadi href="#tentang" ditujukan kepada id="tentang". Kode berikut merupakan isi lengkap index.html pada tahap ini, sehingga Anda dapat mengganti isi file tahap sebelumnya tanpa memerlukan file lain.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Latihan Navigasi HTML</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
<main>
<section id="beranda">
<h1>Beranda</h1>
<p>Selamat datang di halaman latihan navigasi.</p>
</section>
<section id="tentang">
<h2>Tentang</h2>
<p>Bagian ini menjelaskan tujuan halaman latihan.</p>
</section>
<section id="kontak">
<h2>Kontak</h2>
<p>Bagian ini menjadi target menu Kontak.</p>
</section>
</main>
</body>
</html>Muat ulang browser dan klik menu Tentang. Hasil yang diharapkan adalah URL mendapatkan fragment #tentang dan browser menargetkan section Tentang. Pada dokumen yang pendek, browser mungkin tidak dapat menggulir target sampai ke tepi atas viewport karena ruang vertikal di bawahnya terbatas; karena itu, perubahan fragment pada address bar merupakan pemeriksaan tambahan yang berguna. Ulangi untuk Beranda dan Kontak. Anda juga dapat mengetik URL file yang diakhiri #kontak atau memilih link Kontak untuk memastikan fragment cocok.
Jika fragment berubah tetapi bagian yang diharapkan tidak menjadi target, periksa ejaan atribut terlebih dahulu. #kontak harus berpasangan dengan id="kontak", bukan id="contact". Untuk latihan ini, pertahankan ID unik agar setiap fragment mempunyai target yang tidak ambigu. Inspector browser dapat dipakai untuk mencari elemen berdasarkan ID. Verifikasi akhir langkah ini adalah semua tiga link mempunyai target yang tersedia dalam dokumen dan tidak ada anchor menu yang mengarah ke fragment yang belum dibuat.
Membedakan Link Fragment dan Link ke Dokumen Lain
Navigasi website nyata sering mencampurkan tujuan dalam halaman dengan tujuan dokumen lain. Agar perbedaannya konkret, kita akan menambah halaman kedua bernama profil.html. Letakkan profil.html dalam folder yang sama dengan index.html. Karena keduanya sejajar, URL relatif profil.html dari index.html sudah cukup. Tambahkan satu item Profil pada navigasi index.html. Bagian lain dari file tetap seperti tahap sebelumnya; berikut ditampilkan dokumen lengkap agar perubahan dapat dipraktikkan tanpa menebak konteks.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Latihan Navigasi HTML</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="profil.html">Profil</a></li>
</ul>
</nav>
<main>
<section id="beranda">
<h1>Beranda</h1>
<p>Selamat datang di halaman latihan navigasi.</p>
</section>
<section id="tentang">
<h2>Tentang</h2>
<p>Bagian ini menjelaskan tujuan halaman latihan.</p>
</section>
<section id="kontak">
<h2>Kontak</h2>
<p>Bagian ini menjadi target menu Kontak.</p>
</section>
</main>
</body>
</html>Buat file kedua, profil.html, dengan dokumen mandiri berikut. Link kembali menggunakan index.html, sesuai dengan fakta bahwa kedua file berada pada direktori yang sama.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Profil</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="profil.html">Profil</a></li>
</ul>
</nav>
<main>
<h1>Profil</h1>
<p>Ini adalah halaman profil latihan.</p>
</main>
</body>
</html>Simpan keduanya, buka index.html, kemudian pilih Profil. Browser diharapkan membuka profil.html pada tab yang sama. Dari halaman Profil, pilih Beranda dan periksa bahwa browser kembali ke index.html. Verifikasi nama file pada address bar, bukan hanya teks yang terlihat. Praktik ini menunjukkan bahwa fragment #tentang bekerja di dalam dokumen, sedangkan profil.html merupakan referensi dokumen relatif. Jika Profil gagal dibuka, periksa bahwa nama dan ekstensi file benar serta kedua file benar-benar berada dalam folder yang sama.
Membuat Navigasi Halaman Kedua Konsisten
Pada langkah sebelumnya, navigasi di profil.html sengaja dibuat minimal untuk memperlihatkan perpindahan antardokumen. Sekarang kita konsistenkan menu sehingga pengguna Profil juga dapat langsung menuju bagian Tentang atau Kontak pada index.html. URL dapat menggabungkan nama dokumen dan fragment, misalnya index.html#kontak. Artinya browser membuka index.html lalu menargetkan elemen dengan ID kontak. Ini berguna ketika target section berada di halaman lain dan menghindari kebutuhan membuat salinan section hanya untuk tujuan navigasi.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Profil</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="index.html#beranda">Beranda</a></li>
<li><a href="index.html#tentang">Tentang</a></li>
<li><a href="index.html#kontak">Kontak</a></li>
<li><a href="profil.html">Profil</a></li>
</ul>
</nav>
<main>
<h1>Profil</h1>
<p>Ini adalah halaman profil latihan.</p>
</main>
</body>
</html>Ganti isi profil.html dengan kode tersebut tanpa mengubah index.html. Kemudian buka Profil dan pilih Kontak. Hasil yang diharapkan adalah browser berpindah ke index.html#kontak dan menargetkan section Kontak yang dibuat pada langkah kedua. Kembali ke Profil lalu uji Tentang dengan metode yang sama. Pemeriksaan address bar sangat membantu karena URL memperlihatkan dua informasi sekaligus: dokumen index.html dan fragment #tentang atau #kontak.
Perhatikan bahwa URL pada index.html sendiri tetap boleh menggunakan #kontak saja, karena target berada dalam dokumen yang sedang dibuka. Pada profil.html, nama file perlu disebut sebelum fragment karena targetnya berada pada dokumen berbeda. Prinsip ini membantu mencegah kesalahan umum berupa href="#kontak" di halaman Profil ketika ID kontak sebenarnya hanya tersedia pada halaman Beranda. Verifikasi dengan Inspector juga dapat dilakukan: cari id="kontak" ketika berada di Profil; ID itu memang tidak ada di sana, tetapi setelah link dijalankan target tersedia di dokumen index.html.
Menandai Halaman Aktif dengan aria-current
Untuk navigasi antardokumen, informasi tentang halaman yang sedang aktif dapat dinyatakan secara programatik menggunakan aria-current="page" pada link yang mewakili halaman saat ini. Pada profil.html, item Profil merepresentasikan dokumen yang sedang ditampilkan, sehingga atribut tersebut tepat ditempatkan pada anchor Profil. Atribut ini bukan mekanisme untuk mengubah URL dan tidak otomatis memberikan gaya visual tertentu. Jika suatu saat Anda ingin membuat item aktif berwarna berbeda, CSS dapat menargetkan atribut itu, tetapi semantik HTML-nya tetap berguna secara terpisah. Ubah hanya link Profil pada profil.html seperti pada dokumen lengkap berikut.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Profil</title>
</head>
<body>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="index.html#beranda">Beranda</a></li>
<li><a href="index.html#tentang">Tentang</a></li>
<li><a href="index.html#kontak">Kontak</a></li>
<li><a href="profil.html" aria-current="page">Profil</a></li>
</ul>
</nav>
<main>
<h1>Profil</h1>
<p>Ini adalah halaman profil latihan.</p>
</main>
</body>
</html>Simpan dan muat ulang profil.html. Secara visual, tampilan mungkin tidak berubah sama sekali; itu merupakan hasil normal karena browser tidak diwajibkan memberikan dekorasi visual khusus untuk atribut tersebut. Verifikasi atribut melalui Elements/Inspector dan pastikan aria-current="page" berada tepat pada anchor Profil. Bila Anda menggunakan alat inspeksi accessibility yang disediakan browser, Anda juga dapat memeriksa properti aksesibilitas elemen tersebut. Jangan menaruh aria-current="page" pada semua item karena hanya item yang benar-benar mewakili halaman saat ini yang seharusnya dinyatakan demikian dalam konteks ini.
Pada index.html, menu terdiri dari beberapa fragment pada satu halaman sehingga konsep “halaman aktif” tidak identik dengan section yang sedang berada di viewport. Menentukan section fragment yang aktif secara dinamis dapat memerlukan logika interaksi tambahan dan berada di luar latihan HTML murni ini. Karena itu, kita tidak mengarang status aktif untuk setiap section. Verifikasi akhir langkah adalah struktur menu tetap berfungsi seperti sebelumnya dan halaman Profil sekarang mempunyai penanda semantik yang sesuai untuk link halaman saat ini.
Menguji Struktur Final dengan Keyboard, URL, dan Inspector
Tahap terakhir adalah menguji perilaku yang sudah dibangun, bukan menambahkan framework atau JavaScript. Gunakan versi index.html dari Langkah 3 dan profil.html final dari Langkah 5. Buka index.html, lalu jalankan semua link menggunakan pointer dan keyboard. Dengan fokus berada pada halaman, tekan Tab sampai link navigasi memperoleh fokus. Tekan Enter pada Tentang dan pastikan fragment URL berubah menjadi #tentang. Lanjutkan pengujian pada Kontak, kemudian buka Profil dan pastikan dokumen berubah. Dari Profil, coba Kontak; URL yang diharapkan mengarah pada index.html#kontak. Pengujian keyboard penting karena struktur anchor native seharusnya tidak bergantung pada event klik JavaScript untuk menjalankan fungsi dasarnya.
<nav aria-label="Navigasi utama">
<ul>
<li><a href="#beranda">Beranda</a></li>
<li><a href="#tentang">Tentang</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="profil.html">Profil</a></li>
</ul>
</nav>Snippet di atas bukan file mandiri, melainkan bagian navigasi final yang harus Anda temukan di index.html. Gunakan sebagai pembanding saat memeriksa Inspector. Pastikan browser menampilkan sebuah <nav>, lalu <ul>, empat <li>, dan empat anchor. Pastikan pula ketiga fragment internal cocok dengan ID target. Jangan menggunakan tampilan horizontal sebagai kriteria kelayakan karena kita belum menulis stylesheet untuk menu. Tampilan vertikal dengan bullet tetap merupakan hasil HTML yang sah untuk latihan struktur ini.
Untuk verifikasi terakhir, ubah fragment address bar secara manual menjadi #kontak ketika berada pada index.html, lalu jalankan navigasi tersebut. Browser seharusnya mempunyai target dengan ID Kontak. Selanjutnya buka profil.html dan periksa melalui Inspector bahwa link Profil mengandung aria-current="page". Jika seluruh link menuju tujuan yang benar, fokus keyboard dapat mencapai anchor, hierarki daftar benar, dan tidak ada fragment yang kehilangan target, struktur dasar navigasi telah memenuhi sasaran tutorial. Perbedaan kecil pada tampilan fokus atau posisi scroll dapat terjadi antarbrowser dan stylesheet pengguna, sehingga pemeriksaan harus berpusat pada perilaku URL, target, fokus, dan struktur DOM.
Verifikasi Akhir dan Parameter Kelayakan
Verifikasi navigasi sebaiknya dilakukan berdasarkan struktur dan perilaku yang dapat diperiksa, bukan hanya apakah halaman tampak menyerupai menu. Lima parameter berikut merangkum perubahan dari link yang belum terorganisasi menuju navigasi terstruktur. Kondisi “sebelum” menggambarkan keadaan yang lazim sebelum metode diterapkan, sedangkan target menunjukkan kriteria yang dapat diperiksa pada contoh tutorial. Gunakan source HTML, address bar, keyboard, dan Inspector browser sebagai sumber verifikasi yang saling melengkapi.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Landmark navigasi | Link belum dikelompokkan sebagai area navigasi | Satu nav bernama Navigasi utama membungkus menu utama |
| Struktur daftar | Link dapat berdiri tanpa hubungan daftar | Setiap anchor menu berada dalam li pada satu ul |
| Target fragment internal | Fragment dapat belum memiliki target | #beranda, #tentang, dan #kontak cocok dengan ID yang tersedia |
| Navigasi antardokumen | Path halaman lain belum didefinisikan | index.html dan profil.html saling dapat dinavigasi sesuai path relatif |
| Status halaman Profil | Item aktif belum dinyatakan | Link Profil di profil.html memiliki aria-current="page" |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa klik menu dengan href fragment tidak berpindah ke bagian yang dimaksud?
Penyebab paling umum adalah nilai fragment tidak cocok dengan ID target atau target memang tidak ada pada dokumen yang sedang dibuka. Periksa pasangan seperti href="#kontak" dan id="kontak". Jangan memasukkan tanda # ke dalam nilai id; tanda tersebut merupakan bagian dari sintaks fragment pada URL. Jika link berada pada profil.html sedangkan target Kontak berada pada index.html, gunakan href="index.html#kontak", bukan hanya href="#kontak". Setelah memperbaiki source, simpan file dan muat ulang browser. Verifikasi dengan melihat address bar serta mencari ID target melalui Inspector. Pada halaman yang sangat pendek, tidak adanya gerakan scroll besar tidak selalu berarti link gagal karena browser mungkin tidak mempunyai ruang untuk memosisikan target lebih tinggi.
2. Mengapa menu masih vertikal dan menampilkan bullet padahal struktur nav sudah benar?
Karena <nav> menentukan semantik, bukan desain menu. Elemen <ul> dan <li> mempunyai presentasi bawaan browser yang umumnya terlihat sebagai daftar vertikal dengan marker. Mengubahnya menjadi navigasi horizontal, menghapus marker, mengatur jarak, atau memberi warna merupakan pekerjaan CSS. Jangan mengganti struktur daftar yang sudah tepat hanya untuk menghilangkan bullet. Dalam tutorial ini tidak ada stylesheet proyek karena sasaran praktik adalah HTML terstruktur. Verifikasi keberhasilan melalui DOM: nav membungkus ul, item menu berada dalam li, dan anchor mempunyai href yang tepat. Setelah struktur stabil, CSS dapat ditambahkan sebagai lapisan presentasi tanpa mengubah fungsi dasar hyperlink.
3. Mengapa profil.html tidak ditemukan ketika link Profil diklik?
Periksa lokasi dan nama file sebelum mengubah markup lain. Pada contoh tutorial, index.html dan profil.html harus berada dalam folder yang sama sehingga href="profil.html" dihitung relatif dari index.html. Bila file Profil dipindahkan ke subfolder, URL contoh tidak lagi sesuai dan harus disesuaikan dengan struktur sebenarnya. Perhatikan juga perbedaan huruf besar-kecil karena perilaku filesystem dan server dapat berbeda antarlingkungan; menggunakan penamaan yang konsisten mencegah masalah saat proyek dipindahkan. Verifikasi dengan melihat nama file aktual di folder dan URL yang dicoba browser. Hindari mengganti URL dengan path absolut lokal yang hanya berlaku di komputer sendiri, karena pendekatan tersebut membuat dokumen sulit dipindahkan atau dipublikasikan.
4. Apakah setiap link harus berada di dalam nav dan apakah nav harus selalu memakai ul?
Tidak. <nav> ditujukan untuk bagian yang berisi tautan navigasi penting, bukan untuk membungkus setiap hyperlink dalam dokumen. Link sumber di paragraf, misalnya, dapat tetap menjadi anchor biasa bila bukan bagian area navigasi. Sebaliknya, <nav> juga tidak diwajibkan oleh sintaks HTML untuk selalu memiliki <ul>. Tutorial ini menggunakan <ul> karena menu adalah sekumpulan item yang secara konseptual cocok direpresentasikan sebagai daftar. Ketika mengevaluasi markup, tanyakan apakah suatu blok memang membantu pengguna menavigasi bagian utama situs atau dokumen dan apakah kumpulan tujuannya secara logis merupakan daftar. Verifikasi struktur melalui Inspector dan nilai makna kontennya, bukan melalui asumsi bahwa satu pola harus diterapkan pada seluruh link tanpa mempertimbangkan konteks.
Kesimpulan dan Rencana Aksi
Navigasi HTML yang terstruktur dibangun dengan memahami tugas masing-masing elemen, bukan dengan sekadar menumpuk tag sampai tampil seperti menu. <nav> menandai area navigasi penting, <ul> mengelompokkan pilihan sebagai daftar, <li> merepresentasikan item, dan <a> dengan href menyediakan fungsi hyperlink. Fragment seperti #kontak harus mempunyai target ID yang sesuai, sedangkan perpindahan ke file lain bergantung pada URL yang benar relatif terhadap lokasi dokumen. Untuk navigasi antardokumen, aria-current="page" dapat menandai link yang mewakili halaman saat ini. Rencana praktik berikutnya adalah mempertahankan dua file latihan ini, menguji seluruh link melalui keyboard dan address bar, kemudian mencoba menambah satu halaman baru dengan menghitung URL relatifnya sendiri. Setelah struktur HTML tetap benar tanpa CSS, barulah tambahkan stylesheet untuk mengatur layout horizontal, spacing, warna, hover, dan indikator fokus tanpa menghilangkan perilaku anchor native. Dengan urutan tersebut, Anda memisahkan semantik, navigasi, dan presentasi sehingga kesalahan lebih mudah dilacak dan markup lebih mudah dikembangkan ketika website bertambah besar.
Ditulis dan diedit oleh Ahmad Ismail Al Malik