HTML Headings

Bab 1: Definisi & Fungsi Utama

Dalam dunia pengembangan web, Headings (Judul) adalah elemen fundamental yang berfungsi untuk mendefinisikan hierarki dan struktur informasi sebuah halaman. Heading bukan sekadar teks berukuran besar; ia adalah kerangka logis yang membantu pengguna dan mesin memahami isi konten Anda.

Bayangkan sebuah dokumen legal atau skripsi. Dokumen tersebut pasti memiliki Judul Utama, Bab, Sub-Bab, dan Poin-poin penting. HTML mengadopsi sistem yang sama untuk memastikan keterbacaan dan keteraturan informasi di internet.

Bab 2: Enam Tingkatan Heading

Standar HTML5 menyediakan enam level heading, mulai dari <h1> hingga <h6>. Setiap level memiliki peran spesifik dalam hierarki dokumen:

Level selanjutnya (<h4>, <h5>, <h6>) digunakan untuk struktur yang lebih dalam dan rinci, seperti judul widget, catatan kaki, atau label menu.

Bab 3: Visualisasi Default Browser

Secara teknis, browser akan merender setiap heading dengan ukuran font dan ketebalan (font-weight) yang berbeda secara otomatis. Berikut adalah perbandingannya:

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Bab 4: Logika Mesin Pencari (SEO)

Search Engine (seperti Google) menggunakan bot/spider untuk mengindeks miliaran halaman web. Bot ini tidak "membaca" layaknya manusia, melainkan memindai struktur kode.

Tag Heading adalah sinyal utama bagi bot untuk memahami konteks halaman Anda:

• Relevansi Keyword: Mesin pencari memberikan bobot lebih pada kata kunci yang terdapat di dalam tag heading dibandingkan paragraf biasa.
• Struktur Navigasi: Google sering menggunakan struktur heading Anda untuk membuat "Jump Links" atau snippet navigasi di halaman hasil pencarian (SERP).
• Konsistensi Topik: Heading membantu Google memverifikasi apakah isi konten relevan dengan judul utamanya.

Bab 5: Aksesibilitas Web

Aspek yang sering dilupakan pemula adalah Aksesibilitas. Pengguna dengan gangguan penglihatan (tuna netra) menggunakan perangkat lunak Pembaca Layar (Screen Reader) untuk berselancar di internet.

Screen Reader memiliki fitur navigasi cepat yang memungkinkan pengguna melompat dari satu heading ke heading lainnya (H1 ke H2, H2 ke H3). Jika Anda tidak menggunakan heading dengan benar (misalnya menggunakan teks biasa yang ditebalkan), pengguna ini akan kesulitan memahami struktur halaman Anda.

Bab 6: Praktik Terbaik vs Terburuk

Berikut adalah perbandingan implementasi struktur heading:

Bab 7: Atribut pada Heading

Sama seperti elemen HTML lainnya, tag heading juga bisa disisipkan atribut global seperti id, class, atau title.

Contoh penggunaan atribut id untuk membuat link jangkar (anchor link) yang bisa melompat ke bagian tertentu:

<h2 id="bab-kesimpulan">Kesimpulan</h2>

⚡ Proyek Kilat: Validasi Struktur

Misi Anda adalah memperbaiki struktur dokumen yang rusak. Susunlah heading dengan urutan hierarki yang logis dan valid.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini: