Section ini menyusun materi secara bertahap: kerjakan Chapter dari urutan teratas agar setiap konsep baru selalu berpijak pada konsep sebelumnya. Setiap Chapter menyertakan contoh kode yang telah diuji dan dapat Anda ikuti langsung di editor.

# Konsep Semantic HTML

Pahami makna semantik dalam HTML, manfaatnya bagi aksesibilitas dan SEO, serta peta elemen struktur HTML5.

Buka → # Header dan Footer

Gunakan header dan footer sebagai pembuka serta penutup kontainer, baik level halaman maupun level artikel.

Buka → # Main

Tandai konten inti halaman dengan main: aturan satu elemen, larangan penempatan, dan kaitannya dengan skip link.

Buka → # Nav

Kelola blok navigasi dengan nav: menu situs, breadcrumb, dan pagination, termasuk penamaan bila nav lebih dari satu.

Buka → # Article dan Section

Bedakan article sebagai komposisi mandiri dan section sebagai pengelompokan tematik, termasuk kapan div lebih tepat.

Buka → # Aside

Tempatkan konten tangensial pada aside, dari catatan di dalam artikel sampai sidebar halaman, beserta peran landmarknya.

Buka → # Figure dan Figcaption

Bungkus gambar, kode, atau tabel yang dirujuk sebagai satu unit dengan figure dan beri keterangan lewat figcaption.

Buka → # Memilih Elemen Semantik

Rangkum section Semantic HTML: pohon keputusan elemen, tabel ringkasan, anti-pattern, dan studi kasus halaman berita.

Buka →