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>. Tag untuk membuat heading terdiri dari 6 level yaitu tag <h1>, <h2>, <h3>, <h4>, <h5> dan<h6>. 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:
Penjelasan:
Tag <h1>
Tag h1 adalah tag heading pada HTML yang memiliki ukuran huruf terbesar. Ukuran font pada h1 secara default adalah 2em atau 2 kali ukuran font yang sedang digunakan di halaman tersebut. Fungsi penggunaan h1 umumnya 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. Simak juga cara menambahkan gambar di html.
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. Lihat juga struktur dasar html.
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:
Penjelasan: Contoh kode di atas adalah penerapan h1 sebagai judul utamanya yaitu Cara Membuat Website. Lalu terdapat 3 elemen h2 sebagai subjudul.
Pelajari juga materi lainnya: cara membuat tabel di 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. Lihat juga cara membuat list di html.
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.
