Heading (h1 - h6)

Heading (h1 - h6) 📰

Heading adalah elemen HTML yang digunakan untuk membuat judul dan subjudul di dalam halaman web. Bukan sekadar teks besar — heading memiliki makna struktural yang penting bagi browser, mesin pencari, dan aksesibilitas.

Mengenal 6 Level Heading

HTML menyediakan 6 tingkatan heading, dari yang paling besar hingga paling kecil:

<h1>Heading Level 1 — Judul Utama</h1>
<h2>Heading Level 2 — Subjudul</h2>
<h3>Heading Level 3 — Sub-subjudul</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6 — Terkecil</h6>

Secara default browser akan menampilkannya seperti ini (dari besar ke kecil):

█████████ Heading Level 1       ← terbesar
███████ Heading Level 2
█████ Heading Level 3
████ Heading Level 4
███ Heading Level 5
██ Heading Level 6              ← terkecil

Heading sebagai Struktur Dokumen

Heading bukan hanya soal ukuran teks — melainkan tentang hierarki dan struktur konten. Anggap seperti daftar isi sebuah buku:

<h1>Panduan Memasak Nusantara</h1>        <!-- Judul buku -->

  <h2>Masakan Jawa</h2>                   <!-- Bab 1 -->
    <h3>Gudeg Yogyakarta</h3>             <!-- Sub-bab 1.1 -->
      <h4>Bahan-Bahan</h4>               <!-- Bagian 1.1.1 -->
      <h4>Cara Memasak</h4>              <!-- Bagian 1.1.2 -->
    <h3>Soto Lamongan</h3>               <!-- Sub-bab 1.2 -->

  <h2>Masakan Sumatera</h2>               <!-- Bab 2 -->
    <h3>Rendang Padang</h3>              <!-- Sub-bab 2.1 -->
    <h3>Pempek Palembang</h3>            <!-- Sub-bab 2.2 -->

Aturan Penting Penggunaan Heading

1. <h1> hanya boleh ada satu per halaman

<h1> adalah judul utama halaman — seperti judul artikel atau nama produk. Menggunakannya lebih dari sekali membingungkan mesin pencari:

<!-- BENAR -->
<h1>Tips Belajar HTML untuk Pemula</h1>

<!-- SALAH — h1 dipakai dua kali -->
<h1>Tips Belajar HTML untuk Pemula</h1>
<h1>Kesimpulan</h1>  <!-- seharusnya h2 -->

2. Jangan melompat level

Heading harus turun secara berurutan — tidak boleh loncat dari h1 langsung ke h3:

<!-- SALAH — loncat dari h1 ke h3 -->
<h1>Judul Utama</h1>
<h3>Subjudul</h3>

<!-- BENAR — turun berurutan -->
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

3. Heading bukan untuk memperbesar teks

Jangan gunakan heading hanya karena ingin teks tampak besar. Untuk mengubah ukuran teks, gunakan CSS:

<!-- SALAH — pakai heading hanya untuk besar -->
<h2>Selamat datang di website kami</h2>  <!-- bukan judul apapun -->

<!-- BENAR — besar via CSS -->
<p style="font-size: 24px;">Selamat datang di website kami</p>

Heading & SEO (Mesin Pencari)

Google dan mesin pencari lainnya membaca heading untuk memahami topik halaman. <h1> dianggap sebagai sinyal terkuat tentang isi halaman:

<!-- Google memahami: halaman ini tentang "Cara Membuat Website" -->
<h1>Cara Membuat Website dari Nol</h1>
<h2>Persiapan Alat dan Software</h2>
<h2>Membuat File HTML Pertama</h2>
<h2>Menambahkan CSS</h2>

Struktur heading yang baik = halaman lebih mudah ditemukan di hasil pencarian. 🔍

Heading & Aksesibilitas

Pengguna yang menggunakan screen reader (pembaca layar untuk tunanetra) bergantung pada heading untuk navigasi. Mereka bisa melompat antar heading seperti kita melompat antar bab di buku:

<!-- Struktur ini memudahkan navigasi screen reader -->
<h1>Toko Online Kami</h1>
  <h2>Produk Terlaris</h2>
  <h2>Kategori Produk</h2>
    <h3>Elektronik</h3>
    <h3>Fashion</h3>
  <h2>Tentang Kami</h2>

Mengubah Tampilan Heading dengan CSS

Ukuran default heading bisa sepenuhnya diubah lewat CSS tanpa mengubah makna semantiknya:

<h1>Judul Utama</h1>
<h2>Ini h2 tapi tampil kecil</h2>

<style>
  h1 {
    font-size: 20px;
    color: #4a9eed;
    font-weight: bold;
  }

  h2 {
    font-size: 14px;
    color: #757575;
    font-weight: normal;
  }
</style>

Ringkasan

💡 Tips: Sebelum mulai menulis HTML, buat dulu outline heading seperti daftar isi. Ini membantu struktur halaman lebih rapi, SEO lebih baik, dan kode lebih mudah dipelihara jangka panjang. 🗂️