Empat halaman berdiri, tetapi menunya masih salinan beranda yang ditempel seragam — penanda halaman aktif tidak pernah berpindah dan tiga berkas bahkan belum punya footer. Bagian ini menuntaskan dua pekerjaan terakhir itu: menu yang sama dan benar di keempat berkas, lalu footer penutup yang identik. Markupnya kecil; disiplinnya yang berat.

Menu pada beranda kita jadikan acuan — berikut bloknya di index.html, lengkap dengan penandanya:

html 
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html" aria-current="page">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>

Salin blok itu ke tentang.html, lalu geser penandanya:

html 
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html" aria-current="page">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>

Ke kegiatan.html:

html 
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html" aria-current="page">Kegiatan</a></li>
        <li><a href="kontak.html">Kontak</a></li>
      </ul>
    </nav>

Dan terakhir ke kontak.html:

html 
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="index.html">Beranda</a></li>
        <li><a href="tentang.html">Tentang</a></li>
        <li><a href="kegiatan.html">Kegiatan</a></li>
        <li><a href="kontak.html" aria-current="page">Kontak</a></li>
      </ul>
    </nav>

Mari kita bedah baris demi baris:

  1. Struktur identik (baris 1-7 pada keempat blok): aria-label, jumlah item, label teks, dan urutannya sama persis — pengunjung mempelajari menu sekali di halaman mana pun, lalu bergerak tanpa berpikir di halaman lain.
  2. aria-current="page" yang berpindah (baris 3-6): tiap berkas menandai item miliknya — Beranda di index.html, Tentang di tentang.html, Kegiatan di kegiatan.html, Kontak di kontak.html. Atribut ini menyatakan “inilah halaman sekarang” dan langsung dikenali pembaca layar, materi chapter Navigasi Antarhalaman.
  3. Beranda ikut tertaut dan bertanda (baris 3 blok pertama): berbeda dari panduan wisata yang tidak menaut beranda, menu kita menautnya — maka keempat berkas punya penanda aktif, tidak ada yang kosong, dan nilai href-nya tetap index.html di semua berkas.
  4. Nilai href tidak pernah berubah antarberkas: seluruh tautan menu menunjuk berkas, bukan fragment, dan keempat berkas bertetangga di satu folder — nama berkas sudah cukup sebagai alamat. Karena itu blok nav benar-benar identik kecuali satu atribut yang berpindah; di panduan wisata dulu, tautan Kontak berubah nilai antarberkas karena mengejar fragment di beranda.

Tiga berkas masih ditutup </main> saja. Tempelkan blok penutup berikut setelahnya — di keempat berkas, sama persis:

html 
  <!-- Kaki situs -->
  <footer>
    <address>
      <p>Kopi.dev — Komunitas Belajar Web<br>Jalan Kenari No. 12, Jakarta Selatan 12130</p>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
    </address>
    <nav aria-label="Tautan sosial">
      <ul>
        <li><a href="https://www.example.com/kopidev-forum" target="_blank" rel="noopener">Forum</a></li>
        <li><a href="https://www.example.com/kopidev-chat" target="_blank" rel="noopener">Ruang chat</a></li>
        <li><a href="https://www.example.com/kopidev-kode" target="_blank" rel="noopener">Repositori latihan</a></li>
      </ul>
    </nav>
    <p><small>© <time datetime="2026">2026</time> Kopi.dev — Komunitas Belajar Web.</small></p>
  </footer>

Bedah blok penutup ini:

  1. address identitas situs (baris 3-6): alamat sekretariat dan email — informasi yang berlaku untuk seluruh situs, maka tempatnya footer, bukan main halaman tertentu.
  2. nav tautan sosial (baris 7-13): tautan komunitas di luar situs, dibuka tab baru ber-rel="noopener". footer boleh memuat nav — wilayah navigasi sekunder sah di kaki halaman, asalkan aria-label-nya dibedakan dari menu utama, materi chapter Navigasi dengan Nav.
  3. Hak cipta ber-time dan small (baris 14): tahun dibungkus time datetime="2026", small menandai keterangan ringkas — penutup yang sama di keempat berkas menandai situs yang konsisten sampai baris terakhir.

Biaya Pemeliharaan Manual #

Kita menempelkan nav dan footer dengan tangan: satu berkas acuan, tiga kali salin-tempel, satu atribut digeser. Mudah untuk empat halaman, tetapi biayanya tumbuh mengikuti jumlah berkas:

Struktur Berkas dan Aset #

Situs lengkap kini berbentuk berikut:

text 
website-komunitas/
├── index.html
├── tentang.html
├── kegiatan.html
├── kontak.html
└── assets/

Empat berkas bertetangga — itulah sebabnya seluruh tautan situs ditulis nama berkas saja. Folder assets/ masih kosong dan tidak dirujuk berkas mana pun: situs ini murni teks, dan folder itu menunggu foto kegiatan begitu materi gambar kita sampai. Menata nama berkas sejak awal — kegiatan.html, bukan halaman2.html — adalah kebiasaan dari chapter Struktur File dan Folder; tautan rusak paling sering lahir dari berkas yang diubah namanya setelah ditaut.

Hasil pada Browser #

Buka index.html dan berkeliling lewat menu: tiap item memuat berkasnya, dan item halaman yang sedang dibuka bertanda aktif — pembaca layar mengumumkan “halaman saat ini” yang berpindah mengikuti berkas. Footer yang sama menutup keempat halaman: alamat, tautan sosial, dan hak cipta berdiri di tempat yang sama persis.

Karena demo hanya satu potongan berkas, keempat menu berikut ditampilkan berdampingan sebagai ringkasan empat halaman — bandingkan strukturnya yang identik dan satu-satunya perbedaannya: letak penanda aktif yang berpindah:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) dan penanda aria-current diberi latar berwarna agar terlihat — pada berkas sungguhan penanda itu tidak punya tampilan bawaan, ia hanya diumumkan pembaca layar.

Dan inilah footer yang sama yang ditempelkan setelah </main> di keempat berkas:

Pada demo footer, tautan mailto: biasanya ditahan browser di dalam iframe dan tiga tautan sosial terbuka di tab baru — markupnya sama persis dengan blok yang ditempelkan keempat berkas.

Ringkasan Bagian 5 #

  • Nav identik di keempat berkas; satu-satunya perbedaan adalah posisi aria-current="page" yang berpindah mengikuti halaman.
  • Footer sama empat kali: address identitas, nav sosial berlabel sendiri, dan hak cipta ber-time.
  • Pemeliharaan manual menuntut suntingan serentak di semua berkas; templating kelak menghapus pekerjaan ini.

Satu bagian terakhir menutup Course: audit menyeluruh keempat halaman, uji seluruh situs, dan refleksi perjalanan belajar kita.