learntheweb

Menu
Sign Up
Log In

How to use the line break tag in HTML

Pranav Konjeti | Published : June 28th, 2023

Table of Contents

 

  1. Introduction: The Problem

  2. Using Multiple Paragraph Elements

  3. Using the line-break <br> element

  4. When to avoid line-breaks
    • Maintaining Readability
    • Opting for Paragraphs instead

  5. Using CSS to create line-breaks

  6. Conclusion/Recap

One of the most common questions asked when first learning HTML is

        • How do I separate lines with a line break in HTML?

And the answer seems really simple at first, right? Can’t we just take something like a paragraph tag <p> and the line breaks in there? Something like this:

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

But you’ll see that if we run this, instead of having a gap between the two sentences, they seem to just end up on the same line as if there was no gap at all. Here’s what we get:

It’s almost like there was never a line break between the two sentences in the first place, and the reason behind this is how the <p> tag work. In HTML, the <p> element represents a paragraph of text. By default, browsers will add some space (margins) before and after the <p> element to visually separate it from surrounding content.

 

So when the browser renders the code that we wrote above, it’s going to render it as a single paragraph with both sentences on the same line because any consecutive white spaces (including line breaks) within the HTML code are collapsed into a single space. This behavior is known as white space collapsing  and is what causes this behavior within the paragraph <p> element.

 

So how do we actually separate lines in HTML? Well there’s two ways to do this. Let’s start off with the first (and subjectively worse way).

The first (and most obvious way) we can achieve a line break is by using multiple paragraph (or whatever element you want a line break with) elements. Here’s how we can accomplish that:

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

<!-- This could also work (the space isn't needed, it's just for looking nice)-->

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

And now if we run the code above, you’ll see that we do indeed have a line break between both paragraphs!

But this is actually pretty inefficient. Reason being is that HTML actually gives us a built-in line break element! Let’s look into how we can use that next!

The built-in line break element in HTML is written as <br>. There is no closing tag to this – and you’ll see why in a second. For now, let’s take a look at this tag in action so you can get a better idea of how it works. Here is some sample code:

  <p>
      Contact us:<br>
      Phone: 123-456-7890 <br>
      Email: example@example.com
  </p>

This code is going to output the following:

In this example, the <p> element represents a paragraph containing contact information. By using the <br> element after “Contact us:”, “Phone: 123-456-7890”, and “Email: example@example.com“, we create line breaks to separate each line of contact information.

 

It’s really as simple as that! By just adding a <br> anywhere in your paragraph, a line break will happen there! Because this <br> tag only serves one purpose and has no content inside of it, there’s no need for a closing tag

While line breaks can be useful in many scenarios, it’s important to understand when to avoid or use them sparingly. Here are a few considerations:

Maintaining Readability

Line breaks should be used with a reasonable limit. Excessive use of them could lead to poor formatting and make the text harder to read. Let’s consider an example:

<p>
    This is a paragraph with<br>
    excessive line breaks.<br>
    Each sentence is on a new line.
</p>

The output of this code would be:

Notice how the excessive line breaks disrupt the flow of the text and makes it less readable? It’s alright to use them if we’re doing something like adding contact information and an address (like we did earlier), but using too many will make our text less readable and overall harder to understand.

Opting for paragraphs instead

Remember how we said that using new paragraph <p> was subjectively worse? Well, that’s not always true. Imagine you’re writing an essay. You could use multiple line breaks to break the paragraphs apart, but that would be terrible structure.

 

When you have longer paragraphs or blocks of text, it is generally more appropriate to use paragraph elements instead of relying solely on line breaks. This helps maintain readability and allows readers to easily distinguish separate paragraphs. Take a look at the following example:

<p>This is the first paragraph of a longer text. It contains several sentences and provides detailed information on a particular topic.</p>
<p>This is the second paragraph, continuing the discussion and presenting additional insights.</p>

Using paragraphs in this manner provides a clear visual separation between distinct sections. Not only is it easier for potential users to read, it’s also much easier for you to style and edit individual paragraphs with something like CSS. 

Along with creating a line break through plain HTML, we could also make one using CSS if we wanted. Take a look at the HTML and CSS below:

<p>This is a paragraph with a line break using CSS.</p>
p {
  display: block;
}

In the CSS snippet above, we target the <p> element and apply the display: block; property. This CSS rule changes the default behavior of the paragraph element and causes it to start on a new line, essentially creating a line break.

 

By setting the display property to block, the paragraph element is rendered as a block-level element, which automatically places it on a new line.

 

And this method doesn’t work on just paragraphs, we could do it on things like spans as well! Take a look:

span {
  display: block;
}

By adding in a simple display: block; to an element, we can essentially mimic a line break.

In this short post, you learned about the many different ways we could implement a line break in HTML. Here’s the different ways recapped:

    • Using multiple <p> elements to create a line break
    • Using HTML’s built-in <br> tag which can be used inside of any other tag to create a line break
    • Using a CSS property like display: block; to style an element and create a line break

Lastly, you learned about the different instances in which we don’t want to use line breaks like if we’re adding massive paragraphs of content. We hope that this post answered your question and was helpful!

 

If you would like to learn the basics of web-development in a beginner-friendly format, learntheweb provides free web-development courses. No signup at all is required, you can just head on over here or click the button below to start learning!

Explore Courses