Paragraf (<p>) dan Line Break (<br>)

Paragraf (p)

• Fungsi:
  Tag <p> digunakan untuk membuat paragraf teks dalam dokumen HTML. Paragraf adalah blok teks yang terpisah dan biasanya digunakan untuk menyusun konten teks agar lebih terstruktur dan mudah dibaca.
• Cara Penggunaan:
  <p>Ini adalah contoh paragraf pertama.</p>
<p>Ini adalah paragraf kedua yang terpisah dari paragraf pertama.</p>
• Penting:
  • Browser secara otomatis menambahkan margin (jarak) di atas dan bawah elemen <p>, sehingga paragraf akan terlihat terpisah secara visual.
  • Hindari menggunakan tag <p> hanya untuk memberi jarak antar elemen. Untuk tata letak yang lebih kompleks, gunakan CSS.

Line Break (br)

• Fungsi:
  Tag <br> (line break) digunakan untuk memaksa teks berpindah ke baris baru tanpa membuat paragraf baru. Tag ini sering digunakan dalam puisi, alamat, atau situasi di mana struktur teks membutuhkan jeda baris tanpa spasi tambahan.
• Cara Penggunaan:
  <p> Baris pertama teks.<br>
Baris kedua setelah line break.<br>
Baris ketiga. </p>
• Karakteristik:
  • <br> adalah tag kosong (tidak memerlukan tag penutup seperti </br>).
  • Tidak seperti <p>, tag <br> tidak menambahkan margin atau spasi vertikal—hanya memindahkan teks ke baris berikutnya.

Perbedaan (p) dan (br)

Praktik Terbaik

1. Gunakan <p> untuk Paragraf Utama:
   Setiap paragraf teks yang utuh sebaiknya dibungkus dengan <p>.
2. Hindari Penggunaan <br> Berlebihan:
   Jangan gunakan <br><br> untuk membuat jarak antar elemen. Gunakan CSS (misal: margin atau padding).
3. Aksesibilitas:
   Tag <p> membantu alat bantu (screen reader) memahami struktur teks, sementara <br> hanya untuk format visual.

Contoh Penerapan

<p>
  HTML adalah bahasa markup untuk membangun halaman web.<br>
  Contoh penggunaan line break: belajar HTML di pagi hari,<br>
  lalu praktik langsung di siang hari.
</p>

<p>
  Paragraf kedua ini terpisah dari paragraf pertama karena penggunaan tag <p>.
</p>

Dengan memahami <p> dan <br>, Anda dapat mengatur teks dengan lebih rapi dan sesuai kebutuhan konten.

Sumber : DeepSeek