Ilustrasi sampul artikel: Bolehkah Ada Dua H1? Aturan Hierarki Heading untuk SEO
·HTMLDasarSEO

Bolehkah Ada Dua H1? Aturan Hierarki Heading untuk SEO

Aturan hierarki heading HTML: bolehkah lebih dari satu h1, bolehkah melompati tingkat, dan dampaknya ke SEO serta pembaca layar. Plus cara menguji outline.

Pembuat Hyper Sheets & BelajarWeb.dev

Sebaiknya hanya ada satu h1 per halaman, memasang beberapa h1 (untuk logo, judul artikel, dan sidebar sekaligus) membuat mesin pencari bingung menentukan mana judul utama sebenarnya. Aturan kedua yang sama pentingnya: jangan melompati tingkat, misalnya dari h2 langsung ke h4. Artikel ini membahas hierarki heading h1 sampai h6, dampaknya ke SEO dan pembaca layar, cara menguji outline dokumenmu, serta enam kesalahan heading yang paling sering terjadi.

Heading HTML adalah elemen untuk membuat judul dan subjudul di halaman web, terdiri dari enam tingkat: h1 (paling besar dan paling penting) sampai h6 (paling kecil). h1 dipakai untuk judul utama halaman, sedangkan h2 sampai h6 dipakai untuk subjudul yang semakin dalam tingkatannya. Kalau kamu sedang mencari contoh heading, jawaban singkatnya: <h1>Judul Halaman</h1> adalah heading terbesar, dan <h6>Sub-sub-subjudul</h6> adalah yang terkecil.

Dan kalau kamu datang ke sini karena ada soal latihan yang berbunyi “elemen HTML untuk membuat judul (heading) ukuran terbesar adalah…”, jawabannya adalah h1. Tapi jangan berhenti di situ, di balik jawaban satu huruf itu ada konsep penting yang membedakan pemula dari orang yang benar-benar paham HTML: heading bukan soal ukuran, tapi soal makna dan struktur. Panduan ini akan membahas keenam tingkat heading satu per satu, contoh visualnya, cara menyusun hierarki yang benar, kenapa heading penting untuk SEO dan aksesibilitas, sampai daftar kesalahan pemula yang paling sering terjadi.

Heading HTML Adalah… (Definisi Lengkap)

Heading HTML adalah elemen yang menandai judul atau subjudul sebuah bagian konten, ditulis dengan tag h1 hingga h6. Angka di belakang huruf h menunjukkan tingkat kepentingan (dan kedalaman) dari heading tersebut: semakin kecil angkanya, semakin penting dan semakin tinggi posisinya dalam struktur dokumen. Browser secara default menampilkan h1 paling besar dan h6 paling kecil, tapi ukuran itu hanya efek tampilan, makna sebenarnya ada pada strukturnya.

Kata “heading” sendiri berasal dari dunia penerbitan: dalam sebuah buku atau artikel, ada judul bab, ada subjudul, ada sub-subjudul. Heading HTML meniru struktur yang sama persis. Kalau kamu membayangkan halaman web sebagai sebuah dokumen berjenjang, bab, sub-bab, bagian, maka heading adalah alat untuk menandai setiap jenjang itu.

Berikut bentuk paling sederhananya:

<h1>Belajar Memasak Nasi Goreng</h1>
<p>Nasi goreng adalah salah satu makanan paling populer di Indonesia.</p>

<h2>Bahan-Bahan</h2>
<p>Siapkan nasi putih, telur, bawang, dan kecap.</p>

<h2>Langkah Memasak</h2>
<p>Panaskan minyak, lalu tumis bawang sampai harum.</p>

Dalam contoh di atas, h1 adalah judul utama halaman (“Belajar Memasak Nasi Goreng”), sementara dua h2 menandai dua bagian besar di dalamnya. Struktur ini yang membuat konten mudah dibaca manusia sekaligus mudah dipahami mesin. Untuk konsep dasar HTML secara menyeluruh, kamu bisa mampir ke materi apa itu HTML di Hyper Sheets yang menjelaskan fondasinya dari nol dengan editor langsung.

Enam Tingkat Heading: H1 sampai H6 dengan Contoh Visual

Ada enam tingkat heading dalam HTML, dari h1 sampai h6, dan masing-masing mewakili satu level kedalaman dalam struktur dokumen. h1 adalah level tertinggi (judul utama), h2 untuk bagian besar, h3 untuk subbagian di dalam h2, dan seterusnya sampai h6 untuk detail paling dalam. Dalam praktik nyata, kamu jarang butuh sampai h5 atau h6, kebanyakan halaman hanya menggunakan h1 sampai h3.

Mari kita lihat keenamnya sekaligus:

<h1>Heading 1, Judul Utama Halaman</h1>
<h2>Heading 2, Judul Bagian Besar</h2>
<h3>Heading 3, Subbagian</h3>
<h4>Heading 4, Sub-subbagian</h4>
<h5>Heading 5, Detail Lebih Dalam</h5>
<h6>Heading 6, Level Terdalam</h6>

Secara tampilan default, keenam baris di atas akan tampil dengan ukuran menurun: h1 paling besar dan tebal, lalu makin ke bawah makin kecil sampai h6 yang ukurannya kira-kira sama atau bahkan lebih kecil dari teks paragraf biasa. Tapi ingat, itu hanya tampilan bawaan browser, bukan aturan yang mengikat maknanya.

<h1>Judul Halaman
<h2>Bab Utama
<h3>Sub-bagian
<h4>Detail
<h5>Rincian
<h6>Level Terdalam
Satu h1 per halaman, jangan lompat level (h2 → langsung h4).

Berikut penjelasan peran masing-masing tingkat:

  • h1, Judul utama halaman. Idealnya hanya ada satu per halaman. Inilah jawaban dari pertanyaan “elemen HTML untuk membuat judul dengan ukuran terbesar adalah apa”: jawabannya h1.
  • h2, Judul untuk bagian-bagian besar di halaman. Misalnya “Tentang Kami”, “Produk”, “Kontak” di sebuah landing page.
  • h3, Subjudul di dalam sebuah h2. Kalau h2-nya “Produk”, maka h3-nya bisa “Produk Digital” dan “Produk Fisik”.
  • h4, Level lebih dalam lagi, di bawah h3. Mulai jarang dipakai.
  • h5, Detail dalam h4. Sangat jarang dibutuhkan di halaman biasa.
  • h6, Level terdalam. Hampir tidak pernah kamu butuhkan kecuali di dokumen yang sangat kompleks.

Bayangkan seperti daftar isi buku yang berjenjang:

<h1>Panduan Web Development</h1>

<h2>Bab 1: HTML Dasar</h2>
<h3>1.1 Struktur Dokumen</h3>
<h3>1.2 Heading dan Paragraf</h3>

<h2>Bab 2: CSS Dasar</h2>
<h3>2.1 Selector</h3>
<h3>2.2 Box Model</h3>

Perhatikan polanya: h1 adalah judul buku, h2 adalah judul bab, dan h3 adalah subbab di dalam bab. Struktur ini logis, konsisten, dan tidak melompat-lompat. Untuk latihan langsung membuat heading dengan urutan yang benar, lesson heading di Hyper Sheets menyediakan editor interaktif yang menampilkan hasilnya secara real-time.

Elemen HTML untuk Membuat Judul dengan Ukuran Terbesar Adalah H1

Elemen HTML untuk membuat judul dengan ukuran terbesar adalah h1. Ini adalah jawaban langsung untuk soal latihan yang sering muncul, dan alasannya sederhana: h1 berada di puncak hierarki heading, sehingga browser menampilkannya paling besar secara default dan mesin pencari memperlakukannya sebagai judul paling penting di halaman tersebut.

Contoh penggunaannya:

<h1>Selamat Datang di Toko Buku Online</h1>

Kenapa h1 yang terbesar, bukan h6? Karena penomoran heading mengikuti prinsip “semakin kecil angka, semakin tinggi tingkatnya”, mirip peringkat: juara 1 lebih tinggi dari juara 6. h1 adalah level 1 (tertinggi), h6 adalah level 6 (terendah). Jadi meski secara intuisi angka besar terasa “lebih besar”, di dunia heading justru kebalikannya.

Satu catatan penting yang sering terlewat: h1 terbesar itu default browser, bukan kewajiban. Kalau kamu memakai CSS, kamu bisa membuat h1 justru tampil kecil dan h3 tampil besar, dan itu tidak mengubah fakta bahwa h1 tetap judul utama secara makna. Inilah inti yang akan kita bahas di bagian berikutnya: ukuran dan makna adalah dua hal yang terpisah.

Hierarki Heading dan Struktur Dokumen

Aturan utama hierarki heading: gunakan h1 hanya sekali sebagai judul utama, dan jangan melompati tingkat (misalnya langsung dari h1 ke h3). Heading harus turun satu tingkat demi satu tingkat secara berurutan, karena setiap heading dianggap sebagai “anak” dari heading di atasnya. Struktur yang rapi membuat konten mudah dinavigasi, baik oleh manusia maupun oleh mesin pencari dan screen reader.

Mari lihat contoh yang benar:

<h1>Resep Kue Cokelat</h1>

<h2>Bahan</h2>
<h3>Bahan Kering</h3>
<h3>Bahan Basah</h3>

<h2>Cara Membuat</h2>
<h3>Persiapan</h3>
<h3>Memanggang</h3>

Struktur di atas turun rapi: h1 → h2 → h3, tanpa lompatan. Setiap h3 jelas berada di bawah h2 tertentu. Sekarang bandingkan dengan contoh yang salah:

<h1>Resep Kue Cokelat</h1>
<h4>Bahan</h4>          <!-- SALAH: melompat dari h1 ke h4 -->
<h2>Cara Membuat</h2>

Analogi yang gampang: hierarki heading itu seperti nomor bab dan subbab. Kamu tidak akan menulis “Bab 1” lalu langsung loncat ke “Subbab 1.1.1.1” tanpa melewati “1.1” dan “1.1.1” dulu. Heading bekerja dengan logika yang sama. Konsep struktur berjenjang ini juga jadi fondasi HTML semantik, yang membahas bagaimana memilih elemen berdasarkan maknanya, bukan tampilannya.

Kesalahan #1 Pemula: Memilih Heading Berdasarkan Ukuran, Bukan Makna

Kesalahan paling umum pemula adalah memilih tag heading berdasarkan seberapa besar teks yang mereka inginkan, padahal heading harus dipilih berdasarkan makna dan posisi dalam struktur, bukan ukuran. Kalau kamu butuh teks besar, atur ukurannya dengan CSS font-size; jangan memakai h1 cuma karena ingin teks besar, dan jangan memakai h4 cuma karena h2 terasa “terlalu besar”.

Ini kesalahan yang sangat sering terjadi sehingga layak dijelaskan pelan-pelan. Misalnya kamu punya subjudul yang secara struktur seharusnya h2, tapi menurutmu tampilan default h2 terlalu besar. Godaannya adalah menggantinya jadi h4 supaya lebih kecil. Jangan. Itu merusak struktur demi tampilan.

Cara yang benar: tetap pakai h2 (karena itu maknanya), lalu kecilkan dengan CSS:

<h2 class="subjudul-kecil">Bagian yang Ingin Tampil Lebih Kecil</h2>
.subjudul-kecil {
  font-size: 18px; /* atur ukuran sesuai keinginan, struktur tetap h2 */
}

Dengan cara ini, h2 tetap menjadi h2 di mata mesin pencari dan screen reader (struktur benar), tapi tampil sekecil yang kamu mau (tampilan sesuai selera). Pisahkan dua hal ini di kepalamu:

  • Tag heading (h1-h6) → menentukan makna dan struktur. Dipilih berdasarkan posisi dalam hierarki konten.
  • CSS font-size → menentukan ukuran tampilan. Diatur bebas tanpa mempengaruhi makna.

Styling Heading dengan CSS

Setelah tag heading dipilih berdasarkan makna, kamu bebas mengatur tampilannya dengan CSS, mulai dari ukuran, warna, font, sampai jarak. Semua properti CSS teks berlaku untuk heading, jadi kamu bisa membuatnya tampil persis seperti yang diinginkan tanpa mengubah tag-nya.

Contoh styling heading yang umum:

h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  line-height: 1.2;
}

h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #334155;
  margin-top: 32px;
  margin-bottom: 12px;
}

Kamu juga bisa menambahkan sentuhan visual seperti garis bawah atau warna aksen:

h2 {
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 8px;
}

Poin pentingnya: browser memberi setiap heading margin dan font-size default. Kalau kamu ingin tampilan yang konsisten di seluruh situs, seringkali kamu perlu me-reset atau mengatur ulang nilai-nilai default itu. Untuk pendalaman soal ukuran font, jarak baris, dan kerapian tipografi, materi typography di Hyper Sheets membahas cara menyusun skala ukuran teks yang enak dibaca.

Satu hal yang perlu diingat saat styling: mengubah font-size heading dengan CSS tidak mengubah tingkatnya. h1 yang kamu buat tampil kecil tetaplah h1 secara struktur. Inilah kenapa memisahkan tag dari tampilan itu aman dan justru direkomendasikan.

Heading vs Teks Tebal: Kenapa b dan strong Bukan Pengganti Heading

Teks tebal (b atau strong) tidak bisa menggantikan heading, karena keduanya punya fungsi yang berbeda: heading menandai struktur dokumen, sedangkan b/strong hanya menebalkan kata dalam kalimat tanpa arti struktural. Membuat “judul” dengan cara menebalkan paragraf mungkin terlihat sama di layar, tapi bagi mesin pencari dan screen reader, itu sama sekali bukan judul.

Lihat perbedaannya:

<!-- SALAH: judul palsu dari teks tebal -->
<p><strong>Bahan-Bahan</strong></p>

<!-- BENAR: judul asli dengan heading -->
<h2>Bahan-Bahan</h2>

Kedua baris di atas bisa saja tampil mirip (tebal dan menonjol). Tapi hanya yang kedua yang benar-benar dikenali sebagai judul bagian. Screen reader tidak akan pernah mengumumkan <p><strong> sebagai heading, dan mesin pencari tidak akan memakainya untuk memahami struktur halaman.

Perlu diluruskan juga: b dan strong bukan elemen buruk, mereka punya tempatnya sendiri untuk menekankan kata di dalam kalimat, misalnya “Jangan lupa simpan pekerjaanmu.” Yang salah adalah memakainya sebagai pengganti heading. Perbedaan b versus strong dan kapan memakai masing-masing dibahas tuntas di materi text formatting, lengkap dengan contoh penekanan teks yang benar.

Aturan sederhananya: kalau teks itu adalah judul sebuah bagian, pakai heading. Kalau teks itu adalah kata penting di tengah kalimat, baru pakai strong.

Heading untuk SEO dan Aksesibilitas

Heading berperan besar untuk SEO dan aksesibilitas: mesin pencari seperti Google memakai heading untuk memahami struktur dan topik halaman, sementara screen reader memakai heading sebagai peta navigasi bagi pengguna tunanetra. Struktur heading yang rapi bukan sekadar soal kerapian kode, ia langsung berdampak pada seberapa mudah kontenmu ditemukan dan digunakan.

Dari sisi SEO, heading membantu mesin pencari menjawab pertanyaan “halaman ini tentang apa dan bagaimana strukturnya”. h1 memberi tahu topik utama, h2 memberi tahu bagian-bagian besarnya, dan seterusnya. Ketika strukturnya jelas dan berurutan, mesin pencari lebih mudah memahami dan menampilkan halamanmu untuk pencarian yang relevan. Ini juga membantu fitur seperti cuplikan hasil pencarian, karena mesin bisa mengenali bagian mana yang menjawab pertanyaan tertentu.

Dari sisi aksesibilitas, ini bahkan lebih konkret.

Contoh halaman dengan struktur ramah aksesibilitas:

<h1>Cara Merawat Tanaman Hias</h1>

<h2>Menyiram dengan Benar</h2>
<p>...</p>

<h2>Pemilihan Media Tanam</h2>
<h3>Tanah</h3>
<h3>Sekam</h3>

<h2>Mengatasi Hama</h2>
<p>...</p>

Dari struktur di atas, screen reader bisa membacakan daftar heading yang langsung menggambarkan isi halaman. Ini adalah praktik nyata, bukan teori, dan inilah kenapa heading yang benar penting untuk semua orang. Prinsip-prinsip ini dibahas lebih dalam di materi aksesibilitas HTML yang menjelaskan cara membuat halaman yang bisa dipakai semua pengguna.

Outline Dokumen: Cara Menguji Struktur Heading-mu

Outline dokumen adalah kerangka konten yang terbentuk dari susunan heading, dan cara termudah menguji apakah struktur heading-mu benar adalah dengan membacanya sebagai daftar bertingkat. Kalau daftar heading-mu terbaca seperti daftar isi yang masuk akal, berarti strukturmu benar. Kalau terasa melompat-lompat atau ada level yang hilang, ada yang perlu diperbaiki.

Coba lakukan latihan sederhana ini: ambil semua heading di halamanmu, tulis berurutan dengan indentasi sesuai levelnya, lalu baca sebagai daftar isi.

<h1>Panduan Belajar HTML</h1>
  <h2>Apa Itu HTML</h2>
  <h2>Elemen Dasar</h2>
    <h3>Heading</h3>
    <h3>Paragraf</h3>
    <h3>Tautan</h3>
  <h2>Membuat Halaman Pertama</h2>

Bacaan outline di atas terasa logis: satu judul utama, tiga bagian besar, dan tiga elemen dasar sebagai subbagian. Ini outline yang sehat. Kalau kamu menemukan sesuatu seperti “Panduan Belajar HTML → langsung ke h4” atau ada h2 yang muncul setelah h4 tanpa alasan jelas, itu tanda outline-nya rusak.

Membangun kebiasaan memeriksa outline ini akan menyelamatkanmu dari banyak masalah SEO dan aksesibilitas sejak awal. Anggap saja seperti membuat kerangka tulisan sebelum menulis esai, struktur yang baik dari awal membuat segalanya lebih mudah. Kalau kamu ingin memperkuat fondasi HTML secara keseluruhan sebelum masuk ke topik yang lebih dalam, mulailah dari panduan belajar HTML untuk pemula yang menjelaskan elemen-elemen inti langkah demi langkah.

Kesalahan Umum Saat Menggunakan Heading

Kesalahan heading yang paling sering terjadi: memakai lebih dari satu h1 tanpa alasan, melompati tingkat heading, memilih tag berdasarkan ukuran, memakai heading untuk teks biasa yang cuma ingin besar, dan meninggalkan heading kosong. Sebagian besar masalah struktur halaman yang akan kamu temui ada di daftar ini, dan semuanya mudah dihindari begitu kamu tahu.

1. Beberapa h1 dalam satu halaman

Memasang banyak h1 (misalnya satu untuk logo, satu untuk judul artikel, satu untuk sidebar) membingungkan mesin pencari soal mana judul utama sebenarnya. Untuk amannya, satu h1 per halaman.

<!-- Hindari -->
<h1>NamaWebsite</h1>
<h1>Judul Artikel</h1>

<!-- Lebih baik -->
<h1>Judul Artikel</h1>

2. Melompati tingkat heading

Loncat dari h1 langsung ke h3 atau h4 meninggalkan “lubang” di struktur. Turunlah satu tingkat demi satu tingkat.

<!-- Hindari -->
<h1>Judul</h1>
<h3>Subbagian</h3>

<!-- Lebih baik -->
<h1>Judul</h1>
<h2>Bagian</h2>
<h3>Subbagian</h3>

3. Memilih tag heading karena ukuran, bukan makna

Sudah dibahas panjang di atas, tapi karena ini kesalahan nomor satu, layak diulang: jangan pilih h4 cuma karena ingin teks kecil. Pilih tag sesuai posisi struktur, lalu atur ukuran dengan CSS.

4. Memakai heading untuk teks biasa yang cuma ingin besar

Kadang orang membungkus teks biasa (bukan judul) dengan h2 hanya supaya tampil besar dan menonjol. Ini menipu struktur. Kalau cuma ingin teks besar, pakai paragraf dengan CSS:

<!-- Hindari: ini bukan judul, tapi dipaksa jadi heading -->
<h2>Diskon 50% hari ini saja!</h2>

<!-- Lebih baik -->
<p class="teks-promo">Diskon 50% hari ini saja!</p>
.teks-promo {
  font-size: 24px;
  font-weight: bold;
}

5. Heading kosong

Heading tanpa isi teks (misalnya <h2></h2> yang cuma dipakai untuk memberi jarak atau menaruh gambar) membingungkan screen reader, yang akan mengumumkan “heading” tanpa menyebut apa pun. Jangan pernah membuat heading kosong; kalau butuh jarak, pakai CSS margin atau padding.

6. Menaruh terlalu banyak teks dalam heading

Heading sebaiknya ringkas, sebuah judul, bukan sebuah paragraf. Kalau kamu menulis satu kalimat panjang penuh di dalam h2, kemungkinan besar itu seharusnya paragraf biasa. Bedakan mana yang judul (heading) dan mana yang isi (paragraf).

Untuk memantapkan semua praktik baik ini dalam satu tempat, materi HTML best practices merangkum aturan-aturan penting termasuk penggunaan heading yang benar.

Praktik: Menyusun Struktur Heading untuk Satu Halaman

Cara terbaik memahami heading adalah dengan menyusun satu halaman utuh dari nol, memutuskan tag mana untuk setiap judul berdasarkan maknanya. Mari kita praktik membuat struktur heading untuk sebuah halaman artikel resep sederhana, dari judul utama sampai detail terdalam.

Bayangkan kamu membuat halaman resep. Pikirkan dulu strukturnya sebelum menulis kode: ada judul resep (level tertinggi), lalu bagian bahan dan cara membuat (level besar), lalu rincian di dalamnya (level lebih dalam).

<article>
  <h1>Nasi Goreng Kampung Spesial</h1>
  <p>Resep nasi goreng sederhana untuk 2 porsi.</p>

  <h2>Bahan-Bahan</h2>
  <h3>Bahan Utama</h3>
  <p>Nasi putih, telur, dan bawang merah.</p>
  <h3>Bumbu</h3>
  <p>Kecap manis, garam, dan merica.</p>

  <h2>Langkah Memasak</h2>
  <h3>Persiapan</h3>
  <p>Iris bawang dan kocok telur.</p>
  <h3>Memasak</h3>
  <p>Tumis bumbu, masukkan nasi, aduk rata.</p>

  <h2>Tips Penyajian</h2>
  <p>Sajikan dengan kerupuk dan acar.</p>
</article>

Perhatikan alur berpikirnya: h1 untuk judul resep (satu saja), h2 untuk tiga bagian besar (Bahan, Langkah, Tips), dan h3 untuk memecah bagian besar menjadi subbagian. Tidak ada lompatan, tidak ada h1 ganda, dan setiap heading benar-benar menandai judul, bukan teks biasa.

Setelah struktur ini jadi, barulah kamu menambahkan CSS untuk mempercantik tampilannya. Struktur dulu, tampilan belakangan, urutan berpikir ini yang membuat halamanmu rapi secara kode sekaligus enak dilihat. Kalau kamu ingin membawa halaman seperti ini sampai online dan bisa diakses orang lain, ikuti panduan membuat website pertama yang membahas langkah dari file HTML sampai deploy.

Ingin latihan yang lebih seru? Coba game Penyihir Tag di Hyper Sheets, kamu berlatih memilih dan menyusun tag HTML (termasuk heading) sambil bermain level demi level, cara paling menyenangkan untuk menghafalkan kapan memakai tag apa.

Cek Pemahaman

Setelah menulis h1 sebagai judul utama, heading mana yang paling tepat untuk memulai bagian besar berikutnya?

FAQ Seputar Heading HTML

Heading HTML adalah apa?

Heading HTML adalah elemen untuk membuat judul dan subjudul di halaman web, ditulis dengan tag h1 sampai h6. h1 adalah judul utama dan paling penting, sedangkan h6 adalah level terkecil dan terdalam. Heading menandai struktur dokumen sehingga konten mudah dipahami oleh pembaca, mesin pencari, maupun screen reader.

Elemen HTML untuk membuat judul dengan ukuran terbesar adalah apa?

Jawabannya adalah h1. h1 berada di puncak hierarki heading, sehingga browser menampilkannya paling besar secara default dan dianggap sebagai judul utama halaman. Idealnya, h1 hanya digunakan sekali per halaman untuk menandai topik utama.

Berapa jumlah tingkat heading di HTML?

Ada enam tingkat heading, yaitu h1, h2, h3, h4, h5, dan h6. h1 adalah tingkat tertinggi (judul utama) dan h6 adalah tingkat terendah. Dalam praktik sehari-hari, kebanyakan halaman hanya memakai h1 sampai h3.

Bolehkah ada lebih dari satu h1 dalam satu halaman?

Secara teknis, standar HTML modern mengizinkannya, terutama saat memakai elemen section atau article. Namun untuk keamanan SEO dan kemudahan struktur, praktik yang paling direkomendasikan adalah menggunakan hanya satu h1 per halaman sebagai judul utama. Selama kamu belum benar-benar paham konsekuensinya, tetaplah pada satu h1.

Apa beda heading dan paragraf?

Heading (h1-h6) menandai judul atau subjudul sebuah bagian dan menentukan struktur dokumen, sedangkan paragraf (p) berisi teks isi atau penjelasan. Heading biasanya ringkas dan tampil menonjol, sementara paragraf berisi kalimat-kalimat penjelasan. Menggunakan heading untuk teks isi, atau paragraf untuk judul, akan merusak struktur halaman.

Apakah urutan heading penting untuk SEO?

Ya, sangat penting. Mesin pencari memakai urutan dan hierarki heading untuk memahami struktur dan topik halaman. Urutan yang rapi (turun satu tingkat demi satu tingkat, tanpa melompat) membantu mesin pencari dan screen reader menavigasi kontenmu, yang berdampak positif pada SEO dan aksesibilitas. Heading yang berantakan atau melompat-lompat membuat struktur halaman sulit dipahami.

Langkah Selanjutnya

Sekarang kamu sudah paham fondasi lengkap heading HTML: keenam tingkat dari h1 sampai h6, kenapa h1 adalah judul terbesar sekaligus terpenting, cara menyusun hierarki tanpa melompat, prinsip “heading untuk makna, CSS untuk ukuran”, dan kenapa semua ini penting untuk SEO dan aksesibilitas. Yang tersisa tinggal membiasakan diri memilih tag yang benar setiap kali menulis HTML.

Kebiasaan itu paling cepat terbentuk lewat latihan langsung. Buka lesson heading di Hyper Sheets dan coba susun struktur heading dari berbagai contoh halaman, lalu lanjutkan ke materi HTML semantik untuk memperdalam cara memilih elemen berdasarkan maknanya. Setelah HTML terasa nyaman, kamu siap melangkah ke CSS untuk mempercantik tampilan halamanmu. Selamat ngoding!