The three ways to break a line in HTML

HTML gives you three main tools to move text to a new line: the <br> tag for a single line break, the <p> tag for a paragraph with space around it, and <pre> formatting to preserve line breaks you type. Which one you use depends on whether you want a small break, a larger paragraph separation, or to keep exact spacing from your source code.

The <br> tag is the simplest. It creates a single line break without adding extra space before or after. The <p> tag wraps text in a paragraph, which adds space above and below automatically. The <pre> tag tells the browser to display text exactly as you typed it, including all your line breaks and spaces.

Key Takeaways

  • Use <br> when you need a single line break without extra spacing, like breaking a poem or address into lines.
  • Use <p> when you want to separate blocks of text with visible space, which is the standard for paragraphs.
  • Use <pre> when you need to preserve exact spacing and line breaks from your source code, such as for code samples or ASCII art.
  • The <br> tag does not need a closing tag — write it as <br> or <br />, both work the same way.

Using the <br> tag for a single line break

The <br> tag creates one line break without adding space before or after. Place it where you want the line to end, and the next text starts on the line below. This is useful for addresses, poetry, song lyrics, or any text where you need lines to break but do not want paragraph spacing.

Here is an example:

<p>123 Main Street<br> Springfield, IL 62701<br> United States</p>

The browser displays this as three lines of an address with no extra space between them. You can use <br> as many times as you need in a row to create multiple line breaks, though this is rarely the right choice — if you need space, a paragraph tag usually works better.

Using the <p> tag for paragraph breaks

The <p> tag wraps text in a paragraph and automatically adds space above and below it. This is the standard way to separate blocks of text in HTML. Each paragraph is its own block, and the browser adds margin between paragraphs by default.

Here is an example:

<p>This is the first paragraph of text.</p> <p>This is the second paragraph of text.</p>

The browser displays these as two separate blocks with space between them. You can control how much space the browser adds by using CSS, but the <p> tag itself always creates that separation. This is the correct choice for most text content on a web page.

Using the <pre> tag to preserve exact formatting

The <pre> tag tells the browser to display text exactly as you typed it, including all line breaks and spaces. The browser uses a monospace font (like Courier) by default, which makes <pre> useful for code samples, terminal output, or ASCII art where spacing matters.

Here is an example:

<pre> function hello() { console.log("Hello, World!"); } </pre>

The browser displays the code with each line break and space exactly as you wrote it. Without <pre>, the browser would collapse multiple spaces into one and ignore your line breaks. This tag is essential when you need to show code or any text where formatting is part of the meaning.

Combining line breaks with other HTML elements

You can mix these tools together. A common pattern is to use <p> tags for paragraphs and <br> tags inside them when you need a line break without a full paragraph separation. For example, a poem might use <p> to wrap the whole poem and <br> to separate individual lines.

You can also nest <br> inside other tags like <div>, <span>, or list items. The <pre> tag works best on its own because it preserves all spacing, so adding other tags inside it can cause unexpected results.

Common mistakes to avoid

Do not use multiple <br> tags to create space between paragraphs. Browsers ignore extra line breaks in your source code, so <br><br><br> does not create three breaks — it creates one. Use <p> tags instead, or use CSS to control spacing.

Do not rely on line breaks in your source code to display as line breaks in the browser. If you type text on separate lines in your HTML file but do not use <br>, <p>, or <pre>, the browser displays it all on one line. The browser only sees the tags you write, not your formatting.

Frequently Asked Questions

Do I need to close the <br> tag?

No. The <br> tag does not have a closing tag. You can write it as <br> or <br /> — both are correct and work the same way. The second form is older XHTML style; modern HTML uses just <br>.

What is the difference between <br> and <p>?

<br> creates a single line break with no extra space. <p> wraps text in a paragraph and adds space above and below it. Use <br> for line breaks within content, and <p> to separate blocks of text.

Can I use CSS to control line breaks instead of <br>?

Yes. CSS properties like white-space, word-break, and display can control how text wraps. However, <br> is simpler for intentional line breaks, and CSS is better for controlling how text flows automatically.

Why does my code not show line breaks even though I typed them?

HTML ignores line breaks and extra spaces in your source code. The browser only sees the tags you write. To create a visible line break, use <br>, <p>, or <pre>.

Should I use <br> to create space between paragraphs?

No. Use <p> tags instead. Multiple <br> tags do not create proportional space, and it is harder to control with CSS. Paragraphs are the semantic and practical choice for separating text blocks.