HTML Heading Elements

Halo teman-teman! Di artikel kali ini, kita akan melanjutkan pembahasan seputar HTML dengan fokus pada salah satu elemen paling penting dalam pembuatan website, yaitu HTML Heading Elements. Elemen heading membantu kita membuat struktur yang jelas, rapi, dan mudah dipahami baik oleh pengguna maupun browser.

Apa Itu Heading dalam HTML?

Heading adalah elemen HTML yang digunakan untuk menandai judul dan subjudul pada halaman web. Penulisannya menggunakan tag <h1> hingga <h6>, dengan <h1> sebagai tingkat tertinggi dan <h6> tingkat terendah.

Format sebuah heading terdiri dari:

Opening tag: <h1>
Closing tag: </h1>
Konten heading: teks yang berada di antara kedua tag tersebut

Contoh:

<h1>Hello World</h1>

Dalam contoh ini:

<h1> = opening tag
</h1> = closing tag
"Hello World" = isi heading
Kombinasi tag + isi disebut HTML element

Perbedaan Tag dan Element

Banyak pemula bingung dengan istilah ini, jadi mari kita sederhanakan:

Tag: bagian yang berada di dalam angle brackets, seperti <h1> atau </h1>.
Element: keseluruhan struktur yang terdiri dari opening tag, closing tag, dan konten.

Dengan memahami perbedaan ini, nantinya coding HTML jadi lebih jelas dan mudah diikuti.

Dari Mana Konsep Heading Berasal?

Konsep heading di HTML terinspirasi dari struktur buku. Jika kita membuka daftar isi, kita akan melihat hirarki:

Judul utama (setara dengan <h1>)
Bab atau bagian besar (setara dengan <h2>)
Sub-bab (setara dengan <h3>)
Dan seterusnya hingga tingkat penjelasan kecil

HTML mengadopsi struktur ini agar halaman web terorganisir dengan baik.

Total Ada Berapa Heading?

HTML menyediakan enam tingkat heading, yaitu:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Tidak ada <h7>, jadi jika butuh hirarki lebih dalam, kita harus menggunakan elemen lain yang akan dibahas di materi berikutnya.

Semua heading ini punya format yang sama: opening tag, konten, dan closing tag. Ketika dibuka di browser, ukuran heading otomatis berbeda—<h1> adalah yang terbesar, <h6> yang terkecil.

Membuat Struktur Halaman Menggunakan Heading

Dalam latihan dari transkrip asli, kita diminta menata daftar bab buku agar tercermin dengan benar menggunakan heading:

<h1> untuk judul utama "Book"
<h2> untuk "Chapter 1", "Chapter 2", dan "Chapter 3"
<h3> untuk subbagian di dalam tiap chapter
<h4> untuk detail lebih kecil, seperti "Diagram 1"

Dengan struktur heading yang tepat, browser akan menampilkan halaman yang jelas hierarkinya.

Petunjuk Teknis untuk Latihan

Transkrip asli juga membahas langkah teknis:

Unduh file latihan dari course resources.
Ekstrak (unzip) file tersebut.
Buat folder bernama Web Development Projects di mana pun kamu mau.
Pindahkan folder latihan ke dalamnya.
Buka folder latihan menggunakan VS Code.
Gunakan fitur Live Preview untuk melihat hasil kode secara langsung.

Setelah file terbuka, kita hanya perlu mengubah baris teks biasa menjadi heading sesuai levelnya.

Tips Penting Saat Menggunakan Heading

Agar struktur HTML kamu rapi dan profesional, ada beberapa aturan yang harus diperhatikan:

1. Jangan Gunakan Lebih dari Satu `<h1>`

<h1> adalah judul utama halaman. Dalam konteks buku, ini adalah "judul besar". Jadi hanya boleh dipakai satu kali.

2. Jangan Melompati Level Heading

Jangan langsung membuat <h1> lalu <h3> tanpa <h2>. Hirarki harus berurutan agar struktur halaman tetap logis.

3. Heading untuk Struktur, Bukan Styling

Walaupun ukuran heading berbeda, gunakan heading untuk makna dan struktur, bukan sekadar tampilan. Styling bisa diatur lewat CSS nanti.

4. Cek Dokumentasi Resmi

Jika ingin mempelajari lebih dalam, kamu bisa melihat dokumentasi di Mozilla Developer Network (MDN Web Docs). Di sana banyak contoh interaktif yang sangat membantu.

Apa Selanjutnya?

Setelah memahami heading, kita akan lanjut belajar tentang elemen penting berikutnya, yaitu paragraph (<p>). Elemen ini sering digunakan untuk menulis isi teks pada halaman web.

Sampai jumpa di pelajaran selanjutnya, teman-teman!