Apa definisi dari heading dan contoh penulisan dalam html?

Tag Heading adalah sebuah code HTM  yang berfungsi untuk mengubah tulisan. Tag Heading biasa di gunakan untuk membuat judul pada sebuah artikel atau dokument. Spesifikasi Tag Heading  mempunyai berbagai tingkatan yang biasa di sebut H1, H2, H3, H4, H5 dan H6 yang masing masing mempunyai fungsi yang berbeda. Dalam melakukan Optmasi SEO Onpage, Tag Heading juga merupakan faktor penting yang harus di perhatikan. Namun banyak orang yang belum tahu Pengertian Dan Fungsi Tag Heading. Mereka biasanya hanya terfokus pada penulisan ertikel saja dan hanya memakai template yang tidak SEO Friendly. Kenapa sering di abaikan...? karena letak Tag Heading berada pada code htlm template blog bukan berada pada halaman entri baru yaitu mode html.

Sebenarnya cara untuk menerapkan, mengganti ataupun mengatur Tag Heading H1, H2, H3, H4, H5 dan H6 terbilang cukup mudah. Misalnya dengan membuka notepad kemudian copy code di bawahdan paste code di bawah ke dalam notepad, selanjutnyaklik Save lalu pilih All File As Tipe. Buka kembali notepad tadi dan anda lihat perubahan yang terjadi.

Tag Heading H1 sampai H6 adalah salah satu teknik SEO yang sangat di sarankan agar di terapkan pada blog atau website, gunanya untuk memaksimalkan hasil pencarian. maka dari itu, dalam menerapkan Tag Heading seharusnya dilakukan secara berurutan dimulai dari Tag H1 sampai H6 dan jangan anda safle/acak 

.

Sesuai dengan penjelasan kami diatas tadi, bahwa pada masing-masing Tag mempunyai fungsi dan penempatan yang berbeda. maka dari itu, anda jangan sampai salah pada waktu mengatur Tag Heading H1 sampai H6. Code Tag H1, H2 dan H3 merupakan code yang paling pokok dalam Tag Heading dan code tersebut sudah terpasang secara otomatis pada setia website/blog. Apa yang terjadi jika kita sampai melakukan kesalahan dalam menempatka code Tag Heading...?, anda tidak usah khawatir mengenai hal itu karena tidak akan membuat berantakan atau error blog/website anda.

Apabila anda masih belum paham secara jelas mengenai fungsi  dari Tag Heading H1, H2, H3, H4, H5, dan H6, kami akan menjabarkan secara detail apa saja fungsinya. Untuk itu, perhatikan dengan seksama penjelasan di bawah ini :

Fungsi Code Tag Heading H1, H2, H3, H4, H5 dan H6 :

• Tag Heading <h1> : tag ini digunakan pada nama blog/website (jika berada pada homepage) dan akan berubah menjadi <h2> pada halaman posting. 
• Tag Heading <h2> : tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada halaman posting. 
• Tag Heading <h3> : tag ini digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget. 
• Tag Heading <h4> : tag ini digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget. 
• Tag Heading <h5> : tag ini digunakan sebagai nama komentator atau nama pemberi komentar. 
• Tag Heading <h6> : tag ini digunakan sebagai footer seperti "All Rights Reserved" atau "Powered by Blogger" yang letaknya berada paling bawah.

Jika anda sudah mengetahui dan memahami Pengertian Dan Fungsi Tag Heading, maka untuk melakukan optimasi SEO Onpage tidak akan terhambat. Pelajari dan terapkan Tag Heading agar blog anda lebih di sukai mesin pencari.

SEVIMA.COM – Headings atau Judul Post merupakan elemen structural dari HTML Yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag

dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul.Headings atau Judul Post ditandai dengan tag

Heading di definisikan dengan tag

contoh :

This is heading 2

This is heading 3

Hasil :

This is heading 2

This is heading 3

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

<!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>

<!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

<!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>

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

<!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>

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

<!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>

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 <h1>0

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 <h1>1

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 <h1>2

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.

Apa definisi dari heading dan contoh penulisannya dalam HTML?

Apa itu HTML headings?

Apa itu heading pada teks?

Bagaimana cara membuat heading pada HTML?