You can add a new line to an HTML page using the <br> or <pre> tags. The <br> tag adds a break in the page. The <pre> tag formats text exactly as the text appears in your code. If there are any new lines within the <pre> tag, those will be reflected on the final page.
Have you ever wanted to add a new line onto your web page? You cannot just add a new line using the enter character. Instead, you need to use one of the HTML tags built for the purpose of creating new lines.
In this tutorial, we’re going to discuss the HTML <br> and <pre> tags. Both tags let you add new lines into your HTML text. Without further ado, let’s get started.
HTML New Line: <br> and <pre>
Sometimes when we are writing HTML, we need to add line breaks or white space to the UI. These spaces will make the web page more readable. There are two ways to add a new line in HTML:
- <br> tag: Creates a line break.
- <pre> tag: Formats text exactly as it is written in your editor.
HTML <br> Tag
We can add a new line to our text using the <br> tag. This tag, known as the break return element, inserts a new line after the previous element.
The syntax for this tag is:
<p> Test<br> </p>
The <br> tag adds a new line after the word “Test”. This tag does not have a closing tag, Instead, you only need to add <br> to any place where you want a new line. Let’s look at a more detailed example:
Here it is used after each line in an address:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Breaks</title>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, veritatis. Soluta pariatur nesciunt voluptatum id incidunt minus ratione obcaecati laborum unde? Voluptatibus officia quia ducimus odio labore atque aperiam sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque dolores provident animi deserunt maxime. Officiis explicabo odit vitae. Doloremque nemo nobis voluptates ducimus aperiam libero maiores accusamus earum ipsam voluptate! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea nostrum commodi et exercitationem, maiores eum facere dicta repellendus laborum voluptatibus amet ipsam animi repellat distinctio deleniti quis? Dicta, aperiam nobis.</p>
<address>
<span>123 Main St</span><br>
<span>Hometown, USA</span><br>
<span>23455-2345</span>
</address>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tempora modi eius omnis provident sit itaque vel ad porro nulla vero sequi ullam aperiam placeat consectetur, assumenda in autem dolorum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cumque tenetur quos sit assumenda consectetur voluptas veritatis soluta. Alias accusamus similique odio iste. Laudantium vitae exercitationem illum suscipit assumenda enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos architecto deleniti debitis alias recusandae, optio ab nihil in neque nam impedit at a corporis delectus quas! Aliquid, modi earum. Quidem.</p>
</div>
</body>
</html>In this code, we use the <br> tag after each HTML <span> tag in the <address> tag. This adds a new line to each part of the address.
HTML <pre> Tag
The HTML <pre> tag embeds preformatted text into your code. This tag will insert text exactly as we input it in the markup. So, any line breaks in the text will appear in the final code.
Unlike the <br> tag, the <pre> element has an opening and closing tag. Here is the syntax for the <pre> tag in HTML code:
<pre> This is a sentence. </pre>
This code formats the text “This is a sentence” exactly as it appears between the <pre> tags.
The quirk with the <pre> tag is that everything is entered exactly as you write it in the editor.
Copy/pasted text does not have any break returns. So, copy/pasted text may not appear as you expect. The compiler is reading it as one long continuous line of text. By adding some physical returns (by hitting the return or enter key), the expected behavior will happen.
Let’s take a look at a more detailed example of the <pre> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Breaks</title>
</head>
<body style="max-width: 800px; width: 100%;">
<pre style="width: 100%;">
<p style="width: 800px;">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut temporibus dolores
iure molestias porro, esse, ducimus provident ipsam voluptas rerum veniam vero
inventore tempora molestiae error sapiente veritatis, neque eligendi. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Accusamus soluta ipsam eligendi
nesciunt hic explicabo vel doloremque quod eaque minima. Fugit enim fugiat neque
quos, eligendi commodi sint architecto repellendus? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Laboriosam, saepe ipsam! Fugiat id quod esse
obcaecati vitae at commodi distinctio, praesentium labore eveniet corporis aut,
sint qui nostrum iure in!
</p>
<address>
2345 Main St.
Hometown, Anywhere, USA
12345-3456
</address>
<p style="width: 800px; height: 500px; background: pink;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda,
explicabo aspernatur odit saepe a dicta eveniet accusamus laudantium,
molestiae quae sunt cumque iusto? Tenetur eligendi architecto atque tempora.
Placeat? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Ullam sit libero quibusdam, ex ut, possimus iure non architecto
doloremque consectetur quam eligendi repellat facere vero omnis officiis
aperiam modi ea. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iusto quas, autem impedit, ratione enim porro illum fugit natus voluptatem
sunt error non accusamus nulla blanditiis aspernatur nemo repudiandae sequi
reiciendis!
</p>
</pre>
</body>
</html>We add a <pre> tag immediately after the <body> tag in our code. All the text within the tag — our HTML paragraph tags and <address> tag — is formatted as it appears in the text editor.
We do not need to use <br> tags in the address. This is because we have inserted new lines using the enter key in our text editor.
Usually, this would not let us add new lines to our document. Because we have used the <pre> tag, our new lines created with the enter key appear in the final document.
Conclusion
There are two ways to insert line breaks into HTML: <br> and <pre>. The <br> tag is useful if you want to add a single new line in a specific position. <pre> is better if you have a block of text that you want to appear as it is in your text editor.
Do you want to learn more about coding in HTML? We have a How to Learn HTML guide that lists top courses and resources you can use to advance your knowledge.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
