Struktur Semantic HTML

Situs berdiri dan seluruh tautannya hidup — tugas terakhir Course bukan menambah markup, melainkan memeriksa apa yang sudah ada. Bagian penutup ini mengaudit keempat halaman dari dua sisi: pohon elemen semantic dan susunan heading. Audit lulus, situs diuji menyeluruh, lalu Course kita tutup.

Pohon Semantic Keempat Halaman #

Kerangka luar keempat berkas identik; hanya main yang berbeda isi. Peta lengkapnya:

header  ─ nama situs + nav utama (sama di 4 berkas, aria-current berpindah)
main    ─ isi halaman (satu-satunya bagian yang berbeda):
          index.html     hero → sekilas kegiatan (3 article) → manfaat (ul)
          tentang.html   h1 → cerita → visi (blockquote) → struktur (h3 ×3)
          kegiatan.html  h1 → 3 article kegiatan → section tabel jadwal
          kontak.html    h1 → section form → section address
footer  ─ address + nav sosial + hak cipta (identik di 4 berkas)

Mari kita baca peta ini sebagai pemeriksa:

1. Tiga bagian tetap (baris 1 dan 5): header, footer, dan seluruh turunannya sama di keempat berkas — konsistensi yang membuat pengunjung tidak belajar ulang tiap pindah halaman, persis pola chapter Menyusun Halaman Semantik.
2. main satu per halaman (baris 2): keempat berkas memakai satu main dengan isi berbeda — kombinasi section, article, dan elemen teks dipilih menurut isi, bukan disamakan paksa.
3. section dan article bekerja berdampingan (baris 3-4): kegiatan besar memakai article karena berdiri sendiri, manfaat memakai ul di dalam section karena butirnya tidak, tabel memakai section penampung dengan caption — tiap elemen menempati perannya; contoh lengkapnya di chapter Contoh Semantic HTML.
4. Dua nav bernama (baris 1 dan 5): nav utama di header dan nav sosial di footer memakai aria-label berbeda — pembaca layar membedakannya dengan nama, bukan posisi.

Audit Heading Setiap Halaman #

Heading adalah outline halaman — mari kita pastikan keempatnya bersih. Tabel berikut memuat seluruh heading situs:

Pembacaan hasil audit:

1. Satu h1 per halaman (kolom 2): keempat halaman memakai tepat satu h1 yang menyatakan isinya — bukan “Selamat Datang” yang bisa berpindah tempat tanpa terasa.
2. Judul kegiatan berpindah level dengan alasan (baris 2 dan 4): “Workshop HTML Dasar” menjadi h3 di beranda karena hidup di dalam section ber-h2, lalu menjadi h2 di halaman kegiatan karena article-nya menempel langsung di main — level mengikuti kedalaman struktur, inti materi chapter Heading Hierarchy.
3. Tidak ada level terloncati (semua baris): h1 → h2 → h3 berturutan di halaman yang memakai h3; halaman kontak dan kegiatan berhenti di h2 karena strukturnya memang datar — berhenti lebih awal sah, melompati level tidak.
4. Judul tabel tidak masuk daftar (baris 4): “Pertemuan rutin Kopi.dev sepanjang pekan” memakai caption, bukan heading — tabel menyimpan namanya sendiri dan outline halaman tetap murni heading.

Uji Akhir Seluruh Situs #

Situs empat halaman berarti ujinya empat kali lipat. Jalankan putaran penuh dari index.html:

• Klik seluruh item menu di keempat halaman — enam belas klik, semuanya mendarat di berkas yang benar dengan penanda aktif yang berpindah.
• Klik tautan isi: dua tautan hero, tautan “Lihat seluruh kegiatan”, tautan fragment ke jadwal rutin, dan tiga tautan pendaftaran kegiatan.
• Klik tautan footer di tiap halaman: email, forum, ruang chat, dan repositori latihan — terbuka di tab baru, halaman kita tetap tinggal.
• Uji form: submit kosong ditahan, email tanpa @ ditahan, lalu isi lengkap dan kirim.
• Jelajah hanya dengan papan ketik: Tab melintasi menu, tautan, dan seluruh kontrol form; Enter mengikuti tautan yang difokuskan — materi chapter Keyboard Navigation.

Sebagian besar putaran di atas bisa dijalankan dari satu halaman — inilah kontak.html final, lengkap dari menu berpenanda aktif sampai footer: tekan Tab dari kolom nama dan biarkan fokus melintasi seluruh kontrol, kirim kosong untuk melihat penahannya, lalu buka tautan sosial di footer yang terbuka di tab baru:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) — berkeliling empat berkas hanya terjadi pada folder tersimpan; tel: dan mailto: biasanya ditahan browser di dalam iframe, dan submit sah berpindah ke www.example.com di dalam iframe.

Penutup Course #

Perjalanan kita berakhir di sini, dan keempat berkas tadi adalah buktinya. Kita mulai dari berkas HTML pertama dan struktur head-body; mengenal teks dan maknanya, lalu memilih elemen semantic alih-alih pembungkus kosong; menautkan halaman ke halaman dengan teks tautan yang jelas; menyusun tabel yang aksesibel dengan caption dan scope; membangun form yang memeriksa dirinya sendiri; dan hari ini merangkai semuanya menjadi situs empat halaman dengan navigasi konsisten — markup yang mesin dan manusia sama-sama pahami. Situs Kopi.dev layak menjadi portfolio pertama: teruslah menyuntingnya setiap bab yang baru kita pahami.

Materi Course HTML tamat, tetapi jalan belajarnya belum. Section Sumber Belajar menyimpan rujukan lanjutan: Referensi Elemen HTML untuk menelusuri elemen yang belum kita bahas, Panduan Accessibility untuk memperdalam pemeriksaan pembaca layar, dan Tools HTML untuk perlengkapan pengembangan. Langkah wajar berikutnya juga sudah menunggu di luar HTML: memberi tampilan pada situs ini lewat CSS — dan markup semantik yang kita susun sepanjang Course ini adalah fondasi yang tepat untuk itu.