Heading adalah judul di halaman web. HTML punya enam level heading, dari <h1> sampai <h6>. Angkanya bukan ukuran huruf, tapi tingkat pentingnya: <h1> judul halaman, <h2> judul bagian, <h3> judul di dalam bagian itu, dan seterusnya.
🧪 Tebakan cepat: kalau
<h3>dibikin gede banget pakai CSS, apa dia berubah jadi<h1>? Tebak dulu, jawabannya ada di bagian "Level itu soal penting, bukan ukuran".
Susun heading kayak daftar isi
Ini halaman resep dengan tiga level heading:
<h1>Resep Nasi Goreng</h1>
<h2>Bahan</h2>
<h3>Bumbu halus</h3>
<h2>Cara memasak</h2>
Tiap baris punya tiga bagian. Ambil baris pertama:
<h1>adalah tag pembuka, artinya "judul level 1 mulai di sini".Resep Nasi Gorengadalah teks yang tampil di halaman.</h1>adalah tag penutup. Bentuknya sama dengan tag pembuka, ditambah garis miring/. Angkanya juga harus sama:<h1>ditutup</h1>, bukan</h2>.
Bacanya kayak daftar isi buku. <h1> judul bukunya, <h2> bab, <h3> sub-bab di dalam bab itu. Tiap kali masuk lebih dalam, turun satu level, jangan lompat dari <h2> langsung ke <h4>.
<h1> cukup satu per halaman. Google dan screen reader (program yang membacakan halaman buat pengguna tunanetra) pakai <h1> buat tahu judul halaman itu, dan pakai heading lainnya buat loncat dari bagian ke bagian.
Satu catatan buat latihan: kalau latihan minta teks tertentu, tulis persis sama, termasuk huruf besar-kecil dan tanda bacanya. Buat pengecek, Asik dan asik itu dua teks yang beda.
Level itu soal penting, bukan ukuran
Browser memang nampilin <h1> paling besar dan <h6> paling kecil, tapi itu cuma tampilan bawaan. Ukurannya bisa diubah kapan aja pakai CSS. Yang gak ikut berubah: posisi heading itu di daftar isi. <h3> yang digedein tetap <h3>.
Jadi pilih level berdasarkan posisinya di struktur, bukan karena pengen tulisannya besar. Butuh teks besar yang bukan judul? Itu urusan CSS, bukan heading.
⚠️ Jebakan yang sering ketemu
- Lupa tag penutup.
<h1>Judultanpa</h1>bikin teks sesudahnya ikut jadi judul. - Angka pembuka dan penutup beda.
<h1>Judul Utama</h2>bikin browser bingung heading mana yang ditutup. - Heading cuma biar besar. Kalau teksnya bukan judul bagian, pakai
<p>lalu besarkan dengan CSS. - Lompat level. Dari
<h2>langsung ke<h4>bikin daftar isinya bolong. - Dua
<h1>. Halaman jadi punya dua judul utama, dan pembacanya gak tahu yang mana.
TL;DR: Heading itu judul, enam level dari <h1> sampai <h6>. Tulis tag pembuka, teks, lalu tag penutup dengan angka yang sama. Susun kayak daftar isi: satu <h1>, <h2> buat bagian, <h3> buat sub-bagian, tanpa lompat level. Ukuran huruf urusan CSS, level heading urusan struktur.
