Estimasi Waktu Baca: 2 menit

Mengenal Heading HTML

Heading dalam HTML merupakan elemen yang diperuntukkan untuk membuat judul dan sub-judul konten halaman website. Penggunaan heading sering ditemui saat membuat konten artikel.

Cara Membuat Heading di HTML

Heading diwakili dengan tag <h1> sampai <h6>. Masing-masing tag menghasilkan ukuran teks yang berbeda-beda. Semakin besar angkanya maka ukuran teks akan semakin kecil.


<h1>Ini Heading 1</h1>
<h2>Ini Heading 2</h2>
<h3>Ini Heading 3</h3>
<h4>Ini Heading 4</h4>
<h5>Ini Heading 5</h5>
<h6>Ini Heading 6</h6>

Keluaran:

<h1> memiliki ukuran teks paling besar yang menandakan bahwa ia adalah heading utama sedangkan yang lain merupakan sub-heading, hingga pada tingkat <h6> yang paling kecil.

Struktur heading sangat berpengaruh pada SEO. Dengan elemen h1 yang wajib digunakan sebagai judul utama dan h2 sampai h6 digunakan secara urut sebagai sub-judul.

Bang, boleh tidak bila urutan penulisan heading tidak urut? misalnya saya ingin menggunakan <h6> sebagai judul dan <h1> sebagai sub judul.

Boleh saja, tapi akan terlihat jelek di mata para pengguna, selain itu jika kalian bermain dengan SEO maka cara di atas sangat tidak disarankan.

Makanya usahakan gunakan tag heading sesuai urutan levelnya.

Atribut Untuk Heading

Heading sering dipasangkan dengan atribut global seperti:

  • class – untuk memberikan nama class
  • id – untuk memberikan nama id unik
  • style – untuk menentukan gaya dengan memasukkan kode css secara langsung
  • text-align – untuk menentukan posisi teks
  • title – untuk memberikan teks informasi tambahan (tooltip)

Ia tidak memiliki atribut khusus seperti elemen <a> dengan atribut href-nya atau elemen <img> dengan src-nya.

Perbedaan Tag Heading, Header, dan Title

Walaupun ketiganya berkaitan dengan komponen atas terlebih untuk judul. Namun kegunaan ketiga elemen ini pada dasarnya berbeda.

  • Heading – digunakan untuk judul artikel atau judul untuk bagian artikel tertentu. Diwakili dengan tag <h1> sampai <h6>
  • Header – digunakan untuk kop atau bagian kepala suatu halaman website. Diwakili dengan tag <header>
  • Title – digunakan untuk membuat judul dari web yang tampil pada tab browser. Diwakili dengan tag <title>