HTML br: Pindah Baris dan Perbedaan dengan p, wbr, dan pre

HTML <br> menyisipkan pemutusan baris pada titik tertentu dalam teks. Gunakan ketika pembagian baris itu sendiri penting, seperti dalam puisi atau alamat pos. Pisahkan paragraf yang berbeda dengan p, dan kontrol jarak dengan CSS.

Sintaks br dan pemutusan baris dalam kode sumber

br adalah elemen void tanpa konten atau tag akhir. Tulis <br> dalam HTML, tanpa </br>. HTML juga menerima <br />, tetapi garis miring bukanlah yang membuat pemecahan baris terjadi.

Dengan gaya default biasa, pemecahan baris dan spasi berturut-turut dalam sumber akan digabungkan. br menentukan pemecahan dalam konten secara independen dari format sumber. Ini juga berbeda dari pembungkus teks yang terjadi secara alami ketika layar menjadi lebih sempit.

Contoh lengkap: bandingkan pemecahan baris sumber, br, dan paragraf

Simpan dokumen berikut sebagai line-breaks.html dan buka di browser. Ini menampilkan teks pendek yang sama dengan struktur berbeda sehingga Anda dapat membandingkan hasilnya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Perbandingan baris baru dan paragraf</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>Perbandingan baris baru</h1>
  <h2>Baris baru hanya dalam kode sumber</h2>
  <p id="source-only">Baris pertama
    Baris kedua</p>
  <h2>Baris baru dengan br</h2>
  <p id="with-br">Baris pertama<br>Baris kedua</p>
  <h2>Paragraf terpisah</h2>
  <p class="message">Paragraf tentang topik pertama.</p>
  <p class="message">Paragraf tentang topik kedua.</p>
</body>
</html>

Bagian pertama ditampilkan berurutan sebagai Baris pertama Baris kedua; bagian kedua terputus setelah br. Dua kalimat terakhir adalah paragraf terpisah dengan jarak CSS sebesar 1rem. Jendela yang sangat sempit juga dapat membuat bagian pertama membungkus, tetapi itu bukan pemisahan yang ditentukan oleh br.

Pilih antara br, p, wbr, dan pre

Menyisipkan br setelah setiap kalimat untuk memaksa panjang yang terlihat menyenangkan dapat menghasilkan pembungkusan yang canggung pada layar kecil atau dengan teks besar. Biarkan prosa biasa membungkus secara alami. Jika Anda perlu mempertahankan spasi dan pembagian baris yang dibuat, lihat panduan panduan HTML pre tentang spasi dan baris baru.

Gunakan CSS untuk spasi kosong dan jarak paragraf

Elemen br yang digunakan berulang kali untuk membuat ruang kosong dapat menggabungkan paragraf yang berbeda secara semantik menjadi satu dan membuat navigasi paragraf dengan pembaca layar menjadi lebih sulit. Gunakan p untuk paragraf baru dan margin untuk spasi. Kontrol tinggi baris dalam paragraf dengan line-height.

Jangan gunakan atribut clear yang usang atau margin pada br itu sendiri sebagai alat tata letak. Kelola pemisahan baris yang bermakna secara terpisah dari tata letak visual sehingga teks tetap terbaca di berbagai lebar layar dan ukuran font. Referensi referensi br di MDN menjelaskan sintaks dan aksesibilitas.