Heading di HTML adalah elemen untuk membuat judul atau subjudul pada halaman web. Heading digunakan untuk menandai struktur dan hierarki konten, sehingga halaman web lebih teratur dan mudah dibaca baik oleh manusia maupun mesin (misalnya Google).
Jenis Heading
HTML menyediakan 6 tingkat heading, dari yang paling penting hingga yang paling kecil:
| Tag | Arti | Ukuran / Kepentingan |
|---|---|---|
<h1> | Judul utama | Paling besar & paling penting |
<h2> | Subjudul | Di bawah H1 |
<h3> | Sub-subjudul | Di bawah H2 |
<h4> | Level heading ke-4 | Ukuran lebih kecil |
<h5> | Level heading ke-5 | Lebih kecil lagi |
<h6> | Level heading ke-6 | Paling kecil |
Contoh Penggunaan
<h1>Judul Utama Halaman</h1>
<h2>Bagian Pertama</h2>
<h3>Subbagian</h3>
<h4>Bagian Lebih Detail</h4>
Fungsi Heading
✔️ Menentukan struktur dokumen
✔️ Mempermudah navigasi dan pembacaan
✔️ Penting untuk SEO (search engine optimization)
✔️ Membantu screen reader untuk aksesibilitas
Berikut contoh halaman HTML lengkap yang menggunakan heading dari <h1> sampai <h6>:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Heading HTML</title>
</head>
<body>
<h1>Judul Utama Halaman</h1>
<p>Ini adalah paragraf pembuka untuk menjelaskan isi halaman.</p>
<h2>Bagian 1: Pengenalan</h2>
<p>Bagian ini berisi pengenalan mengenai topik.</p>
<h3>Subbagian 1.1: Latar Belakang</h3>
<p>Penjelasan lebih rinci mengenai latar belakang.</p>
<h4>Detail Tambahan</h4>
<p>Informasi lebih kecil dan mendetail.</p>
<h5>Catatan Tambahan</h5>
<p>Informasi catatan yang kurang penting, tetapi tetap dicantumkan.</p>
<h6>Informasi Minor</h6>
<p>Teks paling kecil sebagai tambahan.</p>
</body>
</html>
Leave a Reply