Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

HTML Line Breaks

Learn how to create line breaks in HTML and understand when to use the <br> element.

What is a Line Break?

A line break moves the following content to a new line without creating a new paragraph.

HTML provides the <br> element for inserting a line break inside text or other content.

Basic Syntax: 
<br>

Simple Example 

<p>
    Hello<br>
    Welcome to HTML
</p>

Output

Hello
Welcome to HTML

Multiple Line Breaks

Multiple <br> elements can be used when several separate line breaks are required. 

<p>
    HTML<br>
    CSS<br>
    JavaScript
</p>

HTML
CSS
JavaScript

Using <br> Inside a Paragraph

The <br> element is often used inside a paragraph when content needs to continue on a new line. 

<p>
    Welcome to CIIT Institute.<br>
    Learn HTML step-by-step.<br>
    Start your web development journey.
</p>

Welcome to CIIT Institute.
Learn HTML step-by-step.
Start your web development journey.

Example: Address 👀🤓

The <br> element can be useful when separate lines are meaningful, such as an address. 

<address>
    CIIT Institute<br>
    Hadapsar, Pune<br>
    Maharashtra, India
</address>

Output

CIIT Institute
Hadapsar, Pune
Maharashtra, India

Line Breaks for Poetry or Lyrics

Line breaks can also be useful where preserving individual lines is part of the meaning of the content. 

<p>
    Learn HTML every day.<br>
    Build websites step by step.<br>
    Practice and improve.<br>
    Keep learning.
</p>

Learn HTML every day.
Build websites step by step.
Practice and improve.
Keep learning.

<br> vs <p>

The <br> and <p> elements are not interchangeable.

Element Purpose Example
<p> Defines a paragraph of content. <p>Hello</p>
<br> Inserts a line break within content. Hello<br>World

Is <br> a Container Element?

No. The <br> element is a void element. It does not contain content and does not require a closing tag. 

<br>
Important: Do not write a normal closing tag such as </br>.

Line Breaks with Formatted Text 

<p>
    Learn <strong>HTML</strong><br>
    Learn <em>CSS</em><br>
    Learn JavaScript
</p>

Learn HTML
Learn CSS
Learn JavaScript

Line Breaks with Links 

<p>
    <a href="#">HTML Course</a><br>
    <a href="#">CSS Course</a><br>
    <a href="#">JavaScript Course</a>
</p>

HTML Course
CSS Course
JavaScript Course

When Should You Use <br>?

Useful
  • Addresses
  • Short line-based content
  • Content where line separation is meaningful
  • Specific text formatting requirements
Avoid for Spacing

Do not use repeated <br> elements simply to create large amounts of vertical spacing. CSS is generally more appropriate for layout and spacing.

Common Mistakes

  • Using <br> repeatedly for layout spacing.
  • Trying to use </br> as a closing tag.
  • Using many line breaks instead of using proper HTML structure and CSS.
  • Using a line break when a separate paragraph or section would be more appropriate.

Complete Example 

<!DOCTYPE html>

<html>

<head>

    <title>
        Line Break Example
    </title>

</head>

<body>

    <h1>
        CIIT Institute
    </h1>

    <p>
        Learn HTML.<br>
        Learn CSS.<br>
        Learn JavaScript.
    </p>

    <p>
        Build websites.<br>
        Practice regularly.<br>
        Keep learning.
    </p>

</body>

</html>

Practice Exercise

  1. Create a paragraph containing your name and details.
  2. Put each detail on a new line using <br>.
  3. Create an address using line breaks.
  4. Create three course links and place each link on a separate line.
  5. Compare the result of using multiple paragraphs with using line breaks.

Summary

The <br> element inserts a line break without creating a new paragraph. It is a void element and does not require a closing tag. Line breaks are useful when the separation of individual lines is meaningful, while CSS should generally be used for layout and spacing.

← Previous: Comments Next: Horizontal Rules →