Ne zaman yerine kullanmalıyım?

Satır sonu içeriğin kendisinin bir parçası olduğunda kullan, örneğin bir adreste ya da şiirde. Ayrı paragraflar için ayrı elementleri, boşluk için de etiketlerini üst üste yığmak yerine CSS margin kullan.

Çalıştırılabilir HTML Dokümanları: Alt satıra geçme

Q: HTML'de alt satıra nasıl geçilir?

Yeni satırın başlaması gereken yere ekle: Line one Line two. HTML dosyanda Enter'a basmak işe yaramaz, çünkü tarayıcılar kaynaktaki satır sonlarını sıradan boşluk olarak ele alır.

Q: , mi yoksa mı yazmalıyım?

Üçü de HTML'de çalışır ve aynı elementi üretir. düz HTML yazımıdır; eğik çizgili sürümler XHTML ve JSX ile uyumluluk için kabul edilir. Tek başına geçersizdir, ama tarayıcılar onu bir satır sonu daha olarak okur.

Q: eklemeden bir metindeki satır sonlarını nasıl korurum?

Elemente CSS'te white-space: pre-line ver. Tarayıcı bu durumda metindeki her satır sonunu yeni satır olarak gösterir, fazla boşlukları ise yine birleştirir. Kullanıcı yorumları ve JavaScript ile yüklenen metin için kullanışlıdır.

Q: HTML'de satırın bölünmesini nasıl engellerim?

Metni white-space: nowrap olan bir elementle sar ya da iki kelimeyi bölünmez boşluk ile birleştir, böylece hep aynı satırda kalırlar.

HTML'de Alt Satıra Geçme: br Etiketi ve Satır Sonları

Bir metin bloğunun içinde yeni bir satır başlatmak için kullan. etiketinin ne zaman doğru, ne zaman paragrafın daha iyi olduğunu, metindeki satır sonlarını nasıl koruyacağını, uzun kelimelerin ile nasıl bölüneceğini ve bir satırın bölünmesini nasıl engelleyeceğini öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

Alt satıra nasıl geçilir

Yeni satırın başlamasını istediğin yere   koy. Boş bir element olduğu için kapanış etiketi yoktur:

<!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>

Adres her   noktasında tam olarak alt satıra geçer. İkinci paragraf, kaynakta bir satır sonu olmasına rağmen tek satırda kalır: HTML satır sonlarını, tab'ları ve art arda gelen boşlukları tek bir boşluk olarak ele alır.   etiketi bu yüzden vardır.

 ,   ve   aynı elementi üretir. Projen hangisini kullanıyorsa onu kullan (JSX ve XHTML eğik çizgiyi şart koşar).

br ve p: satır sonu boşluk değildir

Bir   aynı paragrafın içinde bir satırı bitirir. Yeni bir  ise varsayılan margin değerlerinden gelen üst ve alt boşlukla yeni bir paragraf başlatır. Boşluk yaratmak için   etiketlerini üst üste yığmak çalışır, ama kırılgandır ve yanlış bir şey söyler:

<!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>

İki kutu da benzer görünür, ama ilki bir ekran okuyucu için tek bir paragraftır ve boşluğu değiştirmek her sayfayı düzenlemek demektir. İkincisinde boşluk tek satır CSS'tir.

  etiketinin iyi kullanımları: adresler, şiirler ve şarkı sözleri, bir imzadaki satırlar; yani satır sonunun metne ait olduğu yerler. Geri kalan her şey için paragraf, liste ya da başlık kullan.

Metnindeki satır sonlarını korumak

Metin başka bir yerden geldiğinde (bir yorum kutusu, bir veritabanı, bir script), içinde   etiketleri yerine gerçek satır sonu karakterleri olur. CSS'teki white-space: pre-line, tarayıcının bu satır sonlarını yeni satır olarak göstermesini sağlar:

<!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>

Aynı string gri kutuda tek satırda, mavi kutuda üç satırda görünür. Bu yöntem, kullanıcı metnine innerHTML ile   etiketleri eklemekten de daha güvenlidir; o yöntem kullanıcıların HTML enjekte etmesine izin verir. Boşlukları ve girintileri de korumak için white-space: pre kullan; bu, HTML'de boşluk sayfasında anlatılıyor.

Uzun kelimelerin bölünmesine izin vermek: wbr

Boşluk içermeyen uzun bir kelime ya da URL dar bir kutudan taşabilir. , tarayıcının gerekirse satırı bölebileceği bir yeri işaretler, gerekmezse hiçbir şey yapmaz:

<!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>

İlk yol kutusundan taşar; ikincisi  noktalarında bölünür. Kontrol etmediğin metinlerde ise CSS özelliği overflow-wrap: anywhere uzun kelimeleri herhangi bir yerden böler.

Bir satırın bölünmesini engellemek

Bazen tersini istersin: "10 km" ya da bir telefon numarası bir arada kalsın. İki araç var:

<!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>

 , tarayıcının satırı bölmeyeceği bir boşluktur, bu yüzden "10" ve "km" birlikte kalır. white-space: nowrap bütün bir span'i tek satırda tutar.   yerine normal bir boşluk koy ya da class'ı kaldır, bu genişlikte ikisi de iki satıra bölünür.

Sık yapılan hatalar

Kaynakta Enter'a basıp yeni satır beklemek. HTML'de satır sonları boşluktur.  , ayrı elementler ya da white-space: pre-line kullan.
Boşluk için   yığmak. Paragraf ve margin kullan.
Liste yapmak için   kullanmak. Ekran okuyucuların liste olarak duyurduğu <li> ile birlikte <ul> ya da <ol> kullan.
 yazmak. Geçerli değildir.   yaz.
Kullanıcı metnine innerHTML ile   eklemek. Onun yerine textContent ata ve white-space: pre-line kullan.

Sıkça Sorulan Sorular

HTML'de alt satıra nasıl geçilir?

Yeni satırın başlaması gereken yere   ekle: Line one Line two. HTML dosyanda Enter'a basmak işe yaramaz, çünkü tarayıcılar kaynaktaki satır sonlarını sıradan boşluk olarak ele alır.

, mi yoksa mı yazmalıyım?

Üçü de HTML'de çalışır ve aynı elementi üretir.   düz HTML yazımıdır; eğik çizgili sürümler XHTML ve JSX ile uyumluluk için kabul edilir. Tek başına  geçersizdir, ama tarayıcılar onu bir satır sonu daha olarak okur.

Ne zaman yerine kullanmalıyım?

Satır sonu içeriğin kendisinin bir parçası olduğunda   kullan, örneğin bir adreste ya da şiirde. Ayrı paragraflar için ayrı  elementleri, boşluk için de   etiketlerini üst üste yığmak yerine CSS margin kullan.

eklemeden bir metindeki satır sonlarını nasıl korurum?

Elemente CSS'te white-space: pre-line ver. Tarayıcı bu durumda metindeki her satır sonunu yeni satır olarak gösterir, fazla boşlukları ise yine birleştirir. Kullanıcı yorumları ve JavaScript ile yüklenen metin için kullanışlıdır.

HTML'de satırın bölünmesini nasıl engellerim?

Metni white-space: nowrap olan bir elementle sar ya da iki kelimeyi bölünmez boşluk   ile birleştir, böylece hep aynı satırda kalırlar.

İlgili kavramlar