Heading Tag HTML

Penjelasan HTML h1-h6 :

HTML Heading Tag - Belajar Membuat Tag heading Pada HTML. Heading tag pada html mempunyai fungsi yang sangat penting pada sebuah artikel Blog/website atau pada sebuah theme/template. Robot penelusuran akan membaca heading tag sebagai sesuatu yang penting dan memprioritaskannya pada mesin pencari.

Contoh HTML element <h1>-<h6> :

Tips :

Gunakan HTML <h1>-<h6> hanya untuk judul. Jangan gunakan element <h1>-<h6> hanya untuk membuat teks tebal ataupun memperbesar teks. Gunakan HTML tag yang lainnya dan setting css sebagai penggantinya.

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

Berdasarkan fungsi dari masing masing heading element <h1>-<h6> memiliki susunan yang lebih diutamakan, berikut Penjelasannya

• <h1> dianggap element yang paling penting dari semua tag heading lainnya. Disarankan element ini hanya ada satu dalam satu pembacaan halaman web.
• <h2> dianggap element yang penting dengan posisi urut nomor 2, tidak ada batasan jumlah dalam penggunaannya, tapi disarankan disesuaikan lagi dengan besaran konten.
  Misal : dalam 1 halaman web memiliki 10 bagian/part konten maka disarankan jumlah <h2> nya adalah 10 (walaupun hal ini tidak berlaku mutlak).
• <h3> dianggap element heading dengan posisi urut 3. Element ini digunakan jika Penggunaan <h2> terlalu banyak dalam 1 halaman web, maka heading 3 bisa digunakan sebagai penggantinya. Atau juga bisa bersifat heading turunan dari heading sebelumnya.
• <h4> dan <h5> element ini biasanya sering digunakan pada komentar suatu blog. Element ini mempunyai kedalaman level 4 dan 5.
• <h6> element ini saya gak bisa menjelaskannya dengan rinci, hehe.. maaf, karena saya pribadi tak pernah menggunakan element ini.

Saran :

Jangan menggunakan element heading, jika element heading yang lebih besar urutannya tidak ada, h1 (paling besar), h6 (paling kecil)

Misal : kita ingin menuliskan <h3>...</h3> dalam 1 web page, tetapi element <h2>...</h2> tidak ada/kosong dalam 1 pembacaan halaman web, hal ini sangat tidak dianjurkan

Attributes :

Attribute HTML <h1>-<h6>

Attribute	Value	Deskripsi
align	left right center justify	Menentukan keselarasan/Penjajaran konten yang berada di dalam element <h1>-<h6> Attribute ini tidak berlaku lagi pada penggunaan HTML5.

Global Attributes:

Element <h1> - <h6> mencakup Global Attributes HTML.

Event Attributes:

Element <h1> - <h6> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	Ya
Safari	Ya
Firefox	Ya
Opera	Ya
IE	Ya
Edge	Ya

Mobile

Android Webview	Ya
Chrome Android	Ya
Edge Mobile	Ya
Firefox Android	Ya
Opera Android	Ya
iOs Safari	Ya
Samsung Internet	Ya

Default CSS :

Browser yang support dengan element <h1>, biasanya mempunyai nilai default :

h1 { 
   display: block;
   font-size: 2em;
   margin-top: 0.67em;
   margin-bottom: 0.67em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

Browser yang support dengan element <h2>, biasanya mempunyai nilai default :

h2 {
   display: block;
   font-size: 1.5em;
   margin-top: 0.83em;
   margin-bottom: 0.83em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

Browser yang support dengan element <h3>, biasanya mempunyai nilai default :

h3 { 
   display: block;
   font-size: 1.17em;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

Browser yang support dengan element <h4>, biasanya mempunyai nilai default :

h4 { 
   display: block;
   font-size: 1em;
   margin-top: 1.33em;
   margin-bottom: 1.33em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

Browser yang support dengan element <h5>, biasanya mempunyai nilai default :

h5 { 
   display: block;
   font-size: .83em;
   margin-top: 1.67em;
   margin-bottom: 1.67em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}

Browser yang support dengan element <h6>, biasanya mempunyai nilai default :

h6 { 
   display: block;
   font-size: .67em;
   margin-top: 2.33em;
   margin-bottom: 2.33em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}