Cara Membuat Heading (Judul) di HTML : Fungsi Tag h1-h6

Heading HTML adalah elemen yang digunakan untuk membuat judul dan subjudul di dalam halaman web. Heading dalam HTML memiliki 6 level tingkatan yang dapat ditulis menggunakan tag <h1>, <h2>, <h3>, <h4>, <h5> dan <h6> dimana h1 memiliki ukuran yang terbesar dan h6 memiliki ukuran yang paling kecil. Meskipun bukan termasuk dalam struktur dasar pada HTML, heading adalah salah satu elemen yang sering digunakan pada HTML.

Heading berbeda dengan elemen <head> pada HTML yang sudah kita pelajari sebelumnya. Heading tampil pada halaman web sedangkan tag head berisi informasi yang tidak ditampilkan di halaman web. Heading juga berbeda dengan tag title dimana tag title adalah judul halaman yang tampil di title bar pada web browser sedangkan heading tampil di dalam halaman web.

Cara membuat Heading di HTML

Heading termasuk ke dalam elemen normal sehingga penulisannya tersusun dari tag pembuka misalnya <h1> dan diakhiri dengan tag penutup misalnya </h1>. Untuk lebih jelasnya berikut ini contoh kode HTML heading yang bisa anda coba:

<!DOCTYPE html>
<html>
 <head>
  <title>Contoh Heading</title>
 </head> 
<body>
  <h1>Ini adalah Heading 1</h1>
  <h2>Ini adalah Heading 2</h2>
  <h3>Ini adalah Heading 3</h3>
  <h4>Ini adalah Heading 4</h4>
  <h5>Ini adalah Heading 5</h5>
  <h6>Ini adalah Heading 6</h6>
 </body>
</html>

Hasil tampilan pada browser:

Tampilan perbedaan H1 hingga H6 di browser

Penjelasan:

Tag <h1>

Tag h1 adalah heading yang memiliki ukuran paling besar. Ukuran font pada h1 secara default adalah 2em atau 2 kali ukuran font yang sedang digunakan di halaman tersebut. Penggunaan h1 biasanya digunakan sebagai judul utama di dalam halaman dan hanya 1 kali muncul dalam suatu halaman web.

Tag <h2>

Tag h2 lebih kecil dari tag h1 dengan ukuran default adalah 1.5em atau 1.5 kali ukuran font yang sedang digunakan pada halaman itu. Penggunaan h2 biasa digunakan untuk membuat subheading/subjudul dan dapat muncul beberapa kali dalam halaman web.

Tag <h3>

Tag h3 memiliki ukuran yang lebih kecil dari h2 yaitu 1.17em atau 1.17 kali ukutan font yang sedang digunakan. Penggunaanya juga biasanya sebagai subjudul.

Tag <h4>

Tag h4 memiliki ukuran yang lebih kecil dari h3 yaitu 1.33em atau 1.33 kali ukuran font yang digunakan sekarang. Sama dengan h2 hingga h3, penggunaan h4 juga sebagai subjudul.

Tag <h5>

Tag h5 lebih kecil dari h4 yaitu .83em atau 0.83 kali ukuran font yang digunakan sekarang. Artinya, secara default ukuran tag h5 akan lebih kecil dari font yang digunakan sekarang.

Tag <h6>

Tag h6 adalah heading yang memiliki ukuran paling kecil yaitu .67em atau 0.67 kali ukuran font yang sedang digunakan. Ini juga lebih kecil dari font yang digunakan pada halaman.

Seperti pada penjelasan di atas, tag h1 biasa digunakan sebagai heading utama yang muncul 1 kali dalam sebuah halaman. Sedangkan h2 hingga h6 biasa digunakan sebagai subjudul.

Berikut ini contoh penggunaannya:

<!DOCTYPE html>
<html>
 <head>
  <title>Cara Membuat Website</title>
 </head> 
<body>
  <h1>Cara Membuat Website</h1>
	Untuk membuat website anda dapat menggunakan blogspot, wordpress atau html sendiri.
  <h2>Cara Membuat Website dengan Blogspot</h2>
	Berikut ini cara membuatnya. Buat akun blogspot lalu buat blog dan isi artikelnya.
  <h2>Cara Membuat Website dengan WordPress</h2>
	Caranya adalah hampir sama dengan blogspot namun anda harus daftar di wordpress. Lalu buat blog dan isi artikelnya.
  <h2>Cara Membuat Website dengan HTML Sendiri</h2>
	Cara membuatnya lebih rumit. Anda harus menguasai HTML terlebih dahulu. Lalu buat sesuai keinginan anda.
 </body>
</html>

Hasil tampilan di internet browser:

Tampilan penerapan heading HTML di browser

Penjelasan: Contoh kode di atas adalah penerapan h1 sebagai judul utamanya yaitu Cara Membuat Website. Lalu terdapat 3 elemen h2 sebagai subjudul.

Lihat juga: pengertian dan sejarah HTML.

Heading juga sangat berguna untuk SEO (Search Engine Optimization). Bagaimana pentingnya?

Heading dan SEO

Mungkin anda sudah pernah mendengar SEO. Kata ini sempat menjadi tren dan jika kita adalah seorang pegiat IT tentu pernah mendengarnya. Penjelasan singkatnya, SEO merupakan metode untuk menaikkan ranking halaman web kita di Search Engine seperti Google, Bing dan lainnya.

Heading menjadi salah satu dari banyak faktor yang digunakan search engine untuk meranking website. Heading h1 adalah yang terpenting dalam website. Sebisa mungkin kita harus memasukkan kata kunci yang ingin kita ranking ke dalam judul dengan tag h1. Karena, search engine saat ini masih menjadikan elemen heading utamanya h1 sebagai faktor ranking website.

Selain itu, membuat halaman web yang terstruktur dengan heading yang benar akan membantu anda mendapatkan ranking yang baik di search engine. Hal ini akan kita bahas lengkap di artikel lain pada kategori SEO.

Jika anda memiliki pertanyaan tentang materi belajar HTML dasar kali ini yaitu tentang heading, silahkan kirimkan pertanyaan tersebut pada kolom komentar. Atau, jika ada kesalahan pada materi ini, silahkan kirim juga di kolom komentar.

M. Hernawan
Web developer yang juga suka dengan dunia sysadmin. Pernah belajar Teknik Informatika di Indonesia.

Kirim Komentar