Heading adalah elemen HTML umum yang dapat ditemukan dengan mudah pada setiap halaman web. Untuk membuat heading di halaman web, Anda 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) dimulai di baris baru.
Setiap elemen heading mempunyai font dan ukuran standar yang semuanya ditentukan dari font dasar browser. Font dasar dari browser umumnya adalah Times New Roman dengan ukuran 16 pixel. Namun, Anda dapat mengubah nilainya dengan 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 elemen h1 yang menandai heading yang paling penting. Heading penting level berikutnya seharusnya elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan begitu seterusnya. Ini berarti Anda perlu turun satu level dan tidak melompat dua atau lebih ke level heading di bawahnya.
Ketika Anda menggunakan struktur heading dengan benar, ini akan membantu mesin pencari atau search engine melakukan indek (indexing) website dengan lebih baik dan memberikan kemudahan akses pada perangkat (device) seperti screen reader. Berikut ini adalah tabel elemen heading dari h1 sampai dengan h6 beserta contohnya.
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>
