Semantic HTML (header, nav, main, footer)

Idenya

Selama bertahun-tahun, halaman web dibangun dari <div>: kotak generik dengan nama seperti <div class="header">. Cara itu berfungsi, tetapi namanya hanya untuk manusia; browser tidak tahu kotak mana yang navigasi dan mana yang konten utama. Elemen semantik menyatakan apa setiap bagian halaman itu, dan itu membuka manfaat nyata:

• Pengguna screen reader bisa langsung melompat ke navigasi atau konten utama ("landmark").
• Mesin pencari memahami teks mana yang artikel dan mana yang footer.
• Rekan setim membaca strukturnya sekilas.
• Fitur browser seperti reader mode bekerja lebih baik.

Landmark halaman

Hampir setiap situs punya bagian-bagian besar yang sama: header berisi logo dan navigasi di atas, konten utama di tengah, dan footer di bawah. HTML punya elemen untuk masing-masing, jadi browser (dan screen reader, dan mesin pencari) tahu persis bagian mana yang mana. Ini halaman Toko Kita yang disusun dengan elemen-elemen itu:

<header>
  <a href="/">Toko Kita</a>
  <nav aria-label="Main">
    <ul>
      <li><a href="/coffee">Coffee</a></li>
      <li><a href="/equipment">Equipment</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Freshly roasted Indonesian coffee</h1>
  <p>Beans from Aceh to Papua, roasted every Monday in Bandung.</p>
</main>

<footer>
  <p>&copy; 2024 Toko Kita · <a href="mailto:[email protected]">[email protected]</a></p>
</footer>

© adalah HTML entity, kode untuk sebuah karakter: ©. Yang lain yang akan kamu lihat adalah & (&), < (<) dan   (spasi yang tidak pernah memutus baris).

Di dalam main: article, section, aside

Area utama bisa dipecah lagi. Toko Kita punya jurnal kopi, semacam blog kecil. Setiap posting berdiri sendiri, punya bagian-bagian dengan heading-nya masing-masing, dan halamannya punya kotak berisi link terkait di samping. Masing-masing punya elemennya sendiri:

<main>
  <h1>Coffee journal</h1>

  <article>
    <h2>Why we roast on Mondays</h2>
    <p>Published <time datetime="2024-10-07">7 October 2024</time></p>
    <p>Coffee tastes best a few days after roasting...</p>

    <section>
      <h3>The resting period</h3>
      <p>Freshly roasted beans release carbon dioxide for several days...</p>
    </section>
    <section>
      <h3>Shipping schedule</h3>
      <p>Monday roasts ship on Wednesday, arriving at their best...</p>
    </section>
  </article>

  <aside>
    <h2>Related</h2>
    <ul><li><a href="/journal/grind-size">Choosing a grind size</a></li></ul>
  </aside>
</main>

• <article>: bagian yang berdiri sendiri dan tetap bermakna kalau dipisahkan: posting blog, kartu produk, ulasan, berita.
• <section>: bagian bertema dari sesuatu yang lebih besar, dengan heading-nya sendiri.
• <aside>: konten yang berkaitan dengan konten utama tetapi terpisah: link terkait, sidebar, kotak tips.
• <time datetime="2024-10-07">: tanggal atau waktu dalam format yang bisa dibaca mesin, sambil menampilkan teks apa pun yang ramah manusia.

Tes yang berguna: kalau bisa dibagikan atau disebarkan sendirian, itu article. Kalau itu sebuah bab dari sesuatu, itu section. Kalau tidak punya makna sendiri dan hanya mengelompokkan hal untuk keperluan gaya, itu <div>.

<div> dan <span> tetap punya tempat

Elemen semantik tidak menggantikan <div> (blok generik) dan <span> (potongan teks inline generik). Gunakan keduanya saat tidak ada elemen yang mendeskripsikan maknanya, biasanya sebagai pengait untuk CSS:

<article class="product-card">
  <h3>Arabica Gayo</h3>
  <div class="price-row">
    <span class="price">Rp 95.000</span>
    <span class="unit">/ 250 g</span>
  </div>
</article>

Aturannya: raih elemen semantik lebih dulu, dan mundur ke <div>/<span> hanya saat tidak ada yang cocok.

Heading membentuk kerangka isi

Setiap <section> dan <article> sebaiknya dimulai dengan heading, dan tingkat heading mengikuti strukturnya: <h1> untuk halaman, <h2> untuk bagian-bagian utamanya, <h3> di dalamnya. Pengguna screen reader bernavigasi berdasarkan heading lebih dari apa pun, jadi kerangka isi itu adalah daftar isi halaman.

Mengapa ini penting untuk kode yang bersih

Semantic HTML adalah kode yang mendokumentasikan dirinya sendiri. Bandingkan membaca <div class="wrapper"><div class="top"><div class="links"> dengan <header><nav>: yang kedua tidak butuh komentar. Ini juga berarti lebih sedikit class dan lebih sedikit CSS untuk menargetkan area-area utama, dan aksesibilitas yang sudah bawaan alih-alih ditempelkan belakangan.

Rangkuman

• Landmark: <header>, <nav>, <main> (tepat satu), <footer>.
• <article> untuk konten yang berdiri sendiri, <section> untuk bagian dengan heading, <aside> untuk tambahan yang berkaitan.
• <time datetime="YYYY-MM-DD"> untuk tanggal.
• <div> dan <span> saat tidak ada elemen semantik yang cocok.
• Heading membentuk kerangka isi: satu <h1>, lalu <h2>, <h3> secara berurutan.