Heading adalah termasuk konten umum yang dapat Anda temui dengan mudah di halaman sebuah web. Untuk membuat suatu heading di halaman web, Anda dapat menggunakan elemen HTML dimulai dari h1 sampai dengan h6. Heading merupakan elemen blok (block element) yang dapat berisi elemen HTML lainnya dan ketika ditampilkan di browser (peramban) akan dimulai di baris baru.

Tiap-tiap elemen heading mempunyai font dan ukuran standar yang semuanya ditentukan dari font dasar browser yang digunakan. Font dasar dari browser umumnya adalah Times New Roman dengan ukuran 16 pixel. Namun demikian, Anda masih dapat merubah nilainya dengan menggunakan CSS. Elemen heading tidak dimaksudkan untuk memformat teks (text), melainkan untuk menyediakan struktur yang logis untuk dokumen Anda.

Heading pertama dari halaman sebuah web seharusnya adalah elemen h1 yang menandai heading paling penting. Heading penting level berikutnya seharusnya adalah elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan begitu seterusnya. Ini berarti Anda perlu turun satu level dan tidak seharusnya melompat dua atau lebih ke level heading di bawahnya.

Ketika Anda menggunakan struktur heading secara benar, ini akan membantu mesin telusur (search engine) melakukan indek (indexing) website secara lebih baik dan memberikan kemudahan akses pada device seperti screen reader. Berikut ini adalah tabel elemen heading dimulai dari h1 sampai dengan h6. Berkut ini adalah contoh penggunaan elemen heading dari h1 sampai dengan h2.

Tabel Elemen Heading Di HTML
Elemen Keterangan
h1 Membuat heading level 1 dengan konten tebal (bold) dan ukuran font 200% dari ukuran font dasar.
h2 Membuat heading level 2 dengan konten tebal (bold) dan ukuran font 150% dari ukuran font dasar.
h3 Membuat heading level 3 dengan konten tebal (bold) dan ukuran font 117% dari ukuran font dasar.
h4 Membuat heading level 4 dengan konten tebal (bold) dan ukuran font 100% dari ukuran font dasar.
h5 Membuat heading level 5 dengan konten tebal (bold) dan ukuran font 83% dari ukuran font dasar.
h6 Membuat heading level 6 dengan konten tebal (bold) dan ukuran font 67% dari ukuran font dasar.

<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Elemen Heading.</title>
</head>
<body>
<h1>Ini heading level 1 (h1).</h1>
<p>Konten tebal (bold) dengan ukuran font 200% dari font dasar.</p>
<h2>Ini heading level 2 (h2).</h2>
<p>Konten tebal (bold) dengan ukuran font 150% dari font dasar.</p>
<h3>Ini heading level 3 (h3).</h3>
<p>Konten tebal (bold) dengan ukuran font 117% dari font dasar.</p>
<h4>Ini heading level 4 (h4).</h4>
<p>Konten tebal (bold) dengan ukuran font 100% dari font dasar.</p>
<h5>Ini heading level 5 (h5).</h5>
<p>Konten tebal (bold) dengan ukuran font 83% dari font dasar.</p>
<h6>Ini heading level 6 (h6).</h6>
<p>Konten tebal (bold) dengan ukuran font 67% dari font dasar.</p>
</body>
</html>

Elemen heading di HTML