Belajar HTML - Mengenal Heading dan Struktur Judul Halaman

Home » HTML

Halo teman-teman,

Setelah sebelumnya kita bahas tentang atribut HTML dan cara memaksimalkan fungsi elemen, sekarang kita lanjut ke bagian penting lainnya, yaitu heading atau judul-judul dalam halaman HTML.

Bayangin sebuah halaman web yang isinya cuma teks panjang tanpa judul. Bikin pusing, kan? Nah, heading berfungsi untuk memberi struktur, membagi isi, dan membantu pembaca (dan mesin pencari!) memahami bagian-bagian penting dalam halaman.

Mengenal Enam Level Heading (h1 sampai h6)

HTML menyediakan enam level heading:

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>
<h4>Level 4</h4>
<h5>Level 5</h5>
<h6>Level 6 (terkecil)</h6>

<h1> adalah judul utama (hanya satu per halaman)
<h2> cocok untuk bagian besar di bawah h1
<h3> sampai <h6> digunakan untuk struktur yang lebih dalam

Semakin besar angkanya, semakin kecil ukuran teksnya dan semakin rendah prioritasnya dalam struktur halaman.

Contoh Penggunaan dalam Struktur Artikel

Misalnya kamu bikin artikel resep:

<h1>Resep Nasi Goreng Spesial</h1>
<h2>Bahan-bahan</h2>
<h3>Bahan Utama</h3>
<h3>Bumbu Tambahan</h3>
<h2>Cara Memasak</h2>
<h3>Langkah 1</h3>
<h3>Langkah 2</h3>

Dengan struktur seperti ini, pembaca bisa langsung tahu bagian mana yang penting, dan mesin pencari juga lebih mudah memahami isi halaman kamu.

Tips Penggunaan Heading yang Baik

Gunakan hanya satu <h1> per halaman.
Jangan langsung loncat dari <h1> ke <h4>—jaga urutan hierarki.
Gunakan heading untuk isi yang memang penting dan berfungsi sebagai judul.
Untuk mengatur warna atau ukuran, kamu bisa pakai atribut style, seperti:

<h2 style="color: darkblue; font-size: 24px;">Subjudul dengan Gaya</h2>

Heading bukan cuma buat gaya, tapi juga penting banget untuk aksesibilitas dan SEO. Banyak orang membaca cepat dengan cara melihat heading, dan Google juga memperhatikan heading saat mengindeks konten.

Jadi pastikan kamu pakai heading dengan struktur yang rapi dan logis ya!

Kalau kamu punya pertanyaan atau masih bingung soal pemakaian heading, tulis aja di komentar. Yuk kita bahas bareng!

Di materi selanjutnya, kita akan membahas tentang paragraf di HTML—gimana cara menulis teks panjang, memisahkan baris, dan menambahkan jeda yang nyaman dibaca. Sampai ketemu di tutorial berikutnya!