Judul besar di beranda, judul bab di halaman artikel, dan subjudul kecil di bawahnya semuanya dibentuk oleh elemen heading. Section Teks dan Formatting kita buka dengan heading karena judul menjadi kerangka tempat seluruh isi dokumen bergantung. Browser menyediakan enam level heading, mulai dari h1 hingga h6, dan kita memilih levelnya berdasarkan struktur topik, bukan ukuran huruf. Pada Chapter ini kita mempelajari aturan hierarki yang benar, hubungan heading dengan outline dan mesin pencari, serta contoh artikel yang tersusun bertingkat.

Enam Level Heading #

HTML menyediakan enam elemen heading: h1, h2, h3, h4, h5, dan h6. Angka pada nama elemen menunjukkan kedalaman struktur: h1 menandai judul paling atas, sedangkan h6 menandai judul paling dalam. Karena termasuk elemen blok (dibahas pada Chapter Nested Elements), setiap heading memulai baris baru dan memisahkan diri dari teks di sekelilingnya.

html Enam level heading dalam satu dokumen 
<h1>Judul Utama</h1>
<h2>Judul Bagian</h2>
<h3>Subbagian</h3>
<h4>Anak Subbagian</h4>
<h5>Detail Tambahan</h5>
<h6>Catatan Terdalam</h6>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - "Judul Utama" paling besar dan tebal (h1)
  - Ukuran huruf mengecil berurutan hingga "Catatan Terdalam" (h6)
  - Setiap heading berdiri pada barisnya sendiri dengan jarak di atas dan bawahnya

Browser menerapkan style bawaan pada tiap level: huruf makin besar ketika levelnya makin tinggi. Style tersebut hanya tampilan default, bukan bagian dari makna elemen. Karena itu pemilihan level heading kita dasarkan pada satu pertanyaan: seberapa dalam topik ini berada dalam struktur dokumen?

Hierarki yang Benar #

Struktur heading yang sehat mengikuti tiga aturan berikut:

  • Satu h1 per halaman. Elemen h1 menjadi identitas utama dokumen; judul lain turun ke level h2 ke bawah.
  • Tanpa lompatan level. h2 diikuti h3, bukan langsung h4; lompatan membuat pembaca menyangka ada bagian yang hilang.
  • Level mengikuti kedalaman topik, bukan panjang teks. Subbab pendek tetap berhak atas levelnya bila memang turunan dari bab di atasnya.

Dua kelompok pembaca sangat bergantung pada hierarki tersebut. Pembaca layar (screen reader) mendaftar seluruh heading halaman sebagai menu navigasi, sehingga struktur yang rapi memudahkan pengunjung melompat ke bagian yang dibutuhkan. Mesin pencari membaca heading untuk memahami topik halaman: kata pada heading membobot lebih daripada teks paragraf biasa, dan h1 umumnya mewakili topik utama. Outline yang konsisten menguntungkan kedua kelompok sekaligus.

Contoh Artikel dengan h2 dan h3 #

File berikut menyusun jurnal belajar dengan hierarki lengkap: satu h1, dua h2, dan tiga h3. Simpan sebagai contoh-heading.html, lalu buka di browser:

html contoh-heading.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jurnal Belajar Web Budi</title>
</head>
<body>
  <h1>Jurnal Belajar Web Budi</h1>

  <h2>Rencana Belajar</h2>
  <p>Budi membagi latihan HTML ke dalam dua fase besar.</p>

  <h3>Fase Pertama: Struktur</h3>
  <p>Fase ini berlatih heading, paragraf, dan tautan.</p>

  <h3>Fase Kedua: Media</h3>
  <p>Fase ini menambahkan gambar dan tabel ke latihan.</p>

  <h2>Catatan Mingguan</h2>
  <p>Budi menulis ringkasan materi pada setiap akhir pekan.</p>

  <h3>Minggu Pertama</h3>
  <p>Budi berlatih membuat dokumen HTML yang valid.</p>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - "Jurnal Belajar Web Budi" paling besar di bagian atas halaman (h1)
  - Dua judul bagian lebih kecil (h2)
  - Tiga subjudul lebih kecil lagi (h3)
  - Satu paragraf pendek menuntun ke setiap judul

Mari kita telaah pilihan level heading di atas:

  1. Baris 9 (h1): judul halaman, satu-satunya level teratas pada dokumen ini.
  2. Baris 11 dan 20 (h2): dua bagian besar jurnal yang sejajar karena setara kedudukannya.
  3. Baris 14, 17, dan 23 (h3): subjudul yang menjadi anak bagian dari h2 di atasnya; tidak ada level yang dilompati.
  4. Paragraf di bawah setiap heading: isi dari bagian tersebut; heading selalu berpasangan dengan konten yang dibimbingnya.

Dengan hierarki di atas, outline jurnal Budi terbaca jelas oleh browser, pembaca layar, dan mesin pencari. Isi di bawah setiap judul kini perlu kita susun sebagai paragraf yang benar, dan itulah topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-heading.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jurnal Belajar Web Budi</title>
</head>
<body>
  <h1>Jurnal Belajar Web Budi</h1>

  <h2>Rencana Belajar</h2>
  <p>Budi membagi latihan HTML ke dalam dua fase besar.</p>

  <h3>Fase Pertama: Struktur</h3>
  <p>Fase ini berlatih heading, paragraf, dan tautan.</p>

  <h3>Fase Kedua: Media</h3>
  <p>Fase ini menambahkan gambar dan tabel ke latihan.</p>

  <h2>Catatan Mingguan</h2>
  <p>Budi menulis ringkasan materi pada setiap akhir pekan.</p>

  <h3>Minggu Pertama</h3>
  <p>Budi berlatih membuat dokumen HTML yang valid.</p>
</body>
</html>