HTML Dasar: 6 Jenis Heading

Pada pertemuan kali ini kita akan membahas salah satu hal paling dasar pada dokumen HTML: yaitu Heading.

Heading Pada HTML

Apa itu Heading?

Heading merupakan tag di dalam HTML yang mendefinisikan judul atau sub-judul serta hirarki dari dokumen HTML yang ditampilkan kepada user [1].

Terdapat 6 level heading pada HTML, yang paling tinggi adalah <h1> dan yang paling rendah adalah <h6>.

Berikut ini adalah contoh heading pada HTML:

<h1>h1 - Heading tertinggi</h1>
<h2>h2 - Heading level 2</h2>
<h3>h3 - Heading level 3</h3>
<h4>h4 - Heading Level 4</h4>
<h5>h5 - Heading level 5</h5>
<h6>h6 - Heading level terakhir</h6>

Kode HTML di atas akan memproduksi output sebagai berikut:

Kita bisa lihat di atas bahwa semakin kecil level heading, maka ukuran font-nya pun semakin kecil. Tentu saja ukuran font, style, warna, dan lain-lain bisa kita ubah lebih lanjut menggunakan CSS.

Heading Merupakan Salah Satu Pembentuk Struktur Dokumen

Faktanya, penggunakan heading pada dokumen HTML tidak boleh asal-asalan karena heading merupakan salah satu pembentuk struktur dokumen HTML [2].

Bahkan dengan memanfaatkan struktur heading yang benar, mesin pencari seperti Google atau pun tools yang lain bisa otomatis mengenali “daftar isi” suatu halaman HTML.

Contoh penggunaan heading sebagai pembentuk struktur dokumen:

<h1>Pengenalan HTML</h1>

<h2>Pengertian HTML</h2>
<p>
  HTML adalah bahasa markup yang digunakan untuk
  mendefinisikan suatu halaman web
</p>

<h2>Contoh Penggunaan HTML</h2>

<h3>Contoh 1: Hello world</h3>
<p>...</p>

<h3>Contoh 2: Menampilkan Gambar</h3>
<p>...</p>

<h2>Kesimpulan</h2>
<p>...</p>

Output:

Kesalahan Heading Yang Sering Ditemukan

Berikut ini adalah beberapa kesalahan umum tentang penggunaan heading yang seharusnya kita hindari:

1. Menggunakan heading untuk menyesuaikan ukuran teks.

Terkadang menggunakan tag <h1> sebagai judul dokumen HTML tidak terlalu pas karena ukurannya yang terlalu besar. Akhirnya, alih-alih menggunakan <h1> sebagai judul utama, kita justru menggunakan <h2> karena dianggap ukuran font-nya lebih sesuai.

Ini adalah praktik yang salah.

Hal yang harusnya kita lakukan adalah: tetap menggunakan tag <h1> sebagai judul utama, lalu mengatur ukuran font yang sesuai dengan CSS font-size.

Contoh di mana <h2> lebih besar dari pada <h1>:

<h1 style="font-size: 12pt">INI JUDUL UTAMA</h1>

<h2>INI SUB-JUDUL</h2>

2. Harusnya satu dokumen / halaman HTML hanya memiliki satu elemen <h1>.

Menggunakan <h1> lebih dari satu kali memang tidak akan menyebabkan error, hanya saja ia bukanlah praktik yang disarankan terlebih dalam ranah SEO di mana seharusnya satu dokumen hanya memiliki satu judul. Hal ini mirip dengan buku yang mana satu buku harusnya hanya memiliki satu judul saja.

3. Menggunakan heading secara acak (tidak urut sesuai hirarki).

Terkadang kita menggunakan heading HTML sekenanya dan suka-suka, tidak memperdulikan struktur hirarki yang benar seperti kapan menggunakan h3, kapan menggunakan h4, dan sebagainya.

Harusnya heading yang kita gunakan adalah berurutan sesuai levelnya, yaitu setelah <h1> adalah <h2>, setelah <h2> adalah <h3>, dan seterusnya. Bukan setelah <h1> langsung menggunakan <h3>. Ini adalah praktik yang keliru.

Penggunaan yang salah ❌❌:

<h1>Judul Utama</h1>
<h3>Sub judul</h3>
<h4>Sub-Sub judul</h4>

Penggunaan yang benar ✅✅:

<h1>Judul Utama</h1>
<h2>Sub judul</h2>
<h3>Sub-Sub judul</h3>

Kesimpulan

Dari sini bisa kita simpulkan bahwa heading dalam HTML memiliki 6 level: yang paling tinggi adalah <h1> dan yang paling rendah adalah <h6>.

Hal selanjutnya adalah: posisi heading sangatlah penting dalam sebuah dokumen HTML karena ia merepresentasikan struktur konten dari dokumen HTML.

Dan karena hal tersebut, kita harusnya tidak asal-asalan dalam menggunakan heading HTML, akan tetapi tetap memikirkan struktur hirarki yang tepat sesuai level konten suatu dokumen.

Kode Program Lengkap

Bagi kalian yang ingin mendapatkan kode program lengkap, silakan kunjungi repository html-dasar di github.

Jangan lupa kasih ⭐⭐

Pertemuan Selanjutnya

Insyaallah pada pertemuan selanjutnya kita akan membahas tentang paragraf pada HTML.

Stay tune!

Referensi

[1] https://www.w3schools.com/html/html_headings.asp – diakses tanggal 6 Juni 2021
[2] https://www.tutorialrepublic.com/html-tutorial/html-headings.php – diakses tanggal 6 Juni 2021