Saat menulis di editor teks biasa, Anda cukup menekan tombol Enter untuk membuat baris baru. Namun, hal ini tidak berlaku di HTML. Browser akan mengabaikan spasi atau baris kosong yang Anda tambahkan di dalam kode. Untuk memaksa teks pindah ke baris baru, kita membutuhkan sebuah “perintah” khusus, yaitu tag <br>.

Tag <br> adalah salah satu tag HTML yang paling sederhana dan paling sering digunakan. Ia berfungsi sebagai pemecah baris (line break), yang secara harfiah akan mengakhiri baris teks saat ini dan memulai baris teks baru.

Bagaimana Cara Menggunakan Tag <br>?

Tag <br> adalah tag mandiri (self-closing tag). Artinya, ia tidak memiliki tag penutup seperti tag <p> atau <h1>. Anda cukup menuliskannya di tempat Anda ingin baris baru muncul.

Contoh Penggunaan:

<p>
  Alamat saya:<br>
  Jalan Merdeka No. 10<br>
  Kota Jakarta<br>
  Indonesia
</p>

Dalam contoh di atas, setiap kali browser bertemu dengan <br>, ia akan memindahkan teks berikutnya ke baris baru, menghasilkan tampilan yang rapi seperti sebuah alamat.

Penting! Kapan Seharusnya Menggunakan <br>?

Meskipun tag <br> sangat berguna, Anda harus menggunakannya dengan bijak. Sebagai aturan umum, jangan gunakan <br> untuk membuat spasi atau jarak antar paragraf.

Gunakan <br> saat:

• Anda menulis lirik lagu.
• Anda menampilkan puisi.
• Anda menulis alamat.
• Anda menampilkan kutipan atau blok teks yang memiliki format baris yang spesifik.

Jangan gunakan <br> saat:

• Anda ingin membuat jarak antar paragraf. Untuk tujuan ini, gunakan tag <p>.
• Anda ingin membuat daftar. Gunakan tag <ul> atau <ol> dengan tag <li>.
• Anda ingin mengatur tata letak. Gunakan CSS (properti seperti margin atau padding) untuk tujuan ini.

Menggunakan tag yang benar sesuai fungsinya akan membantu menjaga kode HTML Anda tetap semantik dan mudah dibaca oleh mesin pencari maupun pengembang lain.

Perbedaan <br> dengan Tag <p>

Banyak pemula yang bingung dengan perbedaan antara <br> dan <p>. Berikut adalah perbedaannya:

• <br> (Line Break): Memecah baris teks, tetapi teks berikutnya masih dianggap sebagai bagian dari elemen yang sama (misalnya, paragraf yang sama).
• <p> (Paragraf): Membuat blok paragraf baru. Secara default, browser akan menambahkan spasi di atas dan di bawah tag <p>, sehingga membuat jarak yang lebih besar.

Contoh:

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

<p>
  Ini adalah paragraf dengan baris baru.<br>
  Ini adalah baris baru di paragraf yang sama.
</p>

Tampilan di atas akan menghasilkan dua paragraf yang terpisah dengan spasi, dan satu paragraf yang memiliki dua baris teks tanpa spasi ekstra di antaranya.

Dengan memahami kapan dan bagaimana menggunakan tag <br> dengan benar, Anda dapat membuat konten HTML yang lebih terstruktur dan sesuai dengan standar web.