Bab 07: Cara Membuat Heading di HTML
Pernah lihat website yang isiannya kayak tumpukan kardus tanpa label?
Ada teks gede di tengah, subjudul kecil di bawah, terus tiba-tiba ada kesimpulan tanpa bab pembuka?
Nah, itu tanda heading nya acak-acakan.
Di HTML, heading bukan cuma soal tampilan gede doank, dia adalah kerangka tulang punggung halamanmu. Google, pembaca layar, bahkan pengunjung biasa, semua butuh struktur yang jelas biar nggak bingung.
Langsung aja kita masuk ke dunia <h1> sampai <h6>. dan bahas cara membuat heading di HTML.
Apa Itu Headings HTML
Heading di HTML itu kayak judul bab di buku. Ada bab utama, sub bab, sub sub bab, dan seterusnya. Di HTML, heading menggunakan dengan tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Semakin kecil angkanya, semakin penting levelnya.<h1> = judul utama halaman<h6> = detail super spesifik (jarang dipakai)
Ingat:
Heading itu semantik, bukan styling. Artinya: dia punya makna struktural, bukan cuma buat bikin teks gede.
Headings Itu Kayak Apa? Contoh Visualnya!
Lihat perbedaan ukuran dan bobot default-nya:
<h1>Judul Utama (H1)</h1>
<h2>Subjudul Utama (H2)</h2>
<h3>Sub-subjudul (H3)</h3>
<h4>Detail Lebih Dalam (H4)</h4>
<h5>Level Hampir Mikro (H5)</h5>
<h6>Level Nyaris Tak Terlihat (H6)</h6>Kalau kamu render di browser, hasilnya kira-kira:
- Judul Utama (H1)
- Subjudul Utama (H2)
- Sub-subjudul (H3)
- Detail Lebih Dalam (H4)
- Level Hampir Mikro (H5)
- Level Nyaris Tak Terlihat (H6)
Tapi jangan tertipu ukuran visualnya! Yang penting bukan gede, tapi hierarkinya.
Kenapa Headings Penting Buat Struktur Konten
Bayangin Google atau screen reader masuk ke halamanmu.
Mereka nggak lihat desain, mereka baca struktur.
Kalau kamu tulis:
<div style="font-size: 24px; font-weight: bold;">Tentang Kami</div>
<p>...</p>
<div style="font-size: 20px;">Sejarah</div>Browser nggak tahu itu judul atau subjudul! Tapi kalau pakai heading:
<h1>Tentang Kami</h1>
<p>...</p>
<h2>Sejarah</h2>Sekarang mesin tahu:
- Ini halaman utama tentang “Tentang Kami”
- “Sejarah” adalah bagian di dalamnya
Struktur = pemahaman.
Dan pemahaman = aksesibilitas + SEO + UX yang baik.
Urutan Heading yang Benar: Cara yang Paling Keren Dipakai
Jangan lompat-lompat! Urutan heading harus logis dan berurutan, seperti outline dokumen.
✅ Benar:
<h1>Judul Artikel</h1>
<h2>Pendahuluan</h2>
<h3>Latar Belakang</h3>
<h2>Metode</h2>
<h3>Alat yang Digunakan</h3>
<h4>Spesifikasi Laptop</h4>❌ Salah:
<h1>Judul</h1>
<h3>Langsung ke H3? Kok bisa?</h3> <!-- Lompat dari H1 ke H3 -->
<h2>Terus balik ke H2?</h2> <!-- Kacau balau! -->Ingat:
<h1>→ level 1<h2>→ anak dari<h1><h3>→ anak dari<h2>, dan seterusnya
Bisa dibayangin kayak pohon keluarga!
Tips: Pakai Hanya SATU <h1> Per Halaman
Ini best practice yang dipegang developer & SEO expert:
Satu halaman = satu topik utama = satu
<h1>
Contoh:
<!-- Halaman "Resep Nasi Goreng" -->
<h1>Resep Nasi Goreng Spesial ala Rumahan</h1>
<h2>Bahan-bahan</h2>
<h2>Cara Membuat</h2>Jangan:
<h1>Resep Nasi Goreng</h1>
<h1>Cara Membuat</h1> <!-- Jangan! Ini bukan topik utama. -->Manfaatnya:
- Google lebih gampang paham topik utama
- Aksesibilitas lebih baik (screen reader fokus ke satu judul utama)
- Kode lebih rapi & mudah di-maintain
Catatan:
Kalau pakai framework modern (React, Vue), pastikan tiap page tetap punya satu<h1>meski komponennya dibagi-bagi.
Contoh Hierarki Headings di HTML yang Cakep
Bayangin kamu bikin artikel “Panduan Belajar HTML untuk Pemula”:
<h1>Panduan Belajar HTML untuk Pemula</h1>
<h2>Apa Itu HTML?</h2>
<p>...</p>
<h2>Struktur Dasar HTML</h2>
<h3>Tag, Element, dan Atribut</h3>
<h3>Deklarasi DOCTYPE</h3>
<h2>Elemen-Elemen Penting</h2>
<h3>Heading dan Paragraf</h3>
<h4>Cara Membuat Heading</h4>
<h4>Paragraf dengan <p></h4>
<h3>Link dan Gambar</h3>
<h2>Kesimpulan</h2>Lihat? Rapi, bertingkat, dan mudah di-navigasi.
Pengunjung bisa langsung scan dan tahu “Oh, bagian ini bahas apa.”
Ukuran Default Headings & Gimana Cara Merubahnya
Secara default, browser kasih ukuran berbeda:
| Tag | Ukuran (kira-kira) |
|---|---|
<h1> | 2em (~32px) |
<h2> | 1.5em (~24px) |
<h3> | 1.17em (~19px) |
<h4> | 1em (~16px) |
<h5> | 0.83em (~13px) |
<h6> | 0.67em (~11px) |
Tapi jangan ubah ukuran cuma buat gaya!
Kalau kamu pengen <h3> kelihatan segede <h1>, tetap pakai <h3> lalu ubah tampilannya lewat CSS:
<style>
h3 {
font-size: 2.5em;
font-weight: bold;
color: #2563eb;
}
</style>
<h3>Ini tetap sub-subjudul, tapi tampilan custom!</h3>Prinsipnya:
Semantik dulu, styling belakangan.
Kesalahan Umum Pemula (Dan Cara Menghindarinya)
Kesalahan #1: Pake heading cuma buat bikin teks gede
Salah:
<h3>Harga Promo Hari Ini!</h3> <!-- Ini bukan judul bagian, cuma dekorasi -->Benar:
<p class="promo-text">Harga Promo Hari Ini!</p>
<!-- Lalu styling via CSS -->Kesalahan #2: Lompat level
Dari <h1> langsung ke <h4>? Nggak boleh!
Kesalahan #3: Banyak <h1>
Satu halaman, satu jiwa: satu <h1>.
Headings & SEO Biar Kontenmu Dicintai Google
Google pakai heading buat:
- Pahami topik halaman
- Identifikasi bagian penting
- Cocokkan dengan kata kunci pencarian
Kalau kamu tulis:
<h1>Resep Nasi Goreng Enak</h1>
<h2>Bahan Nasi Goreng</h2>
<h2>Cara Membuat Nasi Goreng</h2>Google tahu:
- Ini halaman resep
- Ada bagian “bahan” dan “cara membuat”
- Kata kunci “nasi goreng” muncul di tempat strategis
Tapi kalau heading-nya acak atau nggak ada? Google cuma bisa nebak. Dan nebak-nebak itu nggak bagus buat ranking.
Pro tip:
Masukkan kata kunci utama di<h1>, lalu kata turunan di<h2>/<h3>.
Ringkasan Supaya Langsung Paham & Bisa Dipraktikkan
- Heading di HTML:
<h1>sampai<h6> <h1>= judul utama halaman cuma boleh 1 per halaman- Urutan harus logis: jangan lompat level!
- Heading = struktur, bukan styling
- Untuk ubah tampilan, pakai CSS jangan ganti tag cuma biar gede
- Heading bantu SEO, aksesibilitas, dan UX
- Jangan pakai heading buat dekorasi itu tugas CSS!
Sekarang kamu udah tahu: Heading itu bukan soal ukuran, tapi soal makna.
Dengan struktur heading yang rapi, website mu jadi:
- Lebih mudah dipahami manusia
- Lebih ramah buat mesin pencari
- Lebih inklusif buat semua pengguna
Jadi, mulai sekarang, jangan asal gedein teks pake <h3> biar kelihatan keren. Bangun struktur yang jelas, lalu percantik lewat CSS.
Happy coding, dan jangan lupa “Kode yang rapi, bikin hidup lebih tenang.”
Cek daftar isi Belajar HTML untuk Pemula lengkap disini.