HTML Paragraphs

Bab 1: Definisi Paragraf dalam HTML

Setelah kita membahas Judul (Headings), sekarang kita masuk ke elemen yang paling sering digunakan untuk menampilkan konten teks: Paragraf.

Dalam HTML, paragraf didefinisikan dengan tag <p>. Browser secara otomatis menganggap setiap elemen <p> sebagai blok baru dan menambahkan spasi (margin) di atas dan di bawahnya untuk memisahkan antar paragraf.

<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>

Bab 2: Fenomena "White Space Collapse"

Ini adalah hal yang paling sering membingungkan pemula. Dalam HTML, Spasi (Space) dan Enter (New Line) yang berlebihan akan DIABAIKAN oleh browser.

Jika Anda menekan spasi 10 kali atau enter 5 kali di dalam kode editor, browser hanya akan merendernya sebagai 1 spasi saja. Ini disebut mekanisme White Space Collapse.

<p>
  Paragraf ini
  berisi banyak      spasi
  dan baris baru
  tapi browser mengabaikannya.
</p>

Bab 3: Solusi Baris Baru (Line Breaks)

Lalu, bagaimana jika kita ingin memaksa teks turun ke baris baru tanpa membuat paragraf baru (tanpa jarak margin yang besar)? Solusinya adalah tag <br>.

Tag <br> adalah singkatan dari Break Rule. Ini adalah Empty Element, artinya tidak membutuhkan tag penutup.

<p>Jalan Mawar No. 12<br>
Jakarta Selatan<br>
Indonesia</p>

Bab 4: Garis Horizontal (Thematic Break)

Untuk memisahkan topik atau memberikan jeda visual antar bagian konten, kita menggunakan tag <hr> (Horizontal Rule). Tag ini akan membuat garis lurus mendatar sepanjang lebar elemen pembungkusnya.

<h2>Bab 1: Pendahuluan</h2>
<p>Isi pendahuluan...</p>
<hr>
<h2>Bab 2: Pembahasan</h2>
<p>Isi pembahasan...</p>

Bab 5: Menjaga Format Asli (Preformatted)

Terkadang, Anda ingin menampilkan teks persis seperti yang Anda ketik di editor, termasuk spasi dan enter-nya (contohnya saat menulis puisi atau kode program). Untuk kasus ini, jangan gunakan <p>, tapi gunakan tag <pre>.

Teks di dalam <pre> biasanya akan ditampilkan dengan font monospaced (seperti mesin ketik) dan mempertahankan semua spasi.

<pre>
   Puisi Lama:
   
   Bunga mawar,
       Bunga melati.
   Harum wangi,
       Sepanjang hari.
</pre>

Bab 6: Kapan Menggunakan P vs BR?

Banyak pemula salah kaprah menggunakan <br> untuk membuat jarak antar paragraf. Ini adalah praktik buruk.

⚡ Proyek Kilat: Format Lirik Lagu

Misi Anda adalah menampilkan bait lirik lagu dengan format yang benar. Gunakan kombinasi tag yang tepat agar tampilannya rapi.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini: