Tutorial HTML / Judul dan paragraf: h1 sampai h6, p, dan br

Tutorial HTML

Dibuat 2026-11-02 Terakhir Diubah 2026-11-02

Gunakan h1 hingga h6 untuk heading HTML dan p untuk paragraf. Heading menggambarkan hierarki halaman, sedangkan paragraf mengelompokkan kalimat yang saling terkait. Gunakan br hanya jika Anda membutuhkan pergantian baris dalam paragraf yang sama dan bukan untuk memulai paragraf baru.

Gunakan h1–h6 untuk menunjukkan tingkat heading

HTML menawarkan enam tingkat judul. Sebuah halaman biasanya menggunakan h1 untuk judul utama, h2 untuk bagian utama, dan h3 untuk topik di dalam bagian ini. Tingkat sebuah judul menjelaskan di mana kontennya berada dalam dokumen; ini bukan pilihan ukuran font. Bandingkan area halaman dengan judul di Bagilah sebuah halaman dengan elemen semantik.

<h1>Panduan Aksesibilitas</h1>

<h2>Struktur HTML</h2>
<p>Ikhtisar tentang struktur dokumen HTML.</p>

<h3>Tingkat Judul</h3>
<p>Bagaimana mengatur judul.</p>

<h3>Paragraf</h3>
<p>Bagaimana memisahkan paragraf.</p>

<h2>Tampilan CSS</h2>
<p>Bagaimana CSS mengubah tampilan judul dan paragraf.</p>

Kedua judul yang disebutkan di atas h3 adalah topik di dalam bagian h2 yang berjudul "Struktur HTML". h2 berikutnya memulai bagian utama lainnya. Saat memperkenalkan subbagian, Anda harus menghindari melompati satu tingkat — misalnya langsung dari h2 ke h4.

Judul yang jelas membantu pembaca untuk meninjau halaman, dan bagi pengguna pembaca layar untuk menavigasi antar bagian. Panduan W3C WAI tentang struktur judul menjelaskan mengapa tingkat judul harus mencerminkan organisasi konten.

Jika WordPress sudah menampilkan judul posting sebagai h1 di halaman, Anda tidak memerlukan h1 tambahan untuk judul yang sama di dalam konten postingan. Sebagai gantinya, mulailah bagian utama dengan h2.

Lihat judul dan paragraf di browser

Simpan contoh lengkap berikut sebagai index.html dan buka di browser. Ini menampilkan enam tingkat judul secara berurutan untuk perbandingan; halaman nyata hanya memerlukan tingkat yang dibutuhkan kontennya.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Judul dan Paragraf HTML</title>
  </head>
  <body>
    <h1>Judul 1</h1>
    <h2>Judul 2</h2>
    <h3>Judul 3</h3>
    <h4>Judul 4</h4>
    <h5>Judul 5</h5>
    <h6>Judul 6</h6>
    <p>Ini adalah paragraf pertama.</p>
    <p>Ini adalah paragraf kedua.</p>
  </body>
</html>

Browser memberikan ukuran dan jarak standar yang berbeda untuk tingkat judul, tetapi tampilan yang tepat tergantung pada browser dan CSS halaman. Jika sebuah judul ingin terlihat lebih besar atau lebih kecil, ubah CSS-nya alih-alih menggunakan tingkat judul yang salah.

Pisahkan paragraf dengan p

Elemen p menandai sebuah paragraf. Bungkus berbagai kelompok kalimat yang saling berhubungan dalam elemen p terpisah agar hubungannya tetap jelas.

<p>HTML membuat struktur sebuah situs web.</p>

<p>CSS mengatur tampilannya.</p>

Kode ini membuat dua paragraf. Menambahkan baris kosong di editor teks saja tidak membuat paragraf HTML baru. p dapat berisi teks biasa dan konten inline seperti tautan, tetapi tidak boleh berisi judul, daftar, atau tabel.

Untuk menambahkan ruang antara paragraf, gunakan properti CSS seperti margin, daripada menyisipkan elemen p kosong atau elemen br yang berulang.

Gunakan br untuk membuat pergantian baris di dalam paragraf

Elemen br memulai baris baru tanpa membuat paragraf baru. Ini berguna ketika posisi pergantian baris penting, seperti pada alamat atau puisi. Jika topiknya berubah, mulailah p yang lain.

Dalam contoh ini, p kedua adalah paragraf baru. br hanya mengubah baris dalam paragraf ini.

<!doctype html>
<html lang="id-ID">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Paragraf dan pemisah baris HTML</title>
  </head>
  <body>
    <p>Ini adalah paragraf pertama.</p>
    <p>Ini adalah baris pertama dari paragraf kedua.<br>Ini adalah baris kedua dari paragraf kedua.</p>
  </body>
</html>

Pertahankan tingkat judul semantis dalam HTML dan tetapkan ukuran visualnya menggunakan font, ukuran, dan tinggi baris di CSS.

Latihan: Memperbaiki hierarki judul

Ketika sebuah bagian utama mendapatkan subseksinya yang pertama, jangan beralih dari h2 ke h4. Masalah dalam potongan kode ini adalah hierarkinya, bukan ukuran font.

<!-- Satu tingkat judul dilewati -->
<h2>Informasi pengiriman</h2>
<h4>Area pengiriman</h4>

<!-- Hierarki yang konsisten -->
<h2>Informasi pengiriman</h2>
<h3>Area pengiriman</h3>
<h3>Waktu pengiriman</h3>

Bandingkan potongan kode secara terpisah di dalam body dari sebuah dokumen; jangan menyimpan keduanya sebagai konten aktual. Baca hanya judulnya dan periksa apakah topik utama dan subtopiknya tetap jelas. Gunakan CSS untuk menyesuaikan tampilannya.

Periksa judul dan paragraf Anda

Pilih h1–h6 sesuai dengan struktur konten, bukan berdasarkan ukuran font standar.
Beri setiap judul nama yang deskriptif dan hindari melewatkan satu tingkat saat beralih ke subbagian.
Gunakan p baru untuk paragraf baru; gunakan br hanya untuk pemisah baris yang signifikan dalam sebuah paragraf.
Atur ukuran huruf dan jarak dengan CSS, bukan dengan elemen kosong atau tingkat judul yang lain.

Untuk memeriksa tag yang bersarang secara keliru, serahkan HTML Anda ke layanan validasi Markup W3C. Uji urutan bacaan dan penggunaan keyboard dengan halaman kecil di Dasar-Dasar Aksesibilitas: Judul, Tautan, Gambar, dan Keyboard.

Tutorial HTML