HTML Line Breaks

HTML line breaks are used to move text to the next line without starting a new paragraph. In HTML, the <br> element is used to create a line break.

Line breaks are useful when you want to display text on separate lines, such as addresses, poems, song lyrics, contact information, or short pieces of related content.

What Is an HTML Line Break?

An HTML line break moves the following content to a new line.

The <br> element is used for this purpose.

<p>Hello<br>Welcome to Web4Learners.</p>

The browser displays:

Hello
Welcome to Web4Learners.

The <br> element does not create a new paragraph. It only moves the content after it to the next line.

HTML <br> Syntax

The basic syntax is: <br>

The <br> element is an empty element, which means it does not have a closing tag.

Correct: <p>Hello<br>World</p>

You may also see: <br />

This syntax is valid, but <br> is the standard HTML syntax commonly used in modern HTML.

HTML Line Break Example

You can use <br> when you want multiple lines inside the same paragraph.

<p>
    HTML is easy to learn.<br>
    HTML is used to create web pages.<br>
    CSS is used to style web pages.
</p>

Each <br> moves the next sentence to a new line.

Line Breaks in Addresses

The <br> element is commonly useful for displaying addresses.

<p>
    Web4Learners<br>
    Hyderabad<br>
    Telangana<br>
    India
</p>

This displays each part of the address on a separate line.

Line Breaks in Poems

Line breaks can also be useful when displaying poems where each line needs to remain separate.

<p>
    Learn HTML every day.<br>
    Practice what you learn.<br>
    Build websites step by step.<br>
    Improve your skills.
</p>

Here, <br> preserves the intended line-by-line structure.

<br> vs <p>

The <br> and <p> elements have different purposes.

Element	Purpose
<p>	Creates a paragraph
<br>	Creates a line break
<h1> to <h6>	Creates headings

For example:

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

Use <p> when you have separate paragraphs.

Use <br> when the content belongs to the same block but needs to appear on separate lines.

Using Multiple <br> Elements

You can technically use multiple <br> elements:

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

However, you should generally avoid using <br><br> to create large spaces between content.

If you need spacing between elements, use CSS instead.

p {
    margin-bottom: 20px;
}

CSS provides better control over spacing and keeps the HTML structure meaningful.

HTML Line Breaks and CSS

CSS can also control how text wraps and appears on different lines. However, when you specifically need to force a line break at a particular point, <br> is appropriate.

For example:

<p>
    Learn HTML<br>
    Build websites<br>
    Practice regularly
</p>

You can then style the paragraph with CSS:

p {
    font-size: 18px;
    line-height: 1.6;
}

Common Mistakes with HTML Line Breaks

Using <br> Instead of Paragraphs

Avoid using <br> to separate completely different paragraphs.

Not recommended:

<p>
    HTML is a markup language.<br><br>
    CSS is used for styling.
</p>

Better:

<p>HTML is a markup language.</p>

<p>CSS is used for styling.</p>

Using <br> for Page Layout

Do not use many <br> elements to create page layouts or large empty spaces.

Instead, use CSS properties such as:

• margin
• padding
• line-height
• display
• gap

HTML Line Break Best Practices

Follow these practices when using HTML line breaks:

• Use <br> when a specific line break is required.
• Use <p> for separate paragraphs.
• Avoid using multiple <br> elements for spacing.
• Use CSS for margins and layout.
• Use line breaks appropriately for addresses and line-based content.
• Keep your HTML structure semantic and easy to maintain.

Complete HTML Line Break Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Line Breaks</title>
</head>
<body>

    <h1>HTML Line Breaks</h1>

    <p>
        Welcome to Web4Learners.<br>
        Learn HTML step by step.<br>
        Practice with practical examples.
    </p>

    <h2>Address</h2>

    <p>
        Web4Learners<br>
        Hyderabad<br>
        Telangana<br>
        India
    </p>

</body>
</html>

HTML Line Break Cheat Sheet

Code	Description
<br>	Creates a line break
<p>	Creates a paragraph
<h1>	Creates the main heading
<h2>	Creates a section heading
margin	Controls space around elements
padding	Controls space inside elements