HTML35 / 46

Hierarki heading tanpa lompat

Pengguna screen reader sering menavigasi dengan melompat antar heading — seperti membaca daftar isi. Karena itu heading tidak boleh melompat tingkat (h1 → h3 tanpa h2), dan jangan pilih heading berdasarkan ukuran font. Butuh teks kecil? Atur dengan CSS, bukan dengan menurunkan tingkat heading.

👀 Contoh dulu

<!-- SALAH: melompat dari h1 ke h5 -->
<h1>Panduan</h1>
<h5>Langkah Pertama</h5>

<!-- BENAR: turun satu tingkat -->
<h1>Panduan</h1>
<h2>Langkah Pertama</h2>

Hasilnya: Versi salah membuat pengguna screen reader merasa ada 3 tingkat bagian yang terlewat. Versi benar strukturnya utuh.

💡 Kalau h2 terasa terlalu besar, kecilkan lewat CSS — jangan turunkan tingkat headingnya.

📝 Sekarang giliranmu

Perbaiki struktur di bawah: ubah heading yang melompat sehingga urutannya menjadi h1 → h2 → h3 dengan benar.

Preview