Heading HTML: Arti h1 h2 h3, Fungsi, dan Cara Menyusun Judul Halaman dengan Benar
Heading HTML adalah sistem judul bertingkat di halaman web yang digunakan untuk menyusun struktur topik dan subtopik. Tag heading ditulis dari <h1> sampai <h6>, di mana huruf “h” berarti heading (judul) dan angka menunjukkan levelnya. Banyak pemula mengira h1, h2, h3 hanya soal ukuran teks, padahal fungsi utamanya adalah membentuk kerangka logika halaman. Di materi ini kita bahas dari nol: arti tiap tag, dipakai kapan, bedanya apa, lalu langsung contoh dan praktik.
Apa Itu h1 h2 h3 di HTML (Penjelasan Paling Dasar)
Heading HTML adalah tag judul. Dipakai untuk menandai bagian judul di halaman.
Artinya:
- h1 = heading level 1 → judul utama
- h2 = heading level 2 → subjudul utama
- h3 = heading level 3 → sub-subjudul
- h4–h6 = turunan level lebih dalam
Contoh paling sederhana:
<h1>Belajar HTML</h1> <h2>Dasar</h2> <h3>Tag</h3>
Bukan cuma beda ukuran — tapi beda level arti.
Analogi Biar Gampang Dipahami
Bayangkan dokumen seperti buku.
Struktur buku:
- Judul buku → h1
- Judul bab → h2
- Sub bab → h3
- Sub bagian → h4
Jadi heading HTML itu seperti daftar isi bertingkat. Browser dan mesin pencari membaca struktur ini untuk memahami isi halaman.
Fungsi Heading HTML di Halaman Web
Heading HTML dipakai untuk:
- memberi judul bagian
- memecah topik panjang
- membentuk struktur logis
- membantu pembaca scanning cepat
- membantu SEO memahami topik
- membantu screen reader navigasi
Tanpa heading, halaman terlihat ada teks, tapi tidak punya kerangka.
Kapan Pakai h1
h1 dipakai untuk judul utama halaman. Biasanya mewakili topik inti.
Contoh:
<h1>Panduan Belajar HTML Dasar</h1>
Praktik umum SEO: satu halaman satu h1.
Di WordPress, judul artikel biasanya sudah otomatis menjadi h1 — jadi di isi artikel tidak perlu membuat h1 lagi.
Kapan Pakai h2
h2 dipakai untuk bagian besar di bawah judul utama. Biasanya untuk membagi topik menjadi beberapa segmen utama.
Contoh:
<h2>Apa Itu HTML</h2> <h2>Struktur Dasar HTML</h2> <h2>Latihan Awal</h2>
Kalau h1 = judul buku → h2 = judul bab.
Kapan Pakai h3
h3 dipakai untuk subbagian dari h2. Artinya pembahasan yang lebih spesifik di dalam satu bagian.
Contoh:
<h2>Struktur Dasar HTML</h2> <h3>Tag</h3> <h3>Atribut</h3> <h3>Contoh</h3>
Kalau h2 = bab → h3 = subbab.
Aturan Hierarki Heading HTML
Heading harus berurutan, tidak loncat sembarang.
Struktur benar:
<h1>Judul</h1> <h2>Bagian</h2> <h3>Subbagian</h3> <h2>Bagian lain</h2> <h3>Subbagian</h3>
Struktur salah:
<h1>Judul</h1> <h4>Langsung lompat</h4>
Loncat level membuat struktur dokumen membingungkan bagi mesin dan alat bantu baca.
Heading HTML Bukan untuk Besar Kecil Font
Kesalahan umum: memilih h2 atau h3 karena ukuran tampilannya pas. Itu salah konsep. Level heading ditentukan oleh posisi dalam struktur, bukan tampilan. Urusan besar kecil huruf seharusnya diatur dengan CSS.
Contoh Struktur Heading dalam Artikel Nyata
Contoh kerangka artikel tutorial.
<h1>Belajar HTML Dasar</h1> <h2>Pengenalan</h2> <p>Penjelasan awal.</p> <h2>Tag HTML</h2> <h3>Tag Pembuka</h3> <p>Penjelasan.</p> <h3>Tag Penutup</h3> <p>Penjelasan.</p> <h2>Latihan</h2> <p>Instruksi.</p>
Terlihat jelas mana topik dan turunan topiknya.
Praktik Langsung: Coba Susun Struktur Heading
Buat file HTML dan tempel ini.
<!DOCTYPE html> <html> <head> <title>Latihan Heading HTML</title> </head> <body> <h1>Belajar Web</h1> <h2>Frontend</h2> <h3>HTML</h3> <h3>CSS</h3> <h2>Backend</h2> <h3>Database</h3> <h3>API</h3> </body> </html>
Buka di browser. Perhatikan susunan judulnya. Lalu coba tukar levelnya dan lihat perubahan struktur.
Studi Kasus: Mengubah Teks Acak Jadi Struktur Heading
Teks mentah:
Belajar HTML Dasar Tag Atribut Contoh
Versi terstruktur:
<h1>Belajar HTML</h1> <h2>Dasar</h2> <h3>Tag</h3> <h3>Atribut</h3> <h2>Contoh</h2>
Sekarang topik dan subtopik terlihat jelas.
Kesalahan Umum Penggunaan Heading
Kesalahan yang sering terjadi:
- semua judul dijadikan h1
- memilih level karena ukuran visual
- tidak memakai heading sama sekali
- melompat level tanpa struktur
- memakai heading hanya untuk dekorasi
Struktur heading yang benar membuat halaman jauh lebih kuat secara teknis dan SEO.
Referensi Teknis Heading HTML
Dokumentasi resmi heading HTML bisa dibaca di MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML — ini rujukan standar developer.
Lanjut Materi Berikutnya
Setelah memahami heading HTML dan cara menyusun h1 h2 h3 dengan benar, langkah berikutnya adalah mempelajari daftar terstruktur menggunakan ordered list dan unordered list. Pastikan juga kamu sudah memahami materi tentang <a href=”/paragraf-html”>struktur teks</a> agar kerangka dan isi halaman sama-sama rapi. Di artikel berikutnya kita masuk ke tag list secara mendalam.
