Heading h1 sampai h6

Analogi: Daftar Isi Buku Pelajaran

Bayangkan kamu membuka buku paket setebal 300 halaman tanpa daftar isi. Kamu disuruh mencari materi fotosintesis, dan kamu harus membalik halaman satu per satu. Capek, kan? Sekarang bayangkan buku yang rapi: Bab 3, di bawahnya ada 3.1 dan 3.2, dan di bawah 3.1 ada sub-bagian lagi. Kamu langsung tahu harus pergi ke mana.

Nah, heading di HTML itu persis seperti daftar isi. Bedanya, yang membaca daftar isi ini bukan cuma manusia, tapi juga Google, browser, dan screen reader (alat baca layar untuk tunanetra). Mereka semua membaca heading untuk menjawab dua pertanyaan: halaman ini tentang apa, dan bagian-bagiannya apa saja. Jadi heading bukan sekadar cara membuat tulisan jadi besar. Itu cuma efek samping. Fungsi utamanya adalah memberi struktur pada halaman.

Kenapa Heading Dibuat (Masalah yang Dipecahkannya)

Di awal sejarah web, orang membuat judul hanya dengan memperbesar font lewat tag presentasi. Hasilnya, browser dan mesin pencari tidak bisa membedakan mana judul, mana subjudul, dan mana isi biasa. Semuanya "cuma teks". Google tidak tahu topik utama halaman, screen reader tidak bisa melompat antar bagian, dan membuat daftar isi otomatis menjadi mustahil.

Heading h1 sampai h6 lahir untuk memecahkan masalah itu. Enam level ini memberi tahu mesin: ini judul utama (h1), ini bagian besar di bawahnya (h2), ini sub-bagian (h3), dan seterusnya. Dengan struktur ini, Google bisa menampilkan halamanmu dengan benar di hasil pencarian, screen reader bisa membuat peta navigasi, dan kamu sendiri jauh lebih mudah mengelola halaman yang panjang.

Tiga Aturan yang Wajib Dipegang

1. Satu h1 per halaman. Anggap h1 itu judul bukunya. Satu buku tidak punya dua judul utama, kan? Google memakai h1 untuk menebak topik halaman, jadi kalau ada dua, Google jadi bingung.
2. Jangan lompat level. Urutannya harus h1 lalu h2 lalu h3. Jangan dari h1 langsung ke h4. Ibarat daftar isi, tidak ada Bab 1 yang langsung lompat ke sub-sub-sub bagian tanpa melewati sub bagian dulu.
3. Jangan pakai heading cuma demi tampilan. Butuh teks besar yang bukan judul? Itu urusan CSS (font-size), bukan heading. Heading itu soal makna, bukan soal gaya.

Contoh 1: Paling Sederhana

<h1>Judul Halaman</h1>
<h2>Bagian Besar</h2>
<h3>Sub Bagian</h3>

Perhatikan polanya: h1 paling atas, lalu turun satu level ke h2, lalu turun lagi ke h3. Tidak ada lompatan. Kalau kamu membacanya seperti daftar isi, bunyinya: "Judul Halaman, di dalamnya ada Bagian Besar, di dalamnya ada Sub Bagian." Masuk akal, kan?

Contoh 2: Struktur Artikel yang Realistis

Sekarang contoh yang lebih mirip halaman asli, misalnya artikel resep di sebuah blog:

<h1>Resep Nasi Goreng Spesial</h1>

<h2>Bahan-bahan</h2>
<h3>Bahan Utama</h3>
<h3>Bumbu Halus</h3>

<h2>Langkah Memasak</h2>
<h3>Persiapan</h3>
<h3>Memasak</h3>

<h2>Tips Penyajian</h2>

Lihat, satu halaman boleh punya banyak h2 (Bahan-bahan, Langkah Memasak, Tips Penyajian), dan tiap h2 boleh punya beberapa h3. Yang tidak boleh: dua h1, atau h3 yang muncul tanpa h2 di atasnya. Struktur seperti ini juga dipakai Google untuk menampilkan tautan "lompat ke bagian" di hasil pencarian. Rapi di kode, rapi juga di Google.

Kesalahan Umum Pemula

Salah: banyak h1 dalam satu halaman.

<h1>Tentang Kami</h1>
<h1>Layanan Kami</h1>
<h1>Kontak</h1>

Benar: cuma satu h1, sisanya h2.

<h1>Tentang Perusahaan Kami</h1>
<h2>Layanan Kami</h2>
<h2>Kontak</h2>

Kenapa salah? Karena h1 itu "judul bukunya". Tiga judul utama dalam satu halaman sama saja dengan tidak punya judul utama. Google jadi tidak tahu topik halamanmu yang sebenarnya.

Salah: lompat level seenaknya.

<h1>Panduan Wisata</h1>
<h4>Kuliner Bandung</h4>

Benar: turun bertahap.

<h1>Panduan Wisata</h1>
<h2>Kuliner Bandung</h2>

Kenapa salah? Screen reader mengumumkan level heading ke penggunanya ("heading level 4"). Lompat dari 1 ke 4 membuat mereka mengira ada bagian yang hilang atau rusak.

Salah: heading dipakai supaya teksnya besar.

<h3>Klik di sini untuk promo spesial!</h3>

Benar: itu bukan judul bagian, jadi pakai paragraf plus CSS.

<p class="promo-besar">Klik di sini untuk promo spesial!</p>

Kenapa salah? Heading menipu mesin pencari dan screen reader: mereka mengira "promo spesial" adalah bagian penting dari struktur halaman, padahal cuma teks ajakan.

Catatan teknis: Screen reader punya fitur daftar heading yang menampilkan semua heading halaman seperti daftar isi interaktif. Pengguna tunanetra melompat antar heading untuk bernavigasi cepat. Hierarki yang rapi membuat fitur ini bekerja dengan baik, hierarki yang kacau membuatnya tidak berguna.