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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</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>
Berdasarkan fungsi dari masing masing heading element
<h1>-<h6> memiliki susunan yang lebih diutamakan, berikut Penjelasannya-
<h1>dianggap element yang paling penting dari semua tagheadinglainnya. 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.<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> body { font-family : "verdana",san-serif; font-size : 13px; } small { color : silver; } </style> </head> <body> <article> <h1>Cara membuat Nasi Goreng :</h1> Berikut tentang cara membuat nasi goreng dst..... tahap-tahapnya adalah sebagai berikut <h2> 1. Membeli bahan <small>ini heading 2</small> </h2> Apa saja persiapan yang perlukan dst... Lorem ipsum dolor sit amet, pro cibo inani error ea, purto repudiandae sea ea. Ea mea tantas doming repudiare, an mea aeterno scripta, atqui laboramus dissentiunt ne vis. Ius partem luptatum ocurreret ut. Choro reformidans his id. Ne usu veri menandri intellegat, sit et falli malorum. (<b>ini hanya ilustrasi</b>). Jangan Lupa untuk membeli bahan yang bagus. <h3> Berikut Tips membeli bahan... dst <small>ini heading 3</small> </h3> Lorem ipsum dolor sit amet, pro cibo inani error ea, purto repudiandae sea ea. Ea mea tantas doming repudiare, an mea aeterno scripta, atqui laboramus dissentiunt ne vis. Ius partem luptatum ocurreret ut. Choro reformidans his id. Ne usu veri menandri intellegat, sit et falli malorum. <h2> 2. Meracik bumbu <small>ini heading 2</small> </h2> Kontent anda selanjutnya.... </article> </body> </html><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 |
leftrightcenterjustify |
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Ini adalah Heading 1</h1>
</body>
</html>
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Ini adalah Heading 2</h2>
</body>
</html>
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Ini adalah Heading 3</h3>
</body>
</html>
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h4>Ini adalah Heading 4</h4>
</body>
</html>
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h5 {
display: block;
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h5>Ini adalah Heading 5</h5>
</body>
</html>
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
h6 {
display: block;
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
</style>
</head>
<body>
<h6>Ini adalah Heading 6</h6>
</body>
</html>