Elemen heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) merupakan elemen HTML yang digunakan untuk menciptakan heading / judul artikel pada halaman HTML. Elemen heading <h1> merupakan heading yang paling penting atau paling tinggi dan elemen heading <h6> merupakan heading yang paling kecil. Di dalam satu halaman HTML tidak boleh menggunakan elemen heading utama <h1> yang rangkap (lebih dari satu). Penggunaan elemen heading tidak boleh melompati elemen heading yang yang sesudahnya, melainkan berurutan misalnya <h1>, lalu <h2> dan seterusnya sampai <h6>.
Elemen heading adalah elemen penting karena mesin pencari seperti google, yahoo, bing, msn dan lainnya menggunakan elemen heading untuk melakukan index terhadap struktur dan konten suatu website. Elemen ini sama pentingnya seperti elemen title bagi mesin pencari dalam menelusuri halaman web.
Heading utama adalah elemen heading yang paling besar diikuti oleh elemen heading lainnya yang lebih kecil. Sebuah halaman web normalnya memiliki satu buah elemen heading sebagai elemen heading utama. Penulisan elemen heading utama dibuka dengan tag <h1> dan ditutup dengan tag </h1>.
Ukuran font dari heading terbesar <h1> setara dengan 24 px, sedangkan untuk ukuran font heading terkecil <h6> setara dengan 10px.
Previous Pageh1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}Elemen heading yang pertama <h1>, memiliki penampilan dengan font-size yang paling besar disusul dengan heading kedua <h2> dan seterusnya. Berikut ini tampilan fisik elemen heading dari terbesar hingga yang terkecil pada halaman HTML :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen Tag HTML Heading</title>
<style>
p {
color : navy;
font-weight : bold;
}
</style>
</head>
<body>
<p>Belajar Menggunakan Elemen Tag HTML Heading</p>
<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>
Berikut ini penggunaan elemen heading pada halaman web :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan Elemen Tag HTML Heading</title>
</head>
<body>
<h1>Dasar-Dasar Pemformatan Text</h1>
<p>
Pemformatan text dilakukan untuk mendapatkan tampilan yang terstruktur,
sehingga akan memudahkan dalam penataan tampilan. Seperti memberikan efek tulisan tebal, miring, garis bawah.
</p>
<h2>Efek Tulisan Tebal</h2>
<p>Pemformatan text tebal dilakukan dengan melakukan penulisan <strong>text strong</strong> ataupun <b>text bold</b></p>
<h3>Efek Tulisan Miring</h3>
<p>Pemformatan text miring dilakukan dengan melakukan penulisan <em>text emphasized</em> ataupun <i>text italic</i></p>
</body>
</html>
Jika kode script tersebut dijalankan maka hasilnya seperti berikut ini:
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <h1>, <h2>, <h3>, <h4>, <h5>, <h6> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <h1>, <h2>, <h3>, <h4>, <h5>, <h6> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading(onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar(onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTML :
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
h1, h2, h3, h4, h5, h6{
display: block;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h1 {
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
}
h2 {
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
}
h3 {
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
}
h4 {
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
}
h5 {
font-size: .83em;
margin-top: 1.67em;
margin-bottom: 1.67em;
}
h6 {
font-size: .67em;
margin-top: 2.33em;
margin-bottom: 2.33em;
}
Halaman Terkait
 | Elemen Header Pada HTML html |
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
