Example
The six different HTML headings:
This is heading 1This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The
to tags are used to define HTML headings.defines the most important heading. defines the least important heading.Note: Only use one
per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with, then use, and so on.
Browser Support
Element-YesYesYesYesYesGlobal Attributes
The
to tags also supports the Global Attributes in HTML.Event Attributes
The
to tags also supports the Event Attributes in HTML.More Examples
Example
Set the background color and text color of headings (with CSS):
Hello WorldHello World
Try it Yourself »Example
Set the alignment of headings (with CSS):
This is heading 1This is heading 2
This is heading 3
This is heading 4
Try it Yourself »Related Pages
HTML tutorial: HTML Headings
HTML DOM reference: Heading Object
Default CSS Settings
Most browsers will display the
element with the following default values:Example
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Most browsers will display the
element with the following default values:
Example
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Most browsers will display the
element with the following default values:
Example
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Most browsers will display the
element with the following default values:
Example
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Most browsers will display the
element with the following default values:Example
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Most browsers will display the
element with the following default values:Example
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Untuk menjadi SEO friendly, penggunaan tag html Anda harus mengikuti hierarki. Hierarki ini berarti sesuai urutan yang SEO anjurkan. Label tag <h1> adalah untuk judul utama, kemudian berlanjut dengan label tag <h2>, lalu <h3>, berlanjut dengan <h4>, kemudian <h5> dan <h6>
Save
2. Heading Tags Utama Mengandung Kata Kunci
Heading tag utama harus mewakili isi dari konten website. Maka pastikan tag tersebut mengandung kata kunci prioritas yang Anda bidik.
Dalam hal ini, blogger dapat melakukan riset kata kunci terlebih dahulu untuk menentukan kata kunci yang akan muncul di konten. Dari keyword tersebut, bagilah kata kunci ke dalam kelompok keyword utama, keyword sekunder, dan keyword tambahan.
Keyword utama seharusnya menjadi yang utama dan layak masuk ke dalam judul, meta tag, dan tag <H1> dari halaman website. Anda juga bisa memasukkan keyword utama atau keyword sekunder di H2 untuk memperkuat topik pembahasan Anda. Selanjutnya, keyword sekunder atau tambahan, bisa Anda tempatkan di H3 jika memungkinkan.
Yang perlu Anda cermati, meski heading utama baik untuk mengoptimalkan kata kunci, jangan sampai jumlahnya berlebihan. Gunakan keyword secara proporsional di situs web Anda agar terhindar dari praktek keyword stuffing.
3. Jumlah Penggunaan Tag Heading untuk Situs Web
Penggunaan tag html harus sesuai kebutuhan, tidak berlebihan. Misalnya saja, penggunaan tag H1 menurut anjuran SEO adalah satu satu untuk setiap halaman situs web. Alasannya, tag ini harus seperti judul pada surat kabar dan konten lainnya harus terstruktur sebagai sub pos, mengikuti hierarchy dari pos tag.
Sedangkan H2 Anda gunakan maksimal sebanyak 8 buah. Kemudian H3 – H6 boleh lebih dari 8, tergantung kebutuhan. Setiap heading disarankan mengandung kata kunci agar relevansi halaman meningkat di mata mesin pencari. Namun penggunaan keyword juga tetap harus proporsional untuk halaman, secara keseluruhan.
4. Penggunaan Tag H1 Dulu vs HTML5 Terbaru
Di versi lama, situs web hanya boleh menggunakan satu tag <H1> pada dokumen website. Saat itu, kebanyakan orang menggunakan tag H1 untuk memberi atribut pada logo web dan memulai judul utama halaman web dengan tag <H2>.
Namun sejak update HTML5, user dapat mempunyai beberapa tag <H1> pada halaman web sesuai dengan hierarki yang SEO anjurkan. Meski begitu, hal ini juga tergantung sepenuhnya terhadap desain situs web Anda. Bila menggunakan beberapa <H1>, pastikan tidak semuanya dipenuhi dengan kata kunci yang sama dan berulang.
Kobmbinasikan penggunaan kata kunci sekunder, tambahan, dan optimalkan kata- kata sinonim.
Kesalahan yang Sering Dilakukan Blogger dalam Penerapan Heading Tag
Heading tag penting untuk digunakan sesuai dengan hierarki nya. Namun, salah satu kesalahan umum yang dilakukan oleh blogger adalah penggunaan berlebihan pada tag <H2> atau <H3>, dan juga menggunakan tag <H3> dengan melewatkan tag <H2> pada struktur konten mereka.
Dalam hal ini berarti ada dua poin. Yang pertama adalah penggunaan yang berlebihan. Dan yang kedua, penggunaan tidak urut, yang berarti justru merusak hierarki.
Berapa Banyak Kata dalam Label Tag H1?
Aaron Wall, dalam SEOBook merekomendasikan agar blogger menggunakan variasi kata kunci yang relevan untuk memperoleh lebih banyak trafik. Jangan menggunakan pengulangan yang sama terlalu sering karena ini justru membuat strategi SEO sia- sia.
Lebih buruk lagi jika seorang blogger terlalu agresif dalam mensejajarkan heading halaman, judul halaman, dan anchor text link internal + link eksternal. Selain relevan, pastikan label tag tidak boleh bersifat spam. Cobalah untuk mengoptimalkan halaman Anda dengan komposisi yang berkualitas dan menarik
Seberapa Panjang Elemen Heading HTML H1-H6?
Tidak ada aturan mengenai panjang heading tag, boleh pendek atau sedikit panjang. Yang perlu Anda waspadai adalah kepadatan kata kunci pada judul. Judul sebaiknya tidak terlalu panjang, melainkan padat dan relevan.
Penggunaan Umum Heading Tag
Selain di artikel blog, tips sederhana dalam penggunaan tag heading untuk memperkuat SEO adalah :
Save
Selain urut dalam postingan, heading juga melabeli bagian- bagian dari website. Mulai dari artikel terkait, komentar, hingga footer. Fitur artikel terkait, jumlah komentar atau judul widget biasanya menggunakan label tag. Sedangkan nama komentator atau pemberi komentar biasanya mendapat label. Dan yang terakhir, bagian footer “All Right Reserved” atau “Powered by WordPress” biasanya mendapat label
Kesimpulan
Sudah jelas, heading tag mempunyai peranan penting dalam penerapan SEO On Page. Label tag yang urut secara hierarki nya akan membantu mengoptimalkan SEO Anda, sekaligus membantu pembaca untuk memahami konten secara keseluruhan dengan lebih mudah.
Tapi jangan lupa, selain mempraktekkan tag heading ini dalam membuat konten, lakukan juga strategi SEO lainnya untuk membuat situs web Anda semakin optimal.
Sebagai penutup, Panda akan memberikan resume FAQ yang terkait dengan artikel ini.
Apa pengertian dari Heading Tag?
Heading tag adalah strukturisasi yang digunakan untuk mendefinisikan setiap bagian dari postingan dokumen website.