Elemen semantik: header, nav, main, footer

Elemen div tidak menyatakan apa pun tentang isinya; ia hanya kotak pembungkus. HTML menyediakan elemen yang menyebut peran bagiannya, dan browser serta pembaca layar memakai nama itu untuk melompat antarbagian tanpa membaca seluruh halaman.

• header: bagian pembuka halaman atau bagian, berisi judul dan identitas.
• nav: kumpulan tautan navigasi utama.
• main: isi pokok halaman, ditulis satu kali per halaman.
• section: satu bagian bertema yang punya judul sendiri.
• article: satu satuan isi yang berdiri sendiri, misalnya satu pengumuman.
• footer: keterangan penutup, misalnya alamat dan tahun.

<body>
  <header>
    <h1>Koperasi Melati</h1>
    <nav>
      <ul>
        <li><a href="/">Beranda</a></li>
        <li><a href="/simpanan.html">Simpanan</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>Pengumuman</h2>
      <p>Rapat anggota tahunan digelar 12 Maret.</p>
    </section>
  </main>
  <footer>
    <p>Koperasi Melati RW 04, Yogyakarta.</p>
  </footer>
</body>

Tautan navigasi ditulis sebagai daftar di dalam nav, karena yang dibaca pembaca layar bukan sekadar deretan tautan melainkan daftar dengan jumlah butir yang disebutkan lebih dulu. Elemen main dipakai sekali saja: kalau ada dua main, pembaca layar kehilangan acuan bagian mana yang isi pokoknya.

Tiga elemen paling sering tertukar. section menandai satu bagian bertema yang punya judul sendiri: kalau bagian itu tidak punya judul yang bisa ditulis, yang dibutuhkan div. article menandai satuan isi yang tetap masuk akal ketika dipindahkan keluar halaman, misalnya satu pengumuman, satu berita, atau satu ulasan. header dan footer boleh muncul lebih dari sekali, karena selain milik halaman keduanya juga bisa menjadi pembuka dan penutup satu article.

<main>
  <section>
    <h2>Berita koperasi</h2>

    <article>
      <h3>Simpanan hari raya dibuka</h3>
      <p>Pendaftaran dibuka sampai akhir bulan di loket koperasi.</p>
    </article>
  </section>
</main>

Contoh di atas bersarang tiga lapis, dari luar ke dalam. main membungkus seluruh isi pokok. section membungkus satu bagian bertema dan judul h2-nya ditulis paling atas di dalamnya. Setiap berita dibungkus satu article utuh, dari tag pembuka sampai tag penutupnya, dan judul h3 serta paragrafnya ada di dalam article itu. Bagian dengan dua berita berarti dua article yang ditulis berurutan di dalam section yang sama.

Tautan menu pada contoh pertama ditulis dengan elemen a: <a href="simpanan.html">Simpanan</a>. Atribut href berisi alamat tujuan dan teks di antara tag pembuka dan penutupnya yang terlihat di halaman. Bentuk-bentuk href dibahas utuh di modul berikutnya; untuk pelajaran ini cukup nama berkas tujuannya. Setiap tautan menu dibungkus satu li, dan semua li dibungkus satu ul di dalam nav.

Bagi pembaca layar, header, nav, main, dan footer menjadi daftar bagian bernama yang bisa dilompati langsung. Pengguna yang sudah pernah membuka halamanmu melompat ke isi pokok dalam satu perintah, tanpa mendengar menu yang sama diulang. Halaman yang seluruhnya dibungkus div tidak punya daftar itu.