Paragraph

Jika heading adalah kerangka halaman, paragraf adalah isi ruangnya. Hampir seluruh teks — artikel, deskripsi produk, pengumuman — ditampung oleh elemen p. Aturan dasarnya sederhana, tetapi perilaku browser terhadap spasi dan baris kosong sering mengejutkan pemula.

Chapter ini membahas cara membagi gagasan ke dalam paragraf, lalu membedah mekanisme whitespace collapsing: alasan menekan Enter di berkas HTML tidak menghasilkan baris baru di halaman yang tampil.

Paragraf Menampung Satu Gagasan #

Aturan praktisnya: satu elemen p menampung satu gagasan utama. Browser menyisipkan jarak antar paragraf secara bawaan, sehingga pergantian gagasan terlihat jelas tanpa kita mengatur apa pun:

<p>Kedai Siti membuka toko setiap pagi pukul tujuh.</p>
<p>Pesanan roti bakar keju biasanya memuncak saat akhir pekan.</p>

Hasil Render:

Baris kosong pada hasil render menggambarkan jarak yang disisipkan browser. Mari kita telaah:

1. Baris 1 (<p> pertama): satu gagasan — jam buka kedai.
2. Baris 2 (<p> kedua): gagasan berbeda — pola pesanan; batas keduanya dibentuk oleh markup, bukan oleh tombol Enter.

Browser Merapatkan Spasi #

Mekanisme di balik layar: parser HTML meratakan setiap rentetan spasi, tab, dan baris baru menjadi satu spasi tunggal. Perilaku ini disebut whitespace collapsing. Akibatnya, format berkas sumber tidak dibaca browser sebagai format tampilan:

<p>Kedai Siti
    buka    setiap pagi
    pukul tujuh.</p>

Hasil Render:

1. Baris 1-3 (isi p): tiga baris sumber dengan spasi tak beraturan — semuanya dilipat menjadi satu baris tampilan dengan spasi tunggal.
2. Pemisah baris: hanya markup (p, br) yang menciptakan paragraf dan baris baru; karakter whitespace di sumber tidak.

Baris kosong beruntun mendapat perlakuan yang sama: lima baris kosong di antara dua kalimat hanya diratakan menjadi satu spasi. Konsekuensinya, pemformatan tampilan harus dinyatakan lewat elemen atau CSS — bukan lewat kerapian spasi di berkas sumber.

br Bukan Pengganti Paragraf #

Elemen br memangkas baris pada posisi tertentu. Pemakaian sahnya adalah pemisah baris yang memang bermakna — baris alamat atau baris puisi (dibahas lengkap pada chapter Br dan Hr). Pola berikut menyalahgunakan br sebagai pembatas paragraf:

<p>Kedai Siti buka pukul tujuh.<br><br>Menu roti diperbarui setiap Jumat.</p>

Bagi browser, kedua kalimat tersebut tetap satu paragraf karena hanya ada satu elemen p. Pembaca layar membacanya menyambung tanpa jeda paragraf, dan jarak antar paragraf tidak dapat diatur karena pembatasnya bukan markup. Perbaikannya memakai dua p:

<p>Kedai Siti buka pukul tujuh.</p>
<p>Menu roti diperbarui setiap Jumat.</p>

Paragraf Kosong Tidak Menghasilkan Jarak #

Pola lain yang sering muncul: menyisipkan p kosong beruntun demi mendorong konten ke bawah.

<p>Daftar menu ditampilkan di bawah.</p>
<p></p>
<p></p>
<p>Roti bakar keju — Rp15.000</p>

Elemen p tanpa isi tidak menampilkan apa pun, sehingga jarak yang diharapkan tidak pernah muncul. Jarak antar elemen adalah urusan properti CSS margin — dibahas pada Course CSS.

Ringkasan #

• Satu p = satu gagasan; browser menyisipkan jarak antar paragraf secara bawaan.
• Whitespace collapsing: rentetan spasi, tab, dan baris baru diratakan menjadi satu spasi.
• br untuk pemisah baris yang bermakna, bukan pembatas paragraf.
• p kosong dan baris kosong ganda tidak menghasilkan jarak — jarak diatur lewat CSS.

Chapter berikutnya masuk ke dalam kalimat: dua elemen penekanan strong dan em, yang mengubah makna teks dengan dua cara berbeda.