← Kembali ke kursus
Pelajaran kursus · HTML
Pelajaran 05

Heading

Susun jenjang judul halaman dari h1 sampai h6.

Pahami konsepnya

Heading menandai bagian penting sebuah halaman dan tersedia enam jenjang: h1 paling besar hingga h6 paling kecil. Ukurannya menurun berurutan — h2 lebih kecil dari h1, h3 lebih kecil dari h2, dan seterusnya — membentuk hierarki seperti daftar isi sebuah dokumen.

Konvensi pemakaiannya: h1 untuk judul utama halaman (cukup satu per halaman), h2 untuk judul bab, h3 untuk sub-bab dari h2, dan seterusnya mengikuti kedalaman isi. Mesin pencari dan pembaca layar membaca jenjang ini untuk memahami struktur halamanmu — heading bukan sekadar ukuran huruf.

Karena itu, jangan memilih heading berdasarkan tampilannya semata. Butuh teks menonjol yang bukan judul? Nanti CSS yang mengaturnya. Heading dipilih berdasarkan posisinya dalam struktur isi — itulah bedanya halaman yang rapi dan halaman yang sekadar besar kecil acak.

Coba contoh kode

<h1>Judul Halaman</h1>
<h2>Bab Pertama</h2>
<h3>Sub-bab</h3>
<p>Isi mengikuti jenjang judulnya...</p>

Jenjang yang menurun membuat struktur halaman terbaca sekali lihat: judul, bab, sub-bab, isi. Coba buka enam heading berurutan h1-h6 di browser untuk merasakan perbedaan ukurannya secara langsung.

Heading di dalam elemen lain

<a href="artikel.html">
  <h3>Baca: Cara Cepat Belajar HTML</h3>
</a>

Heading boleh berada di dalam elemen lain — di sini h3 menjadi isi tautan, sehingga seluruh judulnya bisa diklik. Pola ini umum di kartu artikel dan daftar berita.

Latihan singkat

Susun halaman tentang hobi-mu dengan h1, dua h2, dan satu h3 di bawah h2 pertama, lalu isi tiap bagian satu paragraf.