HTML Line Breaks Tutorial - The BR Element

Understanding HTML Line Breaks

The HTML element creates a line break within text, causing the content that follows it to begin on the next line.

Line breaks are useful when the division between lines is meaningful, such as in an address, poem, or other content where separate lines are part of the intended presentation. They should not be used simply to create extra vertical space on a webpage.

HTML Line Break Syntax

The element is placed at the point where the text should continue on a new line.

<p>First line<br>
Second line</p>

When the browser reaches the element, it ends the current line and displays the following content on the next line.

HTML Line Break Example

A postal address is a common example of content where line breaks can be useful because each part of the address is conventionally displayed on a separate line.

<p>KD Web Hosting Design<br>
Prineville, Oregon<br>
United States</p>

Try adding, removing, or moving the elements in the editor to see how they affect the displayed text.

Play in Editor

When to Use Line Breaks

Use the element when a new line is meaningful to the content but does not represent a new paragraph. Addresses, poems, song verses, and similar text may require specific line breaks to preserve their intended structure.

<p>Roses are red,<br>
Violets are blue,<br>
HTML adds structure,<br>
To webpages for you.</p>

The lines remain part of the same paragraph even though each one begins on a new line.

Line Breaks vs Paragraphs

The and elements serve different purposes. A line break continues the same block of content on a new line, while a paragraph represents a separate block of related text.

<p>This is the first paragraph.</p>
<p>This is a separate paragraph.</p>

<p>This is one line.<br>
This is another line in the same paragraph.</p>

If the content represents a new thought or paragraph, use a new element instead of inserting a .

The Element Is an Empty Element

The element is an empty element, which means it does not contain content and does not require a closing tag.

<br>

In HTML5, the slash used in XHTML-style syntax is unnecessary. Although is accepted by browsers, the simpler syntax is appropriate for HTML documents.

Avoid Multiple Line Breaks

Do not insert several elements simply to create extra vertical space between pieces of content.

<p>First paragraph.</p>
<br>
<br>
<br>
<p>Second paragraph.</p>

Spacing is a presentation concern and should be controlled with CSS margins or other layout properties. This keeps the HTML focused on the meaning and structure of the content.

Line Break Best Practices

Use when a line break is meaningful within the content.
Use separate elements for separate paragraphs.
Do not use repeated elements to create vertical spacing.
Use CSS to control spacing between elements.
Do not add a closing tag.
Use the simple syntax in HTML5 documents.

Summary

The HTML element creates a line break without starting a new paragraph. Use it when line divisions are meaningful to the content, and use CSS rather than repeated line breaks when you simply need additional space between elements.

HTML Line Breaks