Coba ketik panjang di Microsoft Word — pencet Enter sekali, langsung pindah baris baru. Di HTML? Beda cerita: kamu bisa pencet Enter 100 kali di source code, browser cuek aja, semua jadi 1 paragraf rapet. Soalnya browser gak peduli whitespace di kode kamu — dia butuh dikasih tau eksplisit pake tag <p> mana yang satu paragraf, mana yang baru.
🤔 Kenapa gini? HTML lahir tahun 1991 buat saling bagi dokumen ilmiah antar peneliti. Mereka mau struktur logis (paragraf, judul, list) bukan layout visual. Jadi white-space di source = irrelevant, yang penting tag-nya bener.
Sintaks <p>
Bungkus tiap paragraf dengan tag <p>:
<p>Berisi paragraf yang ingin ditampilkan.</p>
Tiap paragraf baru = bungkus <p> baru. Browser otomatis kasih spasi atas-bawah biar enak dibaca.
🎭 Analogi sehari-hari
Paragraf = paragraf di koran/buku. Wartawan tidak ngetik 100 enter — dia tutup paragraf, mulai paragraf baru. Browser auto-spasi sesuai tag, bukan sesuai whitespace di source.
⚠️ Jebakan yang sering ditemui
<br>untuk pisah paragraf = anti-pattern.<br>cuma untuk line break dalam alamat/puisi. Pakai<p>baru.- Block element di dalam
<p>(<div>,<h1>) = invalid. Browser auto-tutup<p>di tengah, layout pecah. - Whitespace di HTML diabaikan — 100 spasi atau 100 enter = 1 spasi rendered. Pakai
<pre>kalau mau preserve. - Lupa tutup
<p>masih jalan tapi rapuh — bisa pecah saat HTML kompleks.
TL;DR: <p> = bungkus tiap paragraf eksplisit (browser auto-spasi atas-bawah). Whitespace di source code DIABAIKAN — 100 enter = 1 spasi. Browser butuh tag eksplisit, bukan whitespace. Jangan pakai <br> buat pisah paragraf (anti-pattern). Block element (<div>, <h1>) gak boleh di dalam <p>. Pakai <pre> kalau mau preserve whitespace.
