Paragraf & Line Break

Paragraf & Line Break 📝

Setelah memahami cara memformat teks, kini saatnya belajar cara mengatur alur dan jarak antar teks di halaman web. Inilah peran dari paragraf dan line break.

Paragraf — <p>

Tag <p> digunakan untuk membungkus satu blok teks yang merupakan satu kesatuan pikiran atau ide. Browser secara otomatis menambahkan jarak (margin) di atas dan bawah setiap paragraf:

<p>HTML adalah bahasa markup yang digunakan untuk membuat halaman web.</p>
<p>CSS digunakan untuk mengatur tampilan dan gaya dari elemen HTML.</p>
<p>JavaScript digunakan untuk menambahkan interaktivitas pada halaman web.</p>

Hasilnya di browser:

HTML adalah bahasa markup yang digunakan untuk membuat halaman web.

CSS digunakan untuk mengatur tampilan dan gaya dari elemen HTML.

JavaScript digunakan untuk menambahkan interaktivitas pada halaman web.

Setiap <p> tampil sebagai blok baru dengan jarak antar paragraf secara otomatis.

Whitespace Diabaikan oleh HTML

Ini adalah hal yang sering mengejutkan pemula — HTML mengabaikan spasi berlebih dan enter di dalam kode:

<p>Teks ini     memiliki        banyak spasi.</p>

<p>Teks ini
ditulis
di banyak baris.</p>

Keduanya akan tampil di browser menjadi satu baris biasa:

Teks ini memiliki banyak spasi.
Teks ini ditulis di banyak baris.

Inilah mengapa kita butuh tag khusus untuk mengatur jeda baris dan spasi.

Line Break — <br>

Tag <br> digunakan untuk memaksa pindah baris di dalam sebuah paragraf, tanpa membuat blok baru dan tanpa jarak tambahan seperti <p>:

<p>
  Jl. Merdeka No. 10<br>
  Kelurahan Sukamaju<br>
  Kota Semarang, 50123<br>
  Jawa Tengah, Indonesia
</p>

Hasilnya:

Jl. Merdeka No. 10
Kelurahan Sukamaju
Kota Semarang, 50123
Jawa Tengah, Indonesia

<br> adalah self-closing tag — tidak memiliki tag penutup dan tidak butuh konten di dalamnya.

Perbedaan <p> vs <br>

Ini penting untuk dipahami dengan jelas:

<!-- Menggunakan <p> — ada jarak antar blok -->
<p>Baris pertama.</p>
<p>Baris kedua.</p>

<!-- Menggunakan <br> — pindah baris tanpa jarak -->
<p>
  Baris pertama.<br>
  Baris kedua.
</p>

Visualisasi perbedaannya:

Dengan <p>:              Dengan <br>:
                         
Baris pertama.           Baris pertama.
                         Baris kedua.
Baris kedua.             

Garis Horizontal — <hr>

Sering dipelajari bersama <br>, tag <hr> menampilkan garis horizontal sebagai pemisah visual antar bagian konten:

<h2>Bab 1 — Pengenalan HTML</h2>
<p>HTML adalah fondasi dari semua halaman web...</p>

<hr>

<h2>Bab 2 — Mengenal CSS</h2>
<p>CSS digunakan untuk mempercantik tampilan...</p>

Hasilnya:

Bab 1 — Pengenalan HTML
HTML adalah fondasi dari semua halaman web...

─────────────────────────────────────────

Bab 2 — Mengenal CSS
CSS digunakan untuk mempercantik tampilan...

<hr> juga self-closing tag seperti <br>.

Preformatted Text — <pre>

Jika memang butuh mempertahankan spasi dan enter persis seperti di kode, gunakan tag <pre>. Browser akan menampilkannya apa adanya termasuk semua spasi dan baris baru:

<pre>
  Nama   : Budi Santoso
  Email  : [email protected]
  Kota   : Semarang
</pre>

Hasilnya tampil persis sama seperti yang ditulis — spasi dan baris tetap terjaga. Biasanya digunakan untuk menampilkan kode program atau teks yang membutuhkan format tertentu.

Kapan Menggunakan yang Mana?

Membuat paragraf baru dengan jarak     →  <p>
Pindah baris tanpa jarak tambahan      →  <br>
Memisahkan section secara visual       →  <hr>
Mempertahankan spasi & enter di kode   →  <pre>

Kesalahan Umum Pemula

Menggunakan <br> berulang untuk membuat jarak:

<!-- SALAH — pakai br untuk spacing -->
<p>Paragraf pertama.</p>
<br>
<br>
<br>
<p>Paragraf kedua.</p>

<!-- BENAR — gunakan CSS untuk jarak -->
<p style="margin-bottom: 40px;">Paragraf pertama.</p>
<p>Paragraf kedua.</p>

Menulis paragraf tanpa tag <p>:

<!-- SALAH — teks mentah tanpa tag -->
Ini paragraf pertama.
Ini paragraf kedua.

<!-- BENAR — dibungkus dengan <p> -->
<p>Ini paragraf pertama.</p>
<p>Ini paragraf kedua.</p>

Mengatur Jarak Paragraf dengan CSS

Jarak default antar paragraf bisa diubah sesuai kebutuhan:

<style>
  p {
    margin-bottom: 20px;   /* jarak bawah paragraf */
    line-height: 1.8;      /* jarak antar baris dalam paragraf */
    text-align: justify;   /* teks rata kanan-kiri */
  }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat.</p>

Ringkasan

💡 Tips: Gunakan <br> sesedikit mungkin — hanya untuk kebutuhan seperti alamat, puisi, atau lirik lagu. Untuk mengatur jarak dan layout, selalu andalkan CSS agar kode lebih bersih dan mudah dikelola. 🎯