Br dan Hr

Dua elemen pada chapter ini sama-sama void element: ditulis sendirian tanpa pasangan penutup (dibahas pada chapter Void Element). Keduanya juga sama-sama sering disalahgunakan sebagai alat tata letak. Padahal keduanya punya makna yang jauh lebih sempit dari kesan pertamanya.

br menandai ganti baris yang memang bagian dari isi teks, sedangkan hr menandai perubahan topik antar kelompok paragraf. Keduanya bukan alat pembuat jarak — jarak adalah urusan CSS. Kita bedah satu per satu.

br — Ganti Baris yang Bermakna #

Aturannya tegas: br dipakai ketika pemenggalan baris merupakan bagian dari makna isi. Tiga contoh klasiknya: alamat yang ditulis baris demi baris, baris puisi, dan baris kode yang dikutip di dalam kalimat. Di luar itu, br hampir selalu salah tempat.

Mekanismenya sederhana: browser mengakhiri baris saat menemui br, lalu melanjutkan teks di baris berikutnya — masih di dalam elemen yang sama, tanpa jarak paragraf apa pun. Contoh berikut menulis alamat Budi dalam satu paragraf yang dipenggal secara bermakna:

<p>Budi Santoso<br>
Jl. Melati No. 12<br>
Yogyakarta 55165</p>

Hasil Render:

Mari kita telaah kode di atas:

1. Baris 1 (<p> dan <br>): paragraf dibuka; br setelah nama menandai bahwa baris alamat berikutnya masih satu kesatuan alamat.
2. Baris 2 (Jl. Melati No. 12<br>): baris kedua alamat; br kembali memenggal tanpa membuat paragraf baru.
3. Baris 3 (Yogyakarta 55165</p>): baris terakhir alamat; paragraf ditutup setelahnya.

Baris puisi memakai pola yang sama: setiap baris puisi diakhiri br, dan satu bait dibungkus satu paragraf.

hr — Pemisah Tematik #

Elemen hr menandai pemisah tematik (thematic break) di antara kelompok paragraf: perpindahan topik, pergantian adegan dalam cerita, atau peralihan tema dalam satu tulisan. Posisinya setara paragraf — ia berdiri di antara blok teks, bukan di dalam kalimat.

Yang perlu dipisahkan tegas: hr bukan garis dekoratif. Garis horizontal hanya tampilan default browser; lewat CSS, hr bisa dibuat tampil sebagai titik-titik, ruang kosong, atau simbol lain — sementara maknanya tetap “topik berubah di sini”. Contoh pemakaian yang benar pada artikel tanpa heading:

<article>
  <p>Kedai Siti dimulai tahun 2019 dari satu gerobak di depan rumah. Menu awalnya hanya kopi tubruk dan teh melati.</p>
  <p>Gerobak itu lalu pindah ke ruko kecil karena antrean sering memanjang sampai jalan.</p>
  <hr>
  <p>Babak baru dimulai saat Dewi bergabung sebagai barista dan menu kopi susu gula aren diperkenalkan.</p>
</article>

Mari kita telaah kode di atas:

1. Baris 2-3 (dua paragraf pertama): kelompok paragraf bertema awal mula kedai.
2. Baris 4 (<hr>): pemisah tematik — cerita berpindah dari masa gerobak ke masa ruko dan menu baru.
3. Baris 5 (paragraf setelah hr): kelompok paragraf dengan tema yang berbeda dari kelompok sebelumnya.

Kapan Tepat, Kapan Salah #

Kesalahan paling umum memakai br bertumpuk demi mendapatkan jarak:

<p>Paragraf pertama.<br>
<br>
<br>
Paragraf kedua.</p>

Bentuk yang benar untuk kasus di atas:

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>

Ringkasan #

• br menandai ganti baris yang menjadi bagian makna isi: alamat, puisi, baris kode.
• hr menandai pemisah tematik di antara kelompok paragraf, bukan garis hias.
• Tampilan garis pada hr dan jarak paragraf adalah urusan CSS.
• br bertumpuk untuk menciptakan jarak adalah kesalahan; gunakan elemen p terpisah.

Chapter berikutnya membahas dua elemen kecil untuk teks yang naik dan turun dari garis dasar: sup dan sub.