מתי להשתמש ב- במקום ב- ?

השתמשו ב- כשירידת השורה היא חלק מהתוכן עצמו, כמו בכתובת או בשיר. לפסקאות נפרדות השתמשו באלמנטי נפרדים, ולריווח ב-margin של CSS, במקום לערום תגיות .

תיעוד HTML עם דוגמאות להרצה: ירידת שורה

Q: איך יורדים שורה ב-HTML?

הכניסו במקום שבו השורה החדשה צריכה להתחיל: Line one Line two. לחיצה על Enter בקובץ ה-HTML לא עובדת, כי דפדפנים מתייחסים לירידות שורה בקוד המקור כרווחים רגילים.

Q: לכתוב , או ?

שלושתם עובדים ב-HTML ויוצרים את אותו אלמנט. הוא הצורה הפשוטה של HTML; הגרסאות עם הלוכסן מתקבלות לתאימות עם XHTML ו-JSX. לבדו אינו תקין, אף שדפדפנים קוראים אותו כעוד ירידת שורה.

Q: איך שומרים את ירידות השורה של טקסט בלי להוסיף תגיות ?

תנו לאלמנט white-space: pre-line ב-CSS. הדפדפן יציג אז כל ירידת שורה בטקסט כשבירת שורה, ועדיין יכווץ רווחים מיותרים. זה שימושי לתגובות של משתמשים ולטקסט שנטען עם JavaScript.

Q: איך מונעים שבירת שורה ב-HTML?

עטפו את הטקסט באלמנט עם white-space: nowrap, או חברו שתי מילים ברווח בלתי שביר כדי שיישארו תמיד באותה שורה.

ירידת שורה ב-HTML: התגית br, שורות חדשות ונקודות שבירה

השתמשו ב- כדי להתחיל שורה חדשה בתוך קטע טקסט. למדו מתי מתאים ומתי עדיף פסקה, איך לשמור את השורות החדשות מהטקסט, איך לאפשר למילים ארוכות להישבר עם , ואיך למנוע שבירת שורה.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך יורדים שורה

שימו   במקום שבו השורה החדשה צריכה להתחיל. זה אלמנט ריק, ולכן אין לו תגית סגירה:

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

הכתובת נשברת בדיוק בכל  . הפסקה השנייה נשארת בשורה אחת למרות שבקוד המקור יש בה ירידת שורה: HTML מתייחס לירידות שורה, לטאבים ולרצפים של רווחים כרווח אחד. בגלל זה   קיים.

 ,   ו-  יוצרים כולם את אותו אלמנט. השתמשו במה שהפרויקט שלכם משתמש (JSX ו-XHTML דורשים את הלוכסן).

br מול p: שבירות אינן ריווח

  מסיים שורה בתוך אותה פסקה.  חדש פותח פסקה חדשה, עם רווח מעליה ומתחתיה מה-margin שמוגדר כברירת מחדל. ערימת תגיות   כדי ליצור רווח עובדת, אבל היא שבירה ואומרת את הדבר הלא נכון:

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

שתי התיבות נראות דומות, אבל הראשונה היא פסקה אחת בעיני קורא מסך, ושינוי הריווח מחייב לערוך כל עמוד. בשנייה, הרווח הוא שורה אחת של CSS.

שימושים טובים ב- : כתובות, שירים ומילות שירים, ושורות בחתימה, כשהשבירה שייכת לטקסט. לכל השאר, השתמשו בפסקאות, ברשימות או בכותרות.

שמירת ירידות השורה שבטקסט

כשהטקסט מגיע ממקום אחר (תיבת תגובה, מסד נתונים, סקריפט), יש בו תווי ירידת שורה אמיתיים במקום תגיות  . המאפיין white-space: pre-line ב-CSS גורם לדפדפן להציג את ירידות השורה האלה כשבירות שורה:

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

אותה מחרוזת מוצגת בשורה אחת בתיבה האפורה ובשלוש שורות בכחולה. זה גם בטוח יותר מבניית תגיות   בתוך טקסט של משתמשים עם innerHTML, שהיה מאפשר למשתמשים להזריק HTML. כדי לשמור גם רווחים והזחה, השתמשו ב-white-space: pre, שמוסבר בעמוד HTML space.

לאפשר למילים ארוכות להישבר: wbr

מילה ארוכה או URL בלי רווחים יכולים לגלוש מתיבה צרה.  מסמן נקודה שבה הדפדפן רשאי לשבור את השורה אם צריך, ולא עושה כלום אחרת:

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

הנתיב הראשון יוצא מהתיבה שלו; השני נשבר בנקודות ה-. לטקסט שאינו בשליטתכם, המאפיין overflow-wrap: anywhere ב-CSS שובר מילים ארוכות בכל מקום.

למנוע משורה להישבר

לפעמים רוצים את ההפך: להשאיר את "10 km" או מספר טלפון יחד. שני כלים:

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

  הוא רווח שהדפדפן לא ישבור בו, כך ש-"10" ו-"km" נשארים יחד. white-space: nowrap שומר span שלם בשורה אחת. החליפו את   ברווח רגיל, או הסירו את ה-class, וברוחב הזה שניהם מתפצלים לשתי שורות.

טעויות נפוצות

ללחוץ Enter בקוד המקור ולצפות לשורה חדשה. ירידות שורה ב-HTML הן רווחים. השתמשו ב- , באלמנטים נפרדים או ב-white-space: pre-line.
לערום   בשביל ריווח. השתמשו בפסקאות וב-margin.
להשתמש ב-  כדי לבנות רשימה. השתמשו ב-<ul> או ב-<ol> עם <li>, שקוראי מסך מכריזים עליהם כרשימה.
לכתוב . זה לא תקין. כתבו  .
להוסיף   לטקסט של משתמשים עם innerHTML. הגדירו textContent והשתמשו ב-white-space: pre-line במקום.

שאלות נפוצות

איך יורדים שורה ב-HTML?

הכניסו   במקום שבו השורה החדשה צריכה להתחיל: Line one Line two. לחיצה על Enter בקובץ ה-HTML לא עובדת, כי דפדפנים מתייחסים לירידות שורה בקוד המקור כרווחים רגילים.

לכתוב , או ?

שלושתם עובדים ב-HTML ויוצרים את אותו אלמנט.   הוא הצורה הפשוטה של HTML; הגרסאות עם הלוכסן מתקבלות לתאימות עם XHTML ו-JSX.  לבדו אינו תקין, אף שדפדפנים קוראים אותו כעוד ירידת שורה.

מתי להשתמש ב- במקום ב-?

השתמשו ב-  כשירידת השורה היא חלק מהתוכן עצמו, כמו בכתובת או בשיר. לפסקאות נפרדות השתמשו באלמנטי  נפרדים, ולריווח ב-margin של CSS, במקום לערום תגיות  .

איך שומרים את ירידות השורה של טקסט בלי להוסיף תגיות ?

תנו לאלמנט white-space: pre-line ב-CSS. הדפדפן יציג אז כל ירידת שורה בטקסט כשבירת שורה, ועדיין יכווץ רווחים מיותרים. זה שימושי לתגובות של משתמשים ולטקסט שנטען עם JavaScript.

איך מונעים שבירת שורה ב-HTML?

עטפו את הטקסט באלמנט עם white-space: nowrap, או חברו שתי מילים ברווח בלתי שביר   כדי שיישארו תמיד באותה שורה.

מושגים קשורים