HTML br: Line Breaks and the Differences from p, wbr, and pre

HTML <br> inserts a line break at a specified point within text. Use it when the line division itself matters, as in poetry or a postal address. Separate distinct paragraphs with p, and control spacing with CSS.

br syntax and line breaks in source code

br is a void element with no content or end tag. Write <br> in HTML, without </br>. HTML also accepts <br />, but the slash is not what makes the line break happen.

With ordinary default styles, line breaks and consecutive spaces in the source are collapsed. A br specifies a break within the content independently of source formatting. This is also different from text wrapping naturally as the screen becomes narrower.

Complete example: compare source line breaks, br, and paragraphs

Save the following document as line-breaks.html and open it in a browser. It presents the same short text with different structures so you can compare the results.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing line breaks and paragraphs</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>Comparing line breaks</h1>
  <h2>Line break only in source code</h2>
  <p id="source-only">First line
    Second line</p>
  <h2>Line break with br</h2>
  <p id="with-br">First line<br>Second line</p>
  <h2>Separate paragraphs</h2>
  <p class="message">A paragraph about the first topic.</p>
  <p class="message">A paragraph about the second topic.</p>
</body>
</html>

The first section runs together as First line Second line; the second breaks after br. The last two sentences are separate paragraphs with a CSS gap of 1rem. A very narrow window can also make the first section wrap, but that is not a break specified by br.

Choose between br, p, wbr, and pre

Inserting br after every sentence to force a visually pleasing length can produce awkward wrapping on small screens or with large text. Let ordinary prose wrap naturally. If you need to preserve authored spaces and line divisions, see the HTML pre guide to whitespace and line breaks.

Use CSS for blank space and paragraph spacing

Repeated br elements used to create empty space can merge semantically distinct paragraphs into one and make screen-reader paragraph navigation harder. Use p for a new paragraph and margin for spacing. Control line height within a paragraph with line-height.

Do not use the obsolete clear attribute or margins on br itself as layout tools. Manage meaningful line divisions separately from visual layout so text stays readable across screen widths and font sizes. The MDN br reference explains syntax and accessibility.