Heading adalah elemen judul di HTML — dari h1 untuk judul utama sampai h6 untuk sub-judul terkecil — yang memberi struktur bertingkat pada halaman web.
🧪 Tebakan cepat — boleh lompat tingkat? Setelah
<h1>, langsung pakai<h3>tanpa<h2>— halamannya tetap jalan? Jawabannya: jalan sih, tapi struktur dokumennya bolong — screen reader dan Google bacanya kayak daftar isi yang lompat bab.
Pernah merhatiin koran atau majalah? Pasti ada judul utama gede di paling atas, sub-judul lebih kecil di bawahnya, sub-sub-judul lagi yang lebih kecil — semua bertingkat. Itu hierarchy yang otak kamu otomatis bisa baca dalam 1 detik. HTML punya 6 tingkatan judul (<h1> sampai <h6>) buat bikin struktur yang sama di web. <h1> = judul paling besar (biasanya cuma SATU per halaman, kayak headline koran), terus turun makin kecil sampai <h6> yang jarang dipake.
💡 Kenapa hierarchy heading penting? Bukan sekadar styling — Google pake heading buat ngerti struktur halaman buat ranking SEO. Screen reader buat tunanetra juga skim halaman lewat heading dulu. Jadi ini bukan dekorasi, ini infrastructure.
Sintaks 6 Tingkatan Heading
Tulis heading dengan tag <h1> sampai <h6> — tingkat terbesar ke terkecil:
<h1>Nama Judul</h1>
<h2>Nama Sub Judul</h2>
<!-- ... -->
<h6>Nama Sub Sub ... Sub Judul</h6>
🎭 Analogi sehari-hari
Heading = papan kategori di toko swalayan: <h1> papan nama toko, <h2> papan lantai (Lantai 1: Elektronik), <h3> papan rak (TV, Audio, Kamera). Pelanggan bisa scan cepat tanpa baca semua produk.
⚠️ Jebakan yang sering ditemui
- Skip level (h1 → h3) = struktur rusak. Screen reader bingung. Selalu urut.
- Multiple
<h1>per halaman = SEO buruk. Cukup satu per halaman. - Pakai heading karena BESAR = salah niat. Untuk teks besar pakai CSS
font-size. Heading = struktur. - Heading di dalam
<button>atau<a>= aneh secara semantik. Heading harus berdiri sendiri.
🎯 Tingkat heading mana yang dipake?
- Judul utama halaman (cuma SATU) →
<h1>- Section utama dalam halaman →
<h2>- Sub-section dari
<h2>→<h3>- Detail di dalam
<h3>→<h4>(jarang ke<h5>/<h6>)Anggap kayak outline buku: judul buku (h1) → bab (h2) → sub-bab (h3) → poin di dalam sub-bab (h4). Skip level = pembaca bingung struktur.
TL;DR: Heading = <h1> sampai <h6>, hierarki struktur halaman (kayak outline buku). <h1> cuma SATU per halaman (judul utama). Urut hierarchy — jangan skip h1 ke h3. Heading = struktur (SEO + screen reader), BUKAN styling besar — pakai CSS untuk ukuran. Bonus: SEO Google + a11y screen reader skim halaman pakai heading.
