Start New Line in HTML

  1. Use the <br> Tag to Break the Line in HTML
  2. Use the <pre> Tag to Break the Line in HTML
  3. Use the <p> Tag to Break the Line in HTML

This article will discuss three methods to break the line in an HTML code. Breaking the line generally means starting the new line from there itself.

Use the <br> Tag to Break the Line in HTML

We can use the <br> tag to break the line in the HTML code. Inside the <body> of the HTML code, we type something of our choice, and when we want to change the line, we use the tag <br> right after the content and start typing the content again. We can also use the tag <br/> tag instead of the <br>, which results in the same outcome as above. Furthermore, if we want to insert two line breaks, we can type the <br> tag two times. It implies that the number of line breaks we wish to have, we have to type <br> tag the same number of times.

For example, inside the HTML body, write the text of your choice. Use the <br> tag after the text where you want to break the line. This shifts your remaining readers to the other line. Use the tag two times consecutively anywhere in the text.

The example below creates a new line after a particular text in the HTML code. After the first sentence inside the HTML body in the code below, the tag <br> breaks the line. As a result, the remaining text switches to the following line. After completing this line, the <br/> tag is used twice, which hints that the line is broken two times.

Example Code:

<body>
Hi, I am here to learn how to break the line in HTML. <br> In this method, I'm using the br tag. <br/> <br/> I would like to be a good programmer in the future.
</body>

Output:

Hi, I am here to learn how to break the line in HTML.
In this method, I'm using the br tag.
 
I want to be a good programmer in the future.

Use the <pre> Tag to Break the Line in HTML

We can also use the <pre> tag inside the HTML body to break the line. This method is slightly different from the one explained above. The <pre> element helps to display the text exactly the way it is typed. Inside the <pre> tag, We type texts in the different lines by pressing the enter button wherever we desire and close the tag. Therefore, it displays the texts in separate lines as we’ve typed. But if we don’t use the <pre> tag, the text will be displayed in the same line without any line breaks no matter how many times we press enter in the text.

For Example, write a <pre> tag inside the HTML body. Then type the desired text and give a line break by pressing enter wherever you like to insert the line break. After you finish writing the text, close the </pre> tag and close the <body> tag.

The illustration below creates a line break in the HTML code. When the desired text is typed, and line break is inserted by pressing enter in the text inside the HTML body. The <pre> tag helps display the output in the same way it is typed. When the <pre> tag is omitted, all the texts will appear in the same line. This shows that the <pre> tag helps to insert the line break.

Example Code:

<body>
    <pre>
        Hi, I am here to learn how to break the line in HTML. 
        In this method, I'm using the pre tag.
        I would like to be a good programmer in the future. 
    </pre>
</body>

Output:

Hi, I am here to learn how to break the line in HTML. 
In this method, I'm using the pre tag.
I want to be a good programmer in the future.

Use the <p> Tag to Break the Line in HTML

We can also use the <p> tag to break the line in the HTML code. This tag determines the paragraph of the text. It is a block-level element; therefore, it always starts on a new line. So writing the <p> tag before starting every line inside the body and writing </p> after concluding it helps break the line.

For example, write the tag <p> and type your desired text, and when you are done with your textbook, write the tag </p>. Then repeat the same process on and on until your wish. After you complete writing all your text, don’t forget to close the body tag of the HTML.

The illustration below also creates a new line. When the tag <p> is typed, the paragraph starts, and when the </p> is typed, the paragraph ends. We know that the new paragraph always starts from the new line, so when we again use the same tag in the text, there appears on the following line, which indicates the new line.

Example Code:

<body>
    <p> Hi, I am here to learn how to break the line in HTML. </p> 
    <p>In this method I'm using the p tag.</p> 
    <p>I would like to be a good programmer in the future.</p> 
</body>
</html>

Output:

Hi, I am here to learn how to break the line in HTML.

In this method, I'm using the p tag.

I would like to be a good programmer in the future.
Contribute
DelftStack is a collective effort contributed by software geeks like you. If you like the article and would like to contribute to DelftStack by writing paid articles, you can check the write for us page.