Home » HTML » Heading (h1 hingga h6)

Heading (h1 hingga h6)

Heading dalam HTML digunakan untuk menentukan hierarki dan struktur konten pada halaman web. Ada enam level heading, dimulai dari h1 (paling penting) hingga h6 (paling rendah). Berikut penjelasannya:

Apa Itu Heading?

Tag Heading:
- h1 sampai h6 adalah tag yang digunakan untuk membuat judul atau subjudul.
- Contoh: <h1>Judul Utama</h1>, <h2>Subjudul</h2>, dst.
Hierarki:
- h1 adalah level tertinggi dan biasanya digunakan untuk judul utama halaman (hanya satu h1 per halaman).
- h2 hingga h6 digunakan untuk subjudul dengan tingkat kepentingan yang menurun.

Fungsi dan Pentingnya Heading

Struktur Konten:
- Membantu mengorganisir konten secara logis, seperti bab dan subbab dalam buku.
- Contoh:
  <h1>Belajar HTML</h1> <h2>Pengenalan HTML</h2> <h3>Apa Itu Tag?</h3>
SEO (Search Engine Optimization):
- Mesin pencari (seperti Google) menggunakan heading untuk memahami topik utama halaman.
- h1 yang relevan dan deskriptif meningkatkan peringkat pencarian.
Aksesibilitas:
- Membantu pengguna dengan screen reader untuk menavigasi konten.
- Hierarki yang jelas memudahkan pemahaman struktur halaman.

Aturan Penggunaan

Urutan yang Logis:
- Jangan melompati level heading (misalnya: langsung dari h1 ke h3 tanpa h2).
- Contoh yang salah:
  <h1>Judul Utama</h1> <h3>Subjudul Tanpa h2</h3> 
Hanya Satu h1:
- Setiap halaman sebaiknya memiliki satu h1 sebagai judul utama.
Jangan Gunakan untuk Styling:
- Heading bukan untuk memperbesar teks. Gunakan CSS jika ingin mengubah ukuran atau gaya teks.

Contoh Visual Heading

Secara default, browser menampilkan heading dengan ukuran yang berbeda:

h1: Ukuran terbesar (biasanya 32px–40px).
h2: Lebih kecil dari h1 (24px–32px).
h3 hingga h6: Ukuran semakin mengecil.

Tips Praktis

Gunakan h1 untuk judul utama halaman (misalnya: nama produk, judul artikel).
Gunakan h2 untuk bagian utama (misalnya: “Fitur Produk”, “Kontak Kami”).
Gunakan h3 hingga h6 untuk subbagian di dalam h2 atau level di bawahnya.
Selalu prioritaskan struktur logis daripada tampilan visual.

Contoh Kode

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Heading</title>
</head>
<body>
    <h1>Belajar Pemrograman Web</h1>
    <h2>HTML Dasar</h2>
    <h3>Apa Itu HTML?</h3>
    <p>HTML adalah bahasa markup untuk membuat halaman web.</p>
    <h3>Struktur Dokumen HTML</h3>
    <p>Setiap dokumen HTML dimulai dengan tag <!DOCTYPE html>.</p>
    <h2>CSS Dasar</h2>
    <h3>Pengenalan CSS</h3>
    <p>CSS digunakan untuk styling halaman web.</p>
</body>
</html>

Dengan memahami penggunaan heading, pembaca dapat membuat konten web yang terstruktur, ramah SEO, dan mudah diakses.

Sumber : DeepSeek