Elemen semantik

Susun halaman memakai header, main, article, dan footer.

Pahami konsepnya

Elemen semantik menjelaskan peran sebuah bagian, bukan sekadar tampilannya. Struktur ini memudahkan pembaca, mesin pencari, dan alat bantu aksesibilitas memahami halaman.

Keluarga lengkapnya: <header> untuk kepala halaman (logo, judul), <nav> untuk kumpulan tautan navigasi, <main> untuk konten inti (cukup satu per halaman), <article> untuk potongan mandiri seperti artikel blog, <section> untuk pengelompokan bertema, <aside> untuk konten samping, dan <footer> untuk kaki halaman (hak cipta, tautan kontak).

Aturan praktisnya: pakai div hanya bila tidak ada elemen semantik yang cocok. Halaman yang memakai semantik benar memetakan dirinya sendiri — pembaca layar bisa melompat main/article/footer langsung, dan mesin pencari menangkap bobot tiap bagian dengan lebih akurat.

Coba contoh kode

<header><h1>Catatan Belajar</h1></header>
<main>
  <article>
    <h2>Pelajaran hari ini</h2>
    <p>Aku belajar elemen semantik HTML.</p>
  </article>
</main>
<footer><p>Ditulis oleh Zaky</p></footer>

main berisi konten utama; article cocok untuk tulisan yang bisa berdiri sendiri. Gunakan div hanya bila tidak ada elemen semantik yang sesuai.

Latihan singkat

Tambahkan nav berisi tautan ke bagian “Beranda” dan “Tentang”.