HTML Academy · Pelajaran

Heading h1-h6 dan Hierarkinya

Gunakan tingkat heading untuk membuat struktur dokumen yang bermakna.

Heading h1-h6 dan Hierarkinya adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Enam Tingkat Heading

HTML menyediakan enam elemen heading, mulai dari <h1> hingga <h6>:

h1 — Judul utama halaman (paling penting)
h2 — Bagian-bagian utama
h3 — Subbagian
h4, h5, h6 — Subbagian yang lebih mendalam (jarang diperlukan)

Ukurannya secara visual semakin kecil, tetapi ukuran tersebut dikendalikan oleh CSS — bukan oleh angkanya.

Hierarki Semantik

Heading membentuk kerangka dokumen — daftar isi untuk halaman Anda:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

Aturan h1

Praktik terbaik untuk <h1>:

Gunakan tepat satu <h1> per halaman
Isinya harus sama atau sangat berkaitan dengan elemen <title>
Elemen ini merupakan topik utama halaman
Mesin pencari memberikan bobot besar padanya untuk SEO

Jangan Melewati Tingkatan

Tingkatan heading harus digunakan secara berurutan — jangan langsung berpindah dari h2 ke h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Heading untuk Navigasi

Pengguna pembaca layar mengandalkan heading untuk menavigasi halaman yang panjang:

Mereka berpindah antarheading dengan tombol H
Pembaca layar mencantumkan semua heading seperti daftar isi
Hierarki yang benar membuat halaman dapat dinavigasi tanpa melihat

Gaya vs Semantik

Jangan memilih tingkatan heading berdasarkan ukuran visualnya — gunakan CSS untuk itu:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Heading dalam Section

Saat menggunakan elemen pembentuk section HTML5, hierarki heading dimulai kembali di setiap section:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Tips Aksesibilitas Heading

Ikuti aturan heading berikut untuk aksesibilitas:

Setiap halaman harus memiliki setidaknya satu heading
Area konten utama harus diawali dengan <h1>
Jangan gunakan heading hanya untuk membuat teks menjadi tebal atau besar
Jangan gunakan teks tebal sebagai pengganti heading

SEO dan Heading

Mesin pencari menggunakan heading untuk memahami isi halaman:

<h1> memiliki bobot SEO terbesar
Sertakan kata kunci target secara alami dalam heading
Heading memecah konten dan meningkatkan metrik keterbacaan
Mesin pencari menampilkan heading dalam hasil pencarian (cuplikan unggulan)

Gaya Bawaan Peramban

Peramban menerapkan gaya bawaan pada heading:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Heading dalam Navigasi

Heading juga dapat digunakan dalam penanda navigasi:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Pemeriksaan Singkat

Berapa banyak elemen h1 yang biasanya dimiliki halaman dengan struktur yang baik?

Ringkasan: Heading

Hal-hal penting tentang hierarki heading:

Enam tingkatan: h1 hingga h6
Satu h1 per halaman — judul utama
Gunakan tingkatan secara berurutan — jangan pernah melewati satu tingkatan
Heading membentuk kerangka dokumen yang aksesibel
Gunakan CSS untuk ukuran visual, bukan angka heading

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Heading h1-h6 dan Hierarkinya” gratis?

Ya — teks lengkap “Heading h1-h6 dan Hierarkinya” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Heading h1-h6 dan Hierarkinya”?

Gunakan tingkat heading untuk membuat struktur dokumen yang bermakna. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Heading h1-h6 dan Hierarkinya” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy