Penggunaan dan Fungsi section di HTML: Panduan Semantik untuk Pemula

Tag <section> adalah elemen semantik HTML5 yang digunakan untuk membagi konten halaman menjadi bagian-bagian tematik. Berbeda dengan <div> yang tidak memiliki makna khusus, <section> memberi arti bahwa konten di dalamnya adalah satu kesatuan topik.

1. Apa itu Tag <section>?

Elemen <section> merepresentasikan sebuah bagian tematik yang umumnya memiliki heading (<h1> sampai <h6>). Google dan mesin pencari lainnya menggunakan struktur semantik HTML untuk memahami hierarki konten halaman — ini penting untuk SEO.

<section>
  <h2>Tentang Kami</h2>
  <p>Kami adalah website tutorial pemrograman yang membantu pemula belajar coding.</p>
</section>

2. Perbedaan <section>, <article>, dan <div>

Banyak pemula bingung membedakan ketiganya. Berikut panduan praktisnya:

Aturan praktis:

• Jika konten bisa diambil dan diletakkan di halaman lain sebagai konten utuh → <article>
• Jika konten adalah bagian dari tema yang lebih besar → <section>
• Jika Anda butuh pembungkus hanya untuk keperluan CSS → <div>

3. Contoh Penggunaan <section> yang Benar

Struktur Halaman Beranda

<h1>Beranda</h1>

<section>
  <h2>Tentang Kami</h2>
  <p>Kami menyediakan tutorial pemrograman gratis untuk pemula di Indonesia sejak 2021.</p>
</section>

<section>
  <h2>Layanan Kami</h2>
  <ul>
    <li>Tutorial PHP</li>
    <li>Tutorial JavaScript</li>
    <li>Tutorial Python</li>
  </ul>
</section>

<section>
  <h2>Hubungi Kami</h2>
  <p>Email: [email protected]</p>
  <p>Telepon: 08900000000</p>
</section>

Kombinasi <article> dan <section>

<article>
  <hgroup>
    <h1>Belajar HTML Semantic</h1>
    <h2>Panduan untuk Pemula</h2>
  </hgroup>

  <section>
    <h2>Apa itu Semantic HTML?</h2>
    <p>Semantic HTML adalah cara menulis kode HTML yang menggunakan elemen sesuai maknanya.</p>
  </section>

  <section>
    <h2>Mengapa Semantic HTML Penting?</h2>
    <ul>
      <li>Membantu SEO — mesin pencari memahami konten</li>
      <li>Meningkatkan aksesibilitas — pembaca layar bisa navigasi dengan baik</li>
      <li>Kode lebih mudah dibaca dan dipelihara</li>
    </ul>
  </section>
</article>

4. Accessibilty dengan <section>

Penggunaan <section> yang benar membantu pengguna screen reader menavigasi halaman. Pastikan setiap <section> memiliki heading yang jelas — ini adalah praktik aksesibilitas yang penting.

<!-- ✅ BAIK: section dengan heading -->
<section aria-labelledby="produk-heading">
  <h2 id="produk-heading">Produk Kami</h2>
  ...
</section>

<!-- ❌ KURANG: section tanpa heading -->
<section>
  ...
</section>

Catatan: HTML5 validator akan mengeluarkan warning jika <section> tidak memiliki heading.

5. Praktik Terbaik untuk SEO

1. Gunakan satu <h1> per halaman untuk judul utama
2. Setiap <section> harus punya heading (<h2> hingga <h6>)
3. Jangan gunakan <section> sebagai pengganti <div> CSS — bedakan berdasarkan makna
4. Struktur heading harus hirarkis — jangan lompat dari <h2> ke <h5>
5. Tambahkan aria-label pada <section> jika heading tidak terlihat (misal untuk tab panel)

Tips Aksesibilitas dan SEO

1. Gunakan heading secara hierarkis — Satu <h1> per halaman, diikuti <h2>, <h3>, dst. Jangan melompat-lompat.
2. Alt text pada gambar — Setiap <img> harus memiliki atribut alt yang deskriptif untuk aksesibilitas dan SEO.
3. Semantic HTML — Gunakan <header>, <nav>, <main>, <article>, <section>, <footer> sesuai fungsinya, bukan <div> untuk semuanya.
4. Label pada form — Setiap input form harus memiliki <label> yang terasosiasi dengan atribut for.
5. Validasi HTML — Gunakan validator W3C untuk memastikan kode HTML Anda bebas dari error.

Struktur HTML yang baik adalah fondasi website yang accessible dan SEO-friendly.

Artikel Terkait

• Cara Membuat Tabel di HTML
• Cara Membuat Footer di HTML
• Cara Membuat Form di HTML dan PHP

Kesimpulan

Tag <section> adalah elemen semantik penting dalam HTML5 yang membantu struktur halaman lebih bermakna. Gunakan <section> ketika Anda memiliki konten tematik yang membutuhkan heading sendiri. Bedakan dengan <article> (untuk konten independen) dan <div> (untuk keperluan styling saja). Dengan struktur semantik yang baik, SEO dan aksesibilitas website Anda akan meningkat.