Heading HTML: h1 sampai h6, Ukuran, Urutan dan Styling

Enam tag heading HTML

HTML punya enam level heading, <h1> sampai <h6>. <h1> adalah level teratas (judul halaman) dan <h6> yang terendah. Browser menampilkan setiap level lebih kecil dari level sebelumnya, semuanya tebal, masing-masing di barisnya sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

<h5> dan <h6> secara default lebih kecil dari teks biasa, yang sering mengejutkan orang. Ukuran itu hanya default, dan bagian berikutnya menunjukkan kenapa level heading tidak boleh dipilih berdasarkan ukurannya.

Heading adalah kerangka halaman

Heading bukan hiasan. Bersama-sama, heading membentuk kerangka halaman, seperti daftar isi sebuah buku. Pengguna screen reader melompat dari heading ke heading untuk menemukan yang mereka cari, dan mesin pencari membacanya untuk memahami topik di halaman.

Aturannya sederhana: satu <h1> untuk judul halaman, <h2> untuk setiap bagian utama, <h3> untuk subbagian di dalam <h2>, dan seterusnya, tanpa melompati level. Contoh ini membuat daftar isi dari heading-heading, sama seperti yang dilihat alat bantu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Ubah <h3> kedua menjadi <h5> dan kerangkanya menunjukkan celah: pembaca yang memakai heading akan bertanya ke mana perginya h4.

Mengubah ukuran heading

Pilih level berdasarkan posisi di kerangka halaman, lalu atur tampilannya dengan CSS. Judul sidebar mungkin perlu berupa <h2> tapi terlihat kecil; judul hero bisa berupa <h1> yang sangat besar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Hal yang sama berlaku sebaliknya: jangan memakai tag heading hanya untuk membuat teks besar atau tebal. Untuk kata tebal di dalam kalimat, pakai <strong>, dan untuk teks besar yang bukan heading, pakai <p> dengan class. Lihat huruf tebal untuk tag-tag teks.

Subjudul dan tagline

Subjudul tepat di bawah heading biasanya bukan heading: subjudul tidak memulai bagian baru. Pakai paragraf, dan kelompokkan pasangan itu dengan <hgroup> kalau kamu mau:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Kerangkanya tetap rapi (satu h1, lalu bagian-bagian h2), dan tagline tetap terlihat menyatu dengan judulnya.

Membuat link ke heading

Beri heading sebuah id, dan link apa pun dengan #id di href-nya akan langsung melompat ke sana. Begitulah cara kerja daftar isi dan tombol "salin link ke bagian ini":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Kesalahan umum

• Memilih level karena ukurannya. Pilih berdasarkan posisi di kerangka halaman, lalu beri gaya dengan CSS.
• Melompati level. Berpindah dari <h2> langsung ke <h4> merusak navigasi bagi pengguna screen reader.
• Heading untuk penekanan. Baris tebal di dalam paragraf adalah <strong>, bukan <h4>.
• Tidak ada <h1>, atau logo sebagai satu-satunya <h1>. <h1> harus menamai konten halaman, seperti judul artikel atau produk.
• Heading kosong. Heading yang hanya berisi ikon atau tidak berisi apa pun diumumkan sebagai kosong. Isi dengan teks sungguhan.