BAB 4 : Elemen Heading pada HTML
Pada pembelajaran kali ini, kita akan mengenal materi HTML – Elemen Heading yang biasanya digunakan untuk membuat sebuah judul situs atau judul artikel.
1. Pengertian Heading dalam HTML
Dalam pembuatan halaman web menggunakan HTML (HyperText Markup Language), heading merupakan elemen yang digunakan untuk menentukan judul atau subjudul pada sebuah halaman web.
Heading berfungsi untuk:
- Menunjukkan struktur atau hierarki isi halaman
- Mempermudah pembaca memahami bagian-bagian konten
- Membantu mesin pencari (SEO) memahami topik halaman
- Membuat tampilan halaman lebih terstruktur dan rapi
Secara default, teks yang menggunakan heading akan tampil lebih besar dan tebal dibandingkan teks biasa.
2. Jenis-Jenis Elemen Heading
HTML menyediakan 6 tingkat heading, yaitu dari h1 sampai h6.
Struktur dasarnya:
<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub Judul Level 3</h3>
<h4>Sub Judul Level 4</h4>
<h5>Sub Judul Level 5</h5>
<h6>Sub Judul Level 6</h6>
Penjelasan:
| Heading | Fungsi |
|---|---|
| h1 | Judul utama halaman |
| h2 | Subjudul utama |
| h3 | Subjudul dari h2 |
| h4 | Subjudul dari h3 |
| h5 | Subjudul dari h4 |
| h6 | Subjudul paling kecil |
Semakin besar angka heading, maka ukuran teks biasanya semakin kecil.
3. Contoh Penggunaan Heading
Contoh kode HTML:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Heading HTML</title>
</head>
<body>
<h1>Belajar HTML</h1>
<h2>Pengenalan HTML</h2>
<h3>Sejarah HTML</h3>
<h2>Struktur Dasar HTML</h2>
<h3>Tag HTML</h3>
</body>
</html>
Hasil tampilan di browser kira-kira seperti berikut:
Belajar HTML
Pengenalan HTML
Sejarah HTML
Struktur Dasar HTML
Tag HTML
Heading membantu pembaca memahami tingkatan informasi dalam halaman web.
4. Hierarki Heading dalam HTML
Heading sebaiknya digunakan secara berurutan dan logis untuk membentuk struktur dokumen.
Contoh struktur yang benar:
h1 : Judul Halaman
├── h2 : Bab 1
│ ├── h3 : Sub Bab
│ └── h3 : Sub Bab
├── h2 : Bab 2
│ ├── h3 : Sub Bab
│ └── h3 : Sub Bab
Contoh penggunaan dalam HTML:
<h1>Belajar Pemrograman Web</h1>
<h2>HTML</h2>
<h3>Pengertian HTML</h3>
<h3>Struktur HTML</h3>
<h2>CSS</h2>
<h3>Pengertian CSS</h3>
<h3>Fungsi CSS</h3>
Dengan hierarki seperti ini, struktur halaman akan mudah dipahami oleh manusia maupun mesin pencari.
5. Perbedaan Heading dan Paragraf
Heading sering disalahgunakan untuk membuat teks besar. Padahal fungsi utamanya adalah judul.
Perbedaan:
| Elemen | Fungsi |
|---|---|
<h1> - <h6> | Judul atau subjudul |
<p> | Paragraf atau isi teks |
Contoh:
<h1>Belajar HTML</h1>
<p>
HTML adalah bahasa markup yang digunakan untuk membuat halaman website.
</p>
6. Aturan Penggunaan Heading yang Baik
Dalam praktik pengembangan web profesional, penggunaan heading harus memperhatikan beberapa aturan berikut:
1. Gunakan hanya satu <h1> dalam satu halaman
h1 sebaiknya digunakan sebagai judul utama halaman.
Contoh:
<h1>Belajar Pemrograman Web</h1>
2. Gunakan heading secara berurutan
Hindari langsung menggunakan h4 tanpa h2 atau h3.
Contoh yang benar:
h1
h2
h3
Contoh yang salah:
h1
h4
3. Gunakan heading untuk struktur, bukan untuk ukuran teks
Jika ingin mengubah ukuran teks, gunakan CSS, bukan heading.
Contoh:
<p style="font-size:30px;">Teks Besar</p>
7. Contoh Halaman Web Menggunakan Heading
Contoh halaman sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Website Sekolah</title>
</head>
<body>
<h1>SMA Negeri 1 Teknologi</h1>
<h2>Profil Sekolah</h2>
<p>Sekolah unggulan yang berfokus pada teknologi dan sains.</p>
<h2>Program Keahlian</h2>
<h3>Rekayasa Perangkat Lunak</h3>
<p>Belajar pemrograman dan pengembangan aplikasi.</p>
<h3>Teknik Jaringan Komputer</h3>
<p>Belajar jaringan komputer dan administrasi server.</p>
<h2>Kontak</h2>
<p>Email: [email protected]</p>
</body>
</html>
Struktur ini membuat halaman menjadi terorganisir dengan baik.
8. Manfaat Heading untuk SEO
Heading juga penting dalam Search Engine Optimization (SEO).
Mesin pencari seperti Google menggunakan heading untuk:
- memahami topik halaman
- mengetahui bagian penting konten
- menentukan struktur artikel
Contoh struktur artikel SEO:
H1 : Judul Artikel
H2 : Subtopik
H3 : Penjelasan subtopik
Contoh:
H1 : Cara Belajar HTML untuk Pemula
H2 : Apa itu HTML
H2 : Struktur Dasar HTML
H2 : Contoh Program HTML
9. Kesimpulan
Elemen heading merupakan bagian penting dalam HTML yang berfungsi untuk memberikan judul dan mengatur struktur konten pada halaman web.
HTML menyediakan enam level heading yaitu:
<h1> sampai <h6>
Semakin kecil angka heading, semakin tinggi tingkatannya dalam struktur dokumen.
Penggunaan heading yang baik akan membuat:
- halaman web lebih terstruktur
- konten lebih mudah dipahami
- halaman lebih ramah SEO