Heading

Saat kita mulai mengisi body, elemen pertama yang biasanya ditulis adalah heading — judul yang membagi halaman menjadi bagian dan sub-bagian. Tanpa heading, artikel hanyalah tumpukan paragraf yang sulit dipindai. HTML menyediakan enam tingkat heading, h1 sampai h6.

Kesalahpahaman terbesarnya: tingkat heading dianggap pengatur ukuran huruf. Chapter ini menyusun jenjang yang benar sambil memisahkan dua hal itu — heading menentukan struktur, ukuran adalah urusan CSS.

Enam Tingkat Heading #

Enam elemen heading membentuk satu jenjang: h1 untuk judul halaman, lalu h2 hingga h6 untuk bagian yang semakin spesifik. Tabel berikut merangkum perannya:

Semakin besar angkanya, semakin sempit cakupan topik bagian tersebut; konten web pada umumnya jarang melewati h3 atau h4.

Satu h1 per Halaman #

Praktik umum modern: satu halaman memuat tepat satu h1 yang menjadi judul seluruh kontennya. Sintaks HTML tidak melarang lebih, tetapi mesin pencari memberi bobot terbesar pada h1 sebagai ringkasan isi halaman — judul ganda membuat sinyal itu kabur. Pengguna pembaca layar juga sering melompat dari heading ke heading untuk memetakan halaman; satu h1 berarti satu titik awal yang jelas.

Heading Itu Struktur, Bukan Ukuran #

Mekanisme pemilihan tingkatnya begini: posisi sebuah bagian di dalam jenjang menentukan heading yang dipakai, bukan ukuran tampilannya. Browser memang menampilkan h1 paling besar hingga h6 paling kecil secara bawaan — tampilan itu hanya konsekuensi, bukan alasan memilih.

Jangan Melompat Tingkat #

Aturan penurunan: bagian anak turun tepat satu tingkat dari induknya. Blok berikut melompat dari h2 langsung ke h4:

<h2>Panduan Pengiriman</h2>
<p>Pesanan dikemas setiap pagi.</p>
<h4>Ongkos Kirim Lokal</h4>
<p>Tarif rata berlaku untuk kota yang sama.</p>

Perbaikannya menurunkan sub-bagian ke h3:

<h2>Panduan Pengiriman</h2>
<p>Pesanan dikemas setiap pagi.</p>
<h3>Ongkos Kirim Lokal</h3>
<p>Tarif rata berlaku untuk kota yang sama.</p>

Menaikkan tingkat justru wajar: h2 yang muncul setelah sub-bagian h3 menandai bagian baru yang setara.

Contoh Dokumen Artikel #

Perhatikan kerangka artikel berikut — jenjangnya turun satu tingkat setiap kali masuk sub-bagian:

<h1>Merawat Tanaman Hias di Rumah</h1>
<p>Tanaman hias bertahan lama bila dirawat dengan rutinitas, bukan peralatan mahal.</p>
<h2>Menyiram dengan Benar</h2>
<p>Siram tanah sampai basah merata, lalu biarkan mengering sebelum menyiram ulang.</p>
<h2>Mengatasi Hama</h2>
<h3>Kutu Daun</h3>
<p>Kutu daun menempel di balik daun muda dan dapat dibersihkan dengan air sabun.</p>
<h3>Tungau</h3>
<p>Tungau muncul saat udara terlalu kering; semprot daun dengan air bersih.</p>

Hasil Render:

Pada browser, h1 tampil paling besar, h2 mengecil, h3 lebih kecil lagi; paragraf tampil dengan ukuran normal. Mari kita telaah jenjangnya:

1. Baris 1 (<h1> “Merawat Tanaman Hias di Rumah”): judul utama — satu-satunya h1 pada halaman.
2. Baris 3 (<h2> “Menyiram dengan Benar”): bagian pertama — turun satu tingkat dari h1.
3. Baris 5 (<h2> “Mengatasi Hama”): bagian kedua — setara dengan bagian pertama, bukan anaknya.
4. Baris 6 dan 8 (<h3> “Kutu Daun” dan “Tungau”): sub-bagian — turun tepat satu tingkat dari h2, dan keduanya setara.

Heading Kosong Dilarang #

Isi heading wajib berupa teks judul yang berarti; heading tanpa isi tidak boleh dipakai:

<h2></h2>
<p>Paragraf tanpa judul bagian.</p>

Bagi pembaca layar, heading kosong diumumkan sebagai judul tanpa nama — navigasi menjadi berisik tanpa memberi informasi. Heading juga bukan tempat menjejalkan kata kunci: judul yang ditulis demi mesin pencari tetap harus nyaman dibaca manusia.

Ringkasan #

• h1–h6 membentuk jenjang judul; semakin besar angkanya, semakin sempit cakupan bagian.
• Praktik umum: satu h1 per halaman, demi mesin pencari dan pembaca layar.
• Tingkat dipilih dari posisi struktur, bukan dari ukuran tampilan — ukuran diatur lewat CSS.
• Turun satu tingkat setiap masuk sub-bagian; jangan melompat tingkat.
• Heading kosong dilarang.

Chapter berikutnya membahas wadah isi paling mendasar: elemen p untuk paragraf, termasuk perilaku browser terhadap spasi dan baris kosong.