Header kita masih menampung nama alat saja. Bagian ini melengkapinya dengan dua perangkat standar halaman dokumentasi modern: form pencarian dan nav daftar isi. Keduanya murni HTML — tanpa satu baris skrip, keduanya sudah memberi nilai bagi pembaca.

Form Pencarian #

Tambahkan blok berikut setelah baris nama alat, menggantikan komentar penanda dari Bagian 1:

html 
<search>
  <form>
    <input type="search" name="q" aria-label="Cari di dokumentasi" placeholder="Cari topik…">
    <button type="submit">Cari</button>
  </form>
</search>

Mari kita bedah baris demi baris:

  1. Elemen search (baris 1 dan 6): wadah semantik khusus area pencarian, anggota termuda dari standar HTML. Pembaca layar mendengar wilayahnya sebagai wilayah pencarian, bukan sekadar form tanpa nama.
  2. form tanpa action (baris 2): form mengirim ketikan ke alamat halaman itu sendiri. Dokumentasi sungguhan mengarahkannya ke alamat khusus pencarian; untuk latihan pola ini, tanpa action sudah cukup dan tidak menuntut apa pun dari berkas lokal kita.
  3. input type="search" dengan name (baris 3): varian kotak teks dengan perilaku khas browser — tombol bersihkan bawaan pada sebagian browser dan papan ketik yang sesuai pada ponsel. Atribut name="q" membuat ketikan terkirim sebagai parameter saat tombol ditekan.
  4. aria-label (baris 3): nama kotak yang hanya terbaca mesin. Kotak pencarian di header dokumentasi memang minim tempat — label terlihat akan memakan baris tersendiri, sedangkan aria-label memberi nama tanpa mengambil satu pikel pun. Tanpa salah satunya, pembaca layar hanya mengumumkan kotak teks tanpa petunjuk isi; kapan memilih label dan kapan memilih aria-label dibedah pada chapter Label dan Instruksi Form dan Kapan Menggunakan ARIA.
  5. placeholder bukan label (baris 3): teks contoh di dalam kotak menghilang begitu pengguna mengetik — ia mengilustrasikan bentuk isian, bukan menamainya; chapter Placeholder membedah batas perannya.
  6. button type="submit" (baris 4): tombol pengirim form — teksnya “Cari”, satu kata kerja yang jelas.

Setelah form, tambahkan nav daftar isi:

html 
<nav aria-label="Daftar isi dokumentasi">
  <ul>
    <li><a href="#instalasi">Instalasi</a></li>
    <li><a href="#penggunaan">Penggunaan</a></li>
    <li><a href="#perintah">Perintah</a></li>
    <li><a href="#konfigurasi">Konfigurasi</a></li>
    <li><a href="#masalah">Masalah Umum</a></li>
  </ul>
</nav>

Empat keputusan pada blok ini:

  1. nav ber-aria-label (baris 1): wilayah navigasi bernama “Daftar isi dokumentasi” — nama yang membedakannya bila halaman kelak memiliki navigasi lain. Peran elemen ini dibedah pada chapter Navigasi dengan Nav.
  2. ul dan li (baris 2-8): navigasi berisi daftar; pasangan ini membuat struktur tautan terbaca sebagai satu kelompok oleh pembaca layar. Alasannya dirangkum pada chapter Struktur Navigasi yang Baik.
  3. Lima tautan fragment (baris 3-7): href="#instalasi" dan kawan-kawannya diawali kres — penanda bagian halaman, bukan halaman lain.
  4. Teks tautan sama dengan judul bagian (baris 3-7): “Instalasi” dan teman-temannya akan sama persis dengan h2 sasaran pada Bagian 3 — pembaca menemukan persis apa yang dijanjikan tautan. Aturan teks tautannya dibedah pada chapter Link Text yang Jelas.

Perilaku Tautan Fragment #

Klik “Perintah”: address bar bertambah #perintah, halaman menggulir ke section itu, dan tidak ada permintaan jaringan baru — semuanya terjadi di dalam satu berkas. Mekanisme lengkapnya dibedah pada chapter Link ke Bagian Halaman; syaratnya satu: nilai href dan id harus sama persis.

Satu penanda sengaja tidak kita pakai: aria-current. Pada situs multi-halaman, tautan halaman aktif ditandai aria-current="page" supaya pembaca layar tahu posisinya di antara menu. Di sini seluruh tautan mengarah ke bagian-bagian dari halaman yang sama — tidak ada “halaman aktif” yang layak ditandai, dan menandai satu tautan justru menyesatkan.

Hasil pada Browser #

Header kini menampilkan nama alat, kotak pencarian dengan tombol Cari, dan lima tautan daftar isi. Klik “Konfigurasi” — halaman menggulir ke bagian yang dituju (walau masih kosong) dan address bar berubah menjadi ...#konfigurasi. Coba ketik sesuatu pada kotak pencarian lalu tekan Cari: address bar bertambah ?q= diikuti ketikan kita — bukti form terkirim ke alamat halaman yang sama.

Inilah keadaan header pada akhir Bagian 2 — klik kelima tautan daftar isinya, semuanya menggulir ke section kosong tujuannya:

Demo hanya memuat header dan main — footer tidak termasuk. Menekan Cari pada demo tidak menambah ?q= di address bar karena dokumen demo hidup di dalam iframe tanpa alamat; ia hanya memuat ulang dirinya sendiri. Coba pada berkas tersimpan untuk melihat efek ?q= yang sesungguhnya. Lompatan fragment tetap terjadi di dalam iframe berkat satu elemen <base> tambahan yang tidak diperlukan pada berkas tersimpan.

Ringkasan Bagian 2 #

  • Form pencarian memakai input type="search" dengan aria-label sebagai nama; placeholder hanya contoh, bukan pengganti label.
  • Nav daftar isi berupa ul lima tautan fragment menuju id section — href dan id wajib sama persis.
  • aria-current tidak dipakai: seluruh tautan mengarah ke bagian dari halaman yang sama, bukan halaman terpisah.

Bagian berikutnya memasang kerangka heading seluruh halaman.