HTML 07: Menyusun Layout dengan Elemen Semantik

Elemen semantik menjelaskan fungsi suatu bagian, bukan tampilannya. Browser tidak otomatis membuat header terlihat menarik; CSS tetap diperlukan. Keuntungannya adalah kode lebih mudah dipahami oleh developer dan teknologi bantu.

Tujuan Belajar

• Memilih elemen semantik berdasarkan arti.
• Menyusun kerangka halaman sederhana.
• Menghindari penggunaan div untuk semua bagian.

1. Elemen Utama

• header: pembuka halaman atau sebuah bagian.
• nav: kelompok link navigasi utama.
• main: konten utama yang unik pada halaman.
• section: kelompok konten bertema, biasanya memiliki heading.
• article: konten mandiri yang tetap masuk akal jika dibagikan terpisah.
• aside: informasi tambahan yang berkaitan secara tidak langsung.
• footer: informasi penutup halaman atau bagian.

2. Contoh Struktur Halaman

Satu halaman umumnya hanya memiliki satu main. Namun header dan footer dapat muncul di dalam article atau section jika bagian tersebut membutuhkannya.

3. section atau div?

Gunakan section jika konten mempunyai tema yang dapat diberi heading.

Gunakan div jika Anda hanya membutuhkan pembungkus untuk CSS atau JavaScript dan tidak ada makna khusus.

Kesalahan Umum

• Menganggap semua pembungkus harus menjadi section.
• Membuat section tanpa heading.
• Menggunakan beberapa main yang terlihat bersamaan.
• Memilih elemen berdasarkan nama class CSS, bukan maknanya.

Latihan

Ambil halaman yang seluruhnya memakai div. Identifikasi navigasi, konten utama, artikel mandiri, informasi tambahan, dan footer, lalu ganti dengan elemen semantik yang sesuai.

Rangkuman

Semantik adalah tentang arti. Mulailah dari struktur konten, kemudian pilih elemen yang paling menjelaskan fungsi setiap bagian. Gunakan div jika tidak ada elemen semantik yang tepat.