Apa Itu Heading di HTML?
Heading adalah elemen HTML yang berfungsi sebagai judul atau sub judul pada sebuah halaman web. Tanpa heading, konten akan terlihat seperti dinding teks yang membosankan — sulit dipindai dan tidak ramah mesin pencari.
Dalam HTML, heading dibuat menggunakan tag <h1> hingga <h6>. Tag <h1> merepresentasikan judul utama dengan ukuran terbesar, sedangkan <h6> menjadi level terendah dengan ukuran terkecil.
Heading bukan sekadar memperbesar teks. Ia membentuk hierarki konten yang membantu browser, screen reader, dan mesin pencari memahami struktur halaman kamu.
Cara Membuat Heading di HTML
Membuat heading di HTML sangat mudah. Kamu cukup menggunakan tag pembuka dan penutup dari <h1> sampai <h6>. Setiap level menghasilkan ukuran teks yang berbeda secara default.
Berikut contoh dasar penggunaan semua level heading:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Contoh Heading di HTML</title>
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>[Keterangan Gambar: Hasil render heading H1 sampai H6 di browser (hasil heading h1 h2 h3 h4 h5 h6 di browser)] [AI Image Prompt: A browser window screenshot showing rendered HTML headings from H1 to H6, each on its own line with decreasing font size, displayed in a modern Chrome-like browser with a clean white page, realistic UI mockup]
Dari kode di atas, terlihat bahwa semakin besar angka level heading, semakin kecil ukuran teksnya. Tag <h1> menghasilkan teks paling besar, dan <h6> paling kecil.
Contoh Heading dalam Struktur Artikel
Dalam praktik nyata, heading digunakan untuk menyusun bagian-bagian artikel. Tag <h1> menjadi judul utama, sedangkan <h2> hingga <h4> menjadi sub judul.
Perhatikan contoh struktur artikel sederhana berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<title>Struktur Artikel dengan Heading</title>
</head>
<body>
<h1>Panduan Lengkap Heading di HTML</h1>
<p>
Heading di HTML terdiri dari enam level, yaitu H1 sampai H6.
Fungsinya adalah membuat judul dan sub judul pada artikel.
</p>
<h2>Mengapa Heading Penting?</h2>
<p>
Heading membantu pembaca memindai konten dengan cepat.
Selain itu, heading juga berperan penting dalam optimasi SEO.
</p>
<h3>Heading dan Aksesibilitas</h3>
<p>
Screen reader menggunakan heading untuk menavigasi halaman.
Struktur heading yang benar membuat website lebih aksesibel.
</p>
</body>
</html>
Aturan Urutan Heading yang Benar
Salah satu kesalahan umum pemula adalah menulis heading secara tidak berurutan — misalnya langsung menggunakan <h4> setelah <h1>, atau menempatkan <h6> sebagai judul utama.
Secara teknis, browser tetap akan me-render heading tersebut. Namun, praktik ini buruk untuk SEO dan aksesibilitas. Mesin pencari menggunakan hierarki heading untuk memahami topik dan subtopik kontenmu.
Berikut pedoman penulisan heading yang benar:
- Gunakan satu tag
<h1>per halaman sebagai judul utama. - Lanjutkan dengan
<h2>untuk sub judul utama. - Gunakan
<h3>untuk sub-sub judul di bawah<h2>, dan seterusnya. - Jangan melewati level — misalnya langsung dari
<h2>ke<h5>.
Atribut Global pada Heading
Tag heading tidak memiliki atribut khusus. Namun, heading mendukung atribut global HTML yang bisa kamu manfaatkan untuk berbagai keperluan.
Beberapa atribut global yang sering digunakan pada heading antara lain:
id— memberikan identitas unik pada heading, berguna untuk anchor link, CSS, dan JavaScript.class— menambahkan nama kelas untuk styling melalui CSS.style— menyisipkan CSS inline langsung pada elemen heading.title— menampilkan tooltip saat kursor diarahkan ke heading.
Contoh penggunaannya:
<h2 id="pengertian" class="section-title">Apa Itu Heading?</h2>
<h3 style="color: navy;" title="Sub bagian penting">Fungsi Heading</h3>Perbedaan Heading, Title, dan Header
Tiga istilah ini sering membingungkan pemula karena sekilas terdengar mirip. Padahal, ketiganya memiliki fungsi yang sangat berbeda dalam HTML.
- Heading (
<h1>–<h6>) — judul dan sub judul yang tampil di dalam konten halaman. Digunakan untuk menyusun hierarki artikel. - Title (
<title>) — judul halaman yang muncul di tab browser dan hasil pencarian Google. Ditempatkan di dalam tag<head>. - Header (
<header>) — elemen semantik yang menjadi bagian kepala (kop) sebuah halaman atau section. Biasanya berisi logo, navigasi, dan judul situs.
Singkatnya: <title> untuk tab browser, <header> untuk kop halaman, dan <h1>–<h6> untuk judul dalam konten.
Cara Menambahkan Style pada Heading (Bonus CSS)
Secara default, heading ditampilkan dengan gaya bawaan browser. Namun, kamu bisa mengustomisasi tampilannya menggunakan CSS agar lebih menarik dan sesuai desain website.
Heading dengan Garis Bawah
Ada dua cara membuat heading bergaris bawah. Pertama, menggunakan tag <hr> tepat di bawah heading. Kedua, menggunakan properti CSS text-decoration.
Cara 1 — Menggunakan tag <hr>:
<h1>Judul Artikel</h1>
<hr />
<p>Konten artikel ditaruh di sini.</p>Cara 2 — Menggunakan CSS text-decoration:
<h1 style="text-decoration: underline;">Judul Artikel</h1>
<p>Konten artikel ditaruh di sini.</p>Mengubah Text Case pada Heading
Kamu bisa mengontrol tampilan huruf besar-kecil pada heading menggunakan properti CSS text-transform. Berikut contoh penggunaannya:
<!-- Semua huruf besar -->
<h2 style="text-transform: uppercase;">heading menjadi huruf besar semua</h2>
<!-- Huruf besar di awal setiap kata -->
<h2 style="text-transform: capitalize;">heading dengan huruf kapital di awal</h2>
<!-- Semua huruf kecil -->
<h2 style="text-transform: lowercase;">HEADING MENJADI HURUF KECIL SEMUA</h2>Memberi Warna pada Heading
Heading juga bisa diberi warna teks maupun warna latar belakang menggunakan properti CSS color dan background-color.
<!-- Warna teks merah -->
<h1 style="color: red;">Heading Berwarna Merah</h1>
<!-- Latar belakang kuning -->
<h2 style="background-color: yellow;">Heading dengan Latar Kuning</h2>
<!-- Kombinasi warna teks dan latar -->
<h3 style="color: white; background-color: #333;">Heading Gelap Elegan</h3>
Kesimpulan
Heading adalah elemen fundamental dalam HTML yang berfungsi untuk membuat judul dan sub judul pada halaman web. Menggunakan tag <h1> sampai <h6> secara berurutan bukan hanya membuat konten lebih rapi, tetapi juga meningkatkan SEO dan aksesibilitas website kamu.
Hal penting yang perlu diingat:
- Gunakan satu
<h1>per halaman. - Tulis heading secara berurutan sesuai level hierarkinya.
- Manfaatkan atribut global dan CSS untuk mempercantik tampilan heading.
- Pahami perbedaan antara heading, title, dan header.
