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 mulai dari h1 sampai dengan h6. Heading merupakan elemen blok (block element) yang dapat berisi elemen HTML lainnya dan ketika ditampilkan di browser (peramban) akan memulai di baris baru.
Tiap-tiap elemen heading mempunyai font dan ukuran default 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 web seharusnya adalah elemen h1 yang menandai heading paling penting. Heading penting level berikutnya seharusnya elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan bukan h4, 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 dari h1 sampai dengan h6.
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. |
Berkut ini contoh penggunaan elemen heading (h1 dan h2). Elemen h1 digunakan untuk menandai heading paling penting. Elemen h1 ini memiliki dua sub-heading yang menandai heading penting level berikutnya. Untuk membuat sub-heading ini, digunakan elemen h2. Anda tidak dianjurkan melompat menggunakan dua atau lebih level heading dibawahnya, misalnya h3, h4 atau h5, untuk menjaga tetap terciptanya struktur yang logis.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Elemen Heading.</title>
</head>
<body>
<h1>Karakteristik Bahasa Pemrograman Java.</h1>
<p>Tulis penjelasan tentang karakteristik bahasa pemrograman Java di sini...</p>
<h2>Object-Oriented.</h2>
<p>Tulis penjelasan tentang object-oriented di sini...</p>
<h2>Architecture-Neutral.</h2>
<p>Tulis penjelasan tentang Architecture-Neutral di sini...
</body>
</html>