HTML Headings

1. Enam Tingkatan Heading (H1 - H6)

HTML menyediakan enam level heading yang berbeda, mulai dari <h1> hingga <h6>.

• <h1>: Paling penting (Biasanya judul utama halaman).
• <h6>: Paling tidak penting (Judul level terendah).

Secara default, browser akan menampilkan <h1> dengan ukuran font terbesar dan tebal, sedangkan <h6> akan tampil paling kecil.

Contoh Implementasi

<h1>Heading 1 - Judul Utama</h1>
<h2>Heading 2 - Sub Judul</h2>
<h3>Heading 3 - Sub Bagian</h3>
<h4>Heading 4 - Sub Bagian Kecil</h4>
<h5>Heading 5 - Judul Lebih Kecil</h5>
<h6>Heading 6 - Judul Terkecil</h6>

Hasil di Browser: Browser akan merender teks tersebut secara berurutan dari ukuran paling besar ke paling kecil. Namun, ingatlah bahwa ukuran ini bisa (dan seharusnya) diubah nanti menggunakan CSS.

2. Hierarki dan Struktur Dokumen

Jangan memilih heading berdasarkan ukurannya saja. Pilihlah berdasarkan tingkat kepentingannya dalam struktur dokumenmu.

Bayangkan struktur dokumenmu seperti sebuah daftar isi.

• <h1> adalah topik utama halaman tersebut.
• <h2> adalah poin-poin utama yang menjelaskan topik tersebut.
• <h3> adalah rincian dari poin-poin utama tersebut.

Contoh Struktur yang Baik

<h1>Tutorial Belajar HTML untuk Pemula</h1>

<h2>Pengenalan HTML</h2>
<p>HTML adalah bahasa markup...</p>

<h2>Struktur Dasar</h2>
<p>Setiap file HTML memiliki struktur...</p>

<h3>Tag Head</h3>
<p>Bagian head berisi metadata...</p>

<h3>Tag Body</h3>
<p>Bagian body berisi konten...</p>

<h2>Kesimpulan</h2>

Penjelasan: Perhatikan bagaimana <h3> bersarang di bawah <h2>, dan <h2> mendukung <h1>. Ini menciptakan aliran membaca yang logis.

3. Kesalahan Umum Penggunaan Heading

Ini adalah bagian terpenting. Banyak pemula melakukan kesalahan ini.

Jangan Gunakan Heading Hanya untuk Membesarkan Teks

Seringkali pemula menggunakan <h1> atau <h2> hanya karena mereka ingin tulisan menjadi besar dan tebal, padahal teks tersebut bukan judul.

Salah:

<h3>PERHATIAN: Toko tutup jam 5 sore!</h3>

Benar: Gunakan paragraf biasa <p> dan atur ukurannya menggunakan CSS.

<p style="font-size: 20px; font-weight: bold;">
  PERHATIAN: Toko tutup jam 5 sore!
</p>

Satu H1 Per Halaman

Praktik terbaik dalam SEO modern adalah hanya memiliki satu <h1> per halaman HTML. <h1> harus merepresentasikan isi keseluruhan halaman tersebut (seperti judul buku). Gunakan <h2> hingga <h6> sebanyak yang kamu butuhkan.

Jangan Melompati Level

Usahakan urutan heading runtut. Jangan melompat dari <h1> langsung ke <h4>.

• Salah : H1 > H4 > H2
• Benar : H1 > H2 > H3