When should I use instead of ?

Use when the line break is part of the content itself, such as in an address or a poem. Use separate elements for separate paragraphs, and CSS margin for spacing, rather than stacking tags.

Runnable HTML Docs: Line Break

Q: How do I add a line break in HTML?

Insert where the new line should start: Line one Line two. Pressing Enter in your HTML file does not work, because browsers treat newlines in the source as ordinary spaces.

Q: Should I write , or ?

All three work in HTML and produce the same element. is the plain HTML form; the slash versions are accepted for compatibility with XHTML and JSX. on its own is invalid, although browsers read it as another line break.

Q: How do I keep line breaks from a text without adding tags?

Give the element white-space: pre-line in CSS. The browser then shows every newline in the text as a line break, while still collapsing extra spaces. This is handy for user comments and text loaded with JavaScript.

Q: How do I prevent a line break in HTML?

Wrap the text in an element with white-space: nowrap, or join two words with a non-breaking space so they always stay on the same line.

How to add a line break

Put   where you want the new line to start. It is a void element, so there is no closing tag:

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

The address breaks exactly at each  . The second paragraph stays on one line even though the source has a newline in it: HTML treats newlines, tabs and runs of spaces as a single space. That is why   exists.

 ,   and   all produce the same element. Use whichever your project uses (JSX and XHTML require the slash).

br vs p: breaks are not spacing

A   ends a line inside the same paragraph. A new  starts a new paragraph, with space above and below it from the default margins. Stacking   tags to make space works, but it is fragile and says the wrong thing:

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

Both boxes look similar, but the first one is a single paragraph to a screen reader, and changing the spacing means editing every page. In the second, the gap is one line of CSS.

Good uses of  : addresses, poems and song lyrics, and lines in a signature, where the break belongs to the text. For everything else, use paragraphs, lists or headings.

Keeping the newlines in your text

When text comes from somewhere else (a comment box, a database, a script), it has real newline characters instead of   tags. The CSS white-space: pre-line makes the browser display those newlines as line breaks:

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

The same string shows on one line in the gray box and on three lines in the blue one. This is also safer than building   tags into user text with innerHTML, which would let users inject HTML. To keep spaces and indentation as well, use white-space: pre, covered on the HTML space page.

Letting long words break: wbr

A long word or URL with no spaces can overflow a narrow box.  marks a spot where the browser may break the line if it needs to, and does nothing otherwise:

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

The first path runs out of its box; the second breaks at the  points. For text you do not control, the CSS property overflow-wrap: anywhere breaks long words anywhere instead.

Stopping a line from breaking

Sometimes you want the opposite: keep "10 km" or a phone number together. Two tools:

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

  is a space the browser will not break at, so "10" and "km" stay together. white-space: nowrap keeps a whole span on one line. Replace   with a normal space, or remove the class, and at this width both split across two lines.

Common mistakes

Pressing Enter in the source and expecting a new line. Newlines in HTML are spaces. Use  , separate elements, or white-space: pre-line.
Stacking   for spacing. Use paragraphs and margin.
Using   to build a list. Use <ul> or <ol> with <li>, which screen readers announce as a list.
Writing . It is not valid. Write  .
Adding   to user text with innerHTML. Set textContent and use white-space: pre-line instead.

Frequently Asked Questions

How do I add a line break in HTML?

Insert   where the new line should start: Line one Line two. Pressing Enter in your HTML file does not work, because browsers treat newlines in the source as ordinary spaces.

Should I write , or ?

All three work in HTML and produce the same element.   is the plain HTML form; the slash versions are accepted for compatibility with XHTML and JSX.  on its own is invalid, although browsers read it as another line break.

When should I use instead of ?

Use   when the line break is part of the content itself, such as in an address or a poem. Use separate  elements for separate paragraphs, and CSS margin for spacing, rather than stacking   tags.

How do I keep line breaks from a text without adding tags?

Give the element white-space: pre-line in CSS. The browser then shows every newline in the text as a line break, while still collapsing extra spaces. This is handy for user comments and text loaded with JavaScript.

How do I prevent a line break in HTML?

Wrap the text in an element with white-space: nowrap, or join two words with a non-breaking space   so they always stay on the same line.

Related concepts