HTML Headings Outline H1 H6

Ringkasan

Heading (h1–h6) menandai tingkat hierarki konten. Susunan heading yang benar membentuk document outline yang enak dibaca screen reader, search engine, dan manusia.

Konsep Dasar

• h1 = judul teratas halaman (sebaiknya satu per halaman utama, atau satu per sectioning root).
• h2–h6 = sub-bagian yang makin dalam.
• Level jangan loncat (jangan h1 langsung ke h4); naik/turun bertahap.
• Heading bukan untuk ukuran font, tapi untuk struktur. Gaya diatur lewat CSS.

Cara Kerja / Struktur

Browser dan assistive tech membangun outline dari urutan heading. Sectioning element (article, section, nav, aside) membuat "outline nested" tersendiri.

html

<h1>Belajar HTML</h1>
  <h2>Pengantar</h2>
  <h2>Elemen Dasar</h2>
    <h3>Heading</h3>
    <h3>Paragraf</h3>
  <h2>Kesimpulan</h2>

Contoh Kode

html

<main>
  <h1>Panduan HTML</h1>
  <section>
    <h2>Heading</h2>
    <p>Penjelasan heading...</p>
  </section>
</main>

Catatan Implementasi

• Satu h1 per halaman untuk halaman tunggal; untuk app SPA, tiap "view" bisa punya h1 saat aktif.
• Heading kosong (<h2></h2>) merusak outline — hindari.

Kesalahan Umum

• Pakai h1–h6 cuma buat bikin teks besar (gunakan CSS, bukan semantik palsu).
• Loncat level: h2 lalu h4 tanpa h3.
• Multiple h1 tanpa alasan struktural.

Glosarium

• Outline: kerangka hierarki heading halaman.
• Sectioning element: elemen yang membentuk bagian tersendiri (section, article, nav, aside).

Referensi

• HTML Semantics dan Struktur Dokumen
• Apa Itu HTML