Kapan sebaiknya memakai daripada ?

Pakai saat pindah baris adalah bagian dari kontennya sendiri, seperti di alamat atau puisi. Pakai elemen terpisah untuk paragraf yang terpisah, dan margin CSS untuk jarak, bukan menumpuk tag .

Dokumentasi HTML interaktif: Baris Baru

Q: Bagaimana cara membuat baris baru di HTML?

Sisipkan di tempat baris baru harus dimulai: Line one Line two. Menekan Enter di file HTML-mu tidak berhasil, karena browser memperlakukan newline di kode sumber sebagai spasi biasa.

Q: Bagaimana cara mempertahankan baris baru dari sebuah teks tanpa menambahkan tag ?

Beri elemennya white-space: pre-line di CSS. Browser lalu menampilkan setiap newline di teks sebagai baris baru, sambil tetap meringkas spasi berlebih. Ini praktis untuk komentar pengguna dan teks yang dimuat dengan JavaScript.

Q: Bagaimana cara mencegah pindah baris di HTML?

Bungkus teksnya dengan elemen yang punya white-space: nowrap, atau gabungkan dua kata dengan spasi tak terputus supaya keduanya selalu berada di baris yang sama.

Baris Baru di HTML: Tag br, Newline dan Titik Pemenggalan

Pakai untuk memulai baris baru di dalam blok teks. Pelajari kapan tepat dipakai dan kapan paragraf lebih baik, cara mempertahankan newline dari teksmu, cara membuat kata panjang bisa dipenggal dengan , dan cara mencegah baris terpenggal.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara membuat baris baru

Taruh   di tempat kamu ingin baris baru dimulai. Tag ini adalah elemen void, jadi tidak ada tag penutupnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

Alamatnya pindah baris tepat di setiap  . Paragraf kedua tetap di satu baris walaupun kode sumbernya punya newline: HTML memperlakukan newline, tab, dan deretan spasi sebagai satu spasi. Itulah alasan   ada.

 ,   dan   semuanya menghasilkan elemen yang sama. Pakai yang dipakai proyekmu (JSX dan XHTML mewajibkan garis miring).

br vs p: pindah baris bukan jarak

  mengakhiri baris di dalam paragraf yang sama.  baru memulai paragraf baru, dengan jarak di atas dan di bawahnya dari margin default. Menumpuk tag   untuk membuat jarak memang berhasil, tapi rapuh dan menyampaikan makna yang salah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Kedua kotak terlihat mirip, tapi kotak pertama adalah satu paragraf bagi screen reader, dan mengubah jaraknya berarti mengedit setiap halaman. Di kotak kedua, jaraknya cukup satu baris CSS.

Penggunaan   yang tepat: alamat, puisi dan lirik lagu, serta baris-baris di tanda tangan, di mana pindah barisnya adalah bagian dari teks. Untuk yang lainnya, pakai paragraf, list, atau heading.

Mempertahankan newline di teksmu

Saat teks berasal dari tempat lain (kotak komentar, database, script), teks itu berisi karakter newline sungguhan, bukan tag  . CSS white-space: pre-line membuat browser menampilkan newline itu sebagai baris baru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

String yang sama tampil dalam satu baris di kotak abu-abu dan dalam tiga baris di kotak biru. Cara ini juga lebih aman daripada menyusun tag   ke dalam teks pengguna dengan innerHTML, yang bisa membuat pengguna menyisipkan HTML. Untuk mempertahankan spasi dan indentasi juga, pakai white-space: pre, yang dibahas di halaman spasi di HTML.

Membuat kata panjang bisa dipenggal: wbr

Kata atau URL panjang tanpa spasi bisa meluber keluar dari kotak yang sempit.  menandai titik di mana browser boleh memindahkan baris kalau perlu, dan tidak melakukan apa-apa kalau tidak perlu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Path pertama keluar dari kotaknya; path kedua pindah baris di titik-titik . Untuk teks yang tidak kamu kendalikan, property CSS overflow-wrap: anywhere memenggal kata panjang di mana saja.

Mencegah baris terpenggal

Kadang kamu ingin kebalikannya: menjaga "10 km" atau nomor telepon tetap bersama. Ada dua alat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  adalah spasi yang tidak akan dipakai browser untuk memindahkan baris, jadi "10" dan "km" tetap bersama. white-space: nowrap menjaga seluruh span tetap di satu baris. Ganti   dengan spasi biasa, atau hapus class-nya, dan di lebar ini keduanya terpecah ke dua baris.

Kesalahan umum

Menekan Enter di kode sumber dan berharap muncul baris baru. Newline di HTML adalah spasi. Pakai  , elemen terpisah, atau white-space: pre-line.
Menumpuk   untuk jarak. Pakai paragraf dan margin.
Memakai   untuk membuat list. Pakai <ul> atau <ol> dengan <li>, yang diumumkan screen reader sebagai list.
Menulis . Itu tidak valid. Tulis  .
Menambahkan   ke teks pengguna dengan innerHTML. Atur textContent dan pakai white-space: pre-line.

Pertanyaan yang sering diajukan

Bagaimana cara membuat baris baru di HTML?

Sisipkan   di tempat baris baru harus dimulai: Line one Line two. Menekan Enter di file HTML-mu tidak berhasil, karena browser memperlakukan newline di kode sumber sebagai spasi biasa.

Sebaiknya menulis , atau ?

Ketiganya berfungsi di HTML dan menghasilkan elemen yang sama.   adalah bentuk HTML biasa; versi dengan garis miring diterima demi kompatibilitas dengan XHTML dan JSX.  sendirian tidak valid, walaupun browser membacanya sebagai baris baru lagi.

Kapan sebaiknya memakai daripada ?

Pakai   saat pindah baris adalah bagian dari kontennya sendiri, seperti di alamat atau puisi. Pakai elemen  terpisah untuk paragraf yang terpisah, dan margin CSS untuk jarak, bukan menumpuk tag  .

Bagaimana cara mempertahankan baris baru dari sebuah teks tanpa menambahkan tag ?

Beri elemennya white-space: pre-line di CSS. Browser lalu menampilkan setiap newline di teks sebagai baris baru, sambil tetap meringkas spasi berlebih. Ini praktis untuk komentar pengguna dan teks yang dimuat dengan JavaScript.

Bagaimana cara mencegah pindah baris di HTML?

Bungkus teksnya dengan elemen yang punya white-space: nowrap, atau gabungkan dua kata dengan spasi tak terputus   supaya keduanya selalu berada di baris yang sama.

Konsep terkait