Elemen Heading HTML

Heading (judul) dalam HTML digunakan untuk memberikan struktur dan hirarki pada konten di halaman web.
Dengan heading, pengguna dan mesin pencari bisa lebih mudah memahami isi dan urutan informasi.

HTML menyediakan 6 level heading, dari <h1> sampai <h6>.

🔹 Fungsi Heading

• Menandai judul dan subjudul
• Meningkatkan aksesibilitas dan pengalaman pengguna
• Membantu SEO karena mesin pencari membaca struktur dokumen melalui heading
• Memberi struktur logis dalam konten panjang seperti artikel, tutorial, dan dokumentasi

🔸 Urutan Heading

Jangan gunakan heading hanya karena ukurannya!
Gunakan sesuai hirarki informasi, bukan tampilan visual.

📦 Contoh Struktur Heading yang Benar

<h1>Belajar HTML</h1>

<h2>1. Pengenalan</h2>
<p>HTML adalah bahasa untuk membuat halaman web.</p>

<h2>2. Struktur Dasar</h2>
<h3>2.1 Tag HTML</h3>
<p>Setiap elemen HTML ditulis menggunakan tag.</p>

<h3>2.2 Atribut HTML</h3>
<p>Atribut memberikan informasi tambahan.</p>

<h2>3. Kesimpulan</h2>
<p>HTML mudah dipelajari dan sangat penting untuk web.</p>

🚫 Hindari Ini

• Melompat heading secara acak, misalnya langsung dari <h1> ke <h4>
• Menggunakan heading untuk memperbesar teks saja (gunakan CSS untuk itu)
• Menggunakan lebih dari satu <h1> dalam satu halaman (kecuali dalam konteks HTML5 modern per section)

✅ Best Practice Heading

1. Gunakan satu <h1> sebagai judul utama per halaman
2. Ikuti urutan hirarki: <h1> → <h2> → <h3> → ...
3. Gunakan heading untuk struktur konten, bukan styling
4. Gunakan CSS (font-size, font-weight) untuk tampilan visual

🎯 Kesimpulan

Heading bukan cuma buat bikin teks jadi besar. Heading itu penting untuk:

• Struktur dokumen
• Navigasi pembaca
• SEO & aksesibilitas

Anggap heading seperti bab dan subbab di buku. Gunain yang bener supaya pembaca nggak nyasar! 📚😉