Line Break dan Horizontal Rule

Teks dalam paragraf mengalir dan membungkus sendiri mengikuti lebar layar, tetapi dua kebutuhan khusus muncul berulang kali: memindah baris di tengah paragraf dan menandai pergantian tema di tengah tulisan. HTML menyediakan dua elemen void untuk dua kebutuhan itu, yaitu br dan hr. Keduanya kecil, tanpa konten, dan sering disalahgunakan sebagai alat tata letak. Pada Chapter ini kita mempelajari pemakaian yang tepat untuk keduanya beserta contoh alamat dan puisi.

br: Pindah Baris di dalam Paragraf #

Elemen br (line break) menghasilkan pindah baris pada teks; paragrafnya tetap satu, hanya posisi kursor yang turun. Elemen ini termasuk void element tanpa tag penutup, sebagaimana dibahas pada Chapter Void Elements. Tempat terbaik untuk br adalah teks yang pembagian barisnya bermakna, misalnya baris puisi atau baris alamat:

<p>
  Panitia Lomba Puisi<br>
  Jl. Melati No. 10<br>
  Bandung 40123
</p>

Output yang Dihasilkan:

Browser menampilkan tiga baris dalam satu paragraf:
  Panitia Lomba Puisi
  Jl. Melati No. 10
  Bandung 40123

Tanpa br, ketiga baris di atas akan menyatu menjadi satu baris panjang. Setiap br menurunkan teks berikutnya satu baris, sehingga struktur alamat tetap terjaga pada lebar layar apa pun.

br Bukan Pengganti Paragraf #

Kesalahan pemakaian br yang paling sering adalah memakainya untuk memisahkan paragraf. Tugas memisahkan paragraf milik elemen p, dan tugas itu bukan sekadar soal tampilan:

<p>
Kalimat pembuka tulisan Budi.<br>
<br>
Kalimat yang seharusnya menjadi paragraf baru.
</p>

Pemisahan seperti di atas tampak mirip hasilnya di layar, tetapi strukturnya salah: kedua kalimat tetap satu paragraf. Pembaca layar (screen reader) mengumumkan pergantian paragraf sehingga pengunjung memahami bahwa topik berganti, sedangkan deretan br tidak membawa informasi apa pun. Jarak antarparagraf juga menghilang karena br tidak punya margin.

hr: Perubahan Tema dalam Prosa #

Elemen hr (horizontal rule) menandai thematic break: peralihan topik pada tingkat paragraf, misalnya pergantian adegan dalam cerita atau pindah pembahasan dalam satu bagian. Browser merendernya sebagai garis horizontal dengan jarak vertikal, tetapi garis itu bukan dekorasi; maknanya ada pada pergantian tema yang diumumkannya kepada pembaca layar. Bila kita hanya butuh garis untuk mempercantik halaman, alat yang tepat adalah properti border pada CSS, bukan hr.

Elemen hr juga void element: tanpa konten, tanpa tag penutup. Perbandingan keduanya dapat kita rangkum sebagai berikut:

Contoh File Lengkap #

File berikut memakai br dan hr sesuai perannya masing-masing. Simpan sebagai contoh-br-hr.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Pendaftaran Lomba Puisi</title>
</head>
<body>
  <h1>Kartu Pendaftaran Lomba Puisi</h1>

  <h2>Alamat Pengiriman</h2>
  <p>
    Panitia Lomba Puisi<br>
    Jl. Melati No. 10<br>
    Bandung 40123
  </p>

  <h2>Puisi Karya Budi</h2>
  <p>
    Kursor berkedip di layar kamar,<br>
    baris demi baris kutunggu sabar.
  </p>

  <hr>

  <h2>Ketentuan Lomba</h2>
  <p>Pendaftaran ditutup pada akhir bulan ini.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Alamat dalam tiga baris terpisah
  - Puisi dalam dua baris terpisah
  - Satu garis horizontal antara bagian puisi dan bagian ketentuan

Mari kita telaah pemakaian keduanya:

1. Baris 12-16 (p alamat): dua br memecah alamat menjadi tiga baris; paragrafnya tetap satu kesatuan.
2. Baris 19-22 (p puisi): satu br memindahkan baris kedua puisi; pembagian baris puisi adalah bagian dari maknanya.
3. Baris 24 (hr): peralihan dari bagian lomba ke bagian ketentuan; garis muncul sebagai konsekuensi makna, bukan hiasan.
4. Baris 26-27 (h2 dan p): bagian baru setelah peralihan; hr bekerja berpasangan dengan struktur heading.

br dan hr kini tampil pada peran yang benar: satu mengatur baris, satu menandai peralihan. Langkah berikutnya adalah memperkaya teks di dalam paragraf dengan penekanan makna, dan itu menjadi topik Chapter berikutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen br
• MDN Web Docs — Elemen hr
• WHATWG — HTML Living Standard: Grouping content

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Pendaftaran Lomba Puisi</title>
</head>
<body>
  <h1>Kartu Pendaftaran Lomba Puisi</h1>

  <h2>Alamat Pengiriman</h2>
  <p>
    Panitia Lomba Puisi<br>
    Jl. Melati No. 10<br>
    Bandung 40123
  </p>

  <h2>Puisi Karya Budi</h2>
  <p>
    Kursor berkedip di layar kamar,<br>
    baris demi baris kutunggu sabar.
  </p>

  <hr>

  <h2>Ketentuan Lomba</h2>
  <p>Pendaftaran ditutup pada akhir bulan ini.</p>
</body>
</html>