Register Login
Python Photoshop SAP Java PHP Android C++ Hadoop Oracle Interview Questions Articles Other

Different ways to create a line break in HTML

Updated Oct 17, 2022

Introduction:

The Hypertext Markup Language is a language that is known worldwide for its flexibility and easy-to-use properties, features, and tags. In HTML, a paragraph, stanza of any poem, or postal address always starts on a new line.

For this, users can easily create a new line with the different tags in HTML. But what if they like to add text within a paragraph that will start on a new line? It is also possible through different ways to use tags in HTML. This article will discuss all the various methods of Line break in HTML.

  1. Using the <br> tag
  2. Using the <div> tag
  3. Using the <p> tag
  4. Using the <pre> tag
  5. Using the <span> tag

Method 1: Using the <br> tag to break a line in HTML:

When users want to add a new or start with a new line, they can use this HTML <br> tag, such as in poems or addresses where the line break is needed. In HTML, the <br> tag is an empty tag.

It implies the tag does not require any end tag. Generally, a web browser does not recognize a newly inserted line and paragraph piece in a content text. So, if users want to start with a new line, they have to insert the line break using the HTML <br> tag.

When users add a line break, this signifies moving to the new line for adding a few spaces between two different lines, any additional HTML document paragraphs, or webpage elements. One attribute of the <br> tag is the "clear" attribute. The <br> tag tells the browser where to start a new line after the preceding line break.

Code Snippet: 

<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML br tag </h1>
<br> the line break with br tag <br> the line break with br tag <br> the line break with br tag
<p> Note: This tag does not require any end tag </p>
</body>
</html>

Output:

Run Code Snippet

Some browsers that support the HTML <br> tag are as follows:

  • Firefox
  • Google Chrome
  • Internet Explorer
  • Microsoft Edge
  • Opera
  • Safari

Method 2: Using the <div> tag to break a line in HTML:

Though the div is to create a division for new content in HTML, such as images, text, header, footer, navigation bar, and many more, users can often use this to create a new line. The <div> tag contains both the opening and closing tags. The <div> tag is a block-level element. So users can set the line break before and after it.

Code Snippet: 

<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML br tag </h1>
<div> the line break with br tag </div> <div> the line break with br tag </div> <div> the line break with br tag </div>
<p> Note: Users should add the end tags while using this tag</p>
</body>
</html>

Output:

Run Code Snippet

Some Browsers that support the HTML <div> tag are as follows:

  • Internet Explorer
  • Google Chrome
  • Opera
  • Safari
  • Firefox

Method 3: Using the <p> tag to break a line in HTML:

Generally, the HTML <p> tag is to define a paragraph inline elements and content. A <p> tag is a tag that has an opening and closing tags known as pair tags.

It is mandatory to close the tag. The <p> tag works almost the same as the <br> tag, but the difference is HTML <p> tag is a block-level element and is mainly used to add content, whereas users can use the <br> tag to force a line break inside the element.

Usually, users represent paragraphs in visual media as sections of text divided from sections of adjoining text by white space, a blank line, or a first-line indentation. But HTML paragraphs (or <p> tag) can be a structural set of related content, such as images, videos, or other forms of elements or fields.

Code Snippet:

<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML paragraph tag </h1>
<p> the line break with br tag </p> <p> the line break with br tag </p> <p> the line break with br tag </p>
<p> Note: Users should add the end tags while using this tag</p>
</body>
</html>

Output:

Run Code Snippet

Some browsers that support the HTML <p> tag are as follows:

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

Method 4: Using the HTML <pre> tag:

In this method, we show the use of the HTML <pre> tag that defines a preformatted text. The browser will display the text within the <pre> element in a fixed-width font, and the text maintains line breaks and white spaces.

Code Snippet:

<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML pre tag </h1>
	<pre>
		This is the first line
		This is the second line
		This is the third line
	</pre>
</body>
</html>

Output:

Run Code Snippet

Some browsers that support the HTML <pre> tag are as follows:

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

Method 5: Using the HTML <span> tag:

Here, we used the <span> tag that forces a line to break with CSS display:block. It creates a line break.

Code Snippet: 

<!DOCTYPE html>
<html>
<head>
<style>
	h1 span {
		display: block;
	}
</style>
</head>
<body>
	<h1 class = "demo">This will break the line here<span>and this is the second line</span></h1>
</body>
</html>

Output:

Run Code Snippet

Some browsers that support the HTML <span> tag are as follows:

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

Conclusion:

When users want a section of content that is mandatory to appear on a separate line, such as a stanza of a poem or a postal address, they can use any of the above tags and apply line break elements instead of paragraph elements.

We hope this article has given a crisp idea of the ideal use case of line breaks and walked through how to create a line break using the different tags in HTML.

Recommended Posts:
×