Paragraf

Setelah heading menyusun kerangka, isi dokumen kita tulis dalam bentuk paragraf. Elemen p adalah wadah utama teks mengalir di hampir setiap halaman web, mulai dari artikel berita hingga deskripsi produk. Banyak pemula mengira tekan Enter di editor akan ikut tampil sebagai baris baru, dan harapan itu ternyata meleset. Pada Chapter ini kita mempelajari aturan pemakaian p, perilaku whitespace collapsing di balik layar, serta batasan isi yang sah di dalam paragraf.

Elemen p dan Satu Ide per Paragraf #

Elemen p membungkus satu paragraf teks. Browser merendernya sebagai blok yang memulai baris baru dan menambahkan jarak vertikal antarparagraf secara bawaan. Praktik penulisan yang membuat pembaca nyaman cukup sederhana: satu paragraf memuat satu ide.

<p>Toko Siti membuka cabang baru di Bandung pada bulan Maret.</p>
<p>Cabang kedua akan mengikuti pada akhir tahun.</p>

Ketika ide berganti, paragraf pun berganti. Paragraf yang terlalu panjang menyulitkan pemindaian, sedangkan paragraf yang terlalu banyak memecah alur baca. Kebiasaan menata satu ide per paragraf membuat dokumen tetap terbaca rapi di layar kecil sekalipun.

Whitespace Collapsing: Enter Tidak Membuat Paragraf #

Browser menerapkan aturan yang disebut whitespace collapsing: rangkaian karakter spasi, tab, dan baris baru di dalam sumber HTML digabungkan menjadi satu spasi ketika dirender. Aturan ini membuat enter yang berlipat di sumber tampil sebagai satu spasi di halaman. Kesalahpahaman berikut sangat umum di awal pembelajaran:

<p>
Paragraf pertama tentang stok kopi.


Paragraf kedua tentang harga kopi susu.
</p>

Output yang Dihasilkan:

Browser menampilkan satu teks mengalir tanpa jarak maupun baris baru:
  Paragraf pertama tentang stok kopi. Paragraf kedua tentang harga kopi susu.

Dua kalimat pada contoh di atas menyatu menjadi satu paragraf. Enter yang ditekan dua kali di sumber hanya menghasilkan whitespace yang kemudian dilipat menjadi satu spasi. Pemisahan paragraf adalah tugas elemen p, bukan tugas karakter enter.

Isi yang Sah di dalam p #

Model konten p hanya menerima phrasing content: teks biasa beserta elemen inline seperti em, strong, code, dan img. Elemen blok seperti h2, ul, atau div tidak boleh berada di dalam p. Ketika parser menemukan tag blok baru di tengah paragraf, parser menutup paragraf tersebut secara paksa sebelum melanjutkan, sehingga struktur dokumen berubah tak terduga.

Perilaku tersebut berdampak nyata pada markup seperti berikut:

<p>Bagian pertama catatan Siti
<h2>Bagian Kedua</h2>
</p>

Validator menandai markup di atas sebagai error, karena </p> yang tersisa tidak lagi memiliki pasangan tag pembuka yang hidup. Pola yang benar menempatkan setiap elemen blok berdiri sendiri, tepat seperti contoh pada file latihan di bawah.

Contoh File Lengkap #

File berikut merangkum aturan paragraf dalam satu halaman. Simpan sebagai contoh-paragraf.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Toko Siti</title>
</head>
<body>
  <h1>Catatan Toko Siti</h1>

  <p>Toko Siti membuka cabang baru
     pada bulan Maret.   Stok kopi
     tiba setiap pagi.</p>

  <p>Paragraf ini memuat satu ide: stok minggu ini berisi kopi Gayo, Toraja, dan Kintamani.</p>

  <p>Paragraf berikutnya menyimpan ide lain: harga kopi susu tetap dua belas ribu rupiah.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Paragraf pertama tersusun rapi: "...cabang baru pada bulan Maret. Stok kopi tiba setiap pagi."
  - Jarak vertikal yang sama lebar di antara ketiga paragraf

Mari kita telaah perilaku yang terjadi:

1. Baris 11-13 (p pertama): sumbernya berisi enter berlipat dan spasi berjauhan, tetapi whitespace collapsing membuat semuanya tampil sebagai teks mengalir dengan spasi tunggal.
2. Baris 15 (p kedua): satu ide tunggal mengenai stok kopi; kalimatnya pendek sehingga mudah dipindai.
3. Baris 17 (p ketiga): ide lain mengenai harga; peralihan ide ini yang menjadi alasan paragraf baru dibentuk.
4. Jarak antarparagraf: berasal dari margin bawaan elemen p, bukan dari enter di sumber.

Paragraf kini dapat kita susun dengan benar tanpa jebakan whitespace. Di dalam satu paragraf kadang muncul kebutuhan memindah baris secara paksa, misalnya pada alamat dan puisi, dan alatnya kita pelajari pada Chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen p
• MDN Web Docs — Headings and paragraphs
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatan Toko Siti</title>
</head>
<body>
  <h1>Catatan Toko Siti</h1>

  <p>Toko Siti membuka cabang baru
     pada bulan Maret.   Stok kopi
     tiba setiap pagi.</p>

  <p>Paragraf ini memuat satu ide: stok minggu ini berisi kopi Gayo, Toraja, dan Kintamani.</p>

  <p>Paragraf berikutnya menyimpan ide lain: harga kopi susu tetap dua belas ribu rupiah.</p>
</body>
</html>