In this article, we will explore the concept of line breaks and illustrate the process of incorporating them into an HTML file.
How do Line Breaks Work?
As indicated by its name, a line break signifies a pause in a line. In HTML, a line break happens when one line concludes horizontally, and the next line starts on a new line.
Introduction
The Hypertext Markup Language is globally recognized for its flexibility and user-friendly attributes. In HTML, it is essential to start a new line for elements like paragraphs, poetic lines, or postal addresses.
Users may quickly construct a new line for this using the various HTML tags. But what if they often insert content that begins a new line within a paragraph? It is also feasible to utilize HTML tags in various ways. This article will go through every HTML line break technique there is.
- Using the <br> tag
- Using the <div> tag
- Using the <p> tag
- Using the <pre> tag
- Using the <span> tag
Method 1: Breaking a line in HTML with the <br> tag
Users have the option to utilize the <br> tag in HTML to introduce a new line, such as in poetry or when indicating addresses that necessitate a line break. In HTML, the <br> tag is considered an empty tag.
This indicates that a closing tag is not required for the specific tag. When a line or paragraph is newly added to a text content, it is common for web browsers to overlook it. To address this, users should employ the HTML <br> tag to introduce a line break and initiate a new line.
Inserting a line break signifies moving to a fresh line for additional paragraphs in an HTML document or webpage elements, as well as creating space between two distinct lines. The "clear" attribute is part of the <br> tag. Following the preceding line break, the <br> element directs the browser on where to commence a new line.
<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML br tag </h1>
<br> the line break with the br tag <br> the line break with the br tag
</body>
</html>
Output:
Method 2: Breaking a line in HTML with the <div> tag
The primary role of the div element is to segment fresh HTML content into various sections such as images, text, headings, footers, navigation menus, and more. However, it is commonly misused by individuals to create line breaks. The div element is encompassed by opening and closing tags within the <div> tag. It is considered a block-level element. The spacing before and after the element can be altered by the user.
<!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>
</body>
</html>
Output:
Method 3: Breaking a line in HTML using the <p> tag
The HTML <p> tag is often used to define a paragraph's inline components and content. A <p> tag is a tag that has a pair of tags-the opening and closing tags. The tag must always be closed. The HTML <p> tag is a block-level element mainly used to add text, although users can use the <br> tag to force a line break inside the element. The <p> tag functions nearly identical to the <br> tag.
In visual media, paragraphs are typically displayed as blocks of text that are distinguished from surrounding text by empty space, a line break, or an indented first line. However, within an HTML paragraph (or <p> element), there can be a collection of interconnected content like images, videos, or other elements or data fields.
<!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>
</body>
</html>
Output:
Method 4: Using the HTML <pre> tag
In this demonstration, we showcase the implementation of the HTML <pre> element, which is used to represent preformatted text. When using the <pre> element, the browser will present the text in a fixed-width font while maintaining line breaks and white spaces as they are in the code.
<!DOCTYPE html>
<html>
<body>
<h1> An example of the HTML pre tag </h1>
<pre>
This is the first line
This is the second line
</pre>
</body>
</html>
Output:
Method 5: Using the HTML <span> tag
In this scenario, we made use of the <span> element, employing CSS display:block to induce a line break, thereby achieving the desired effect of breaking the line.
<!DOCTYPE html>
<html>
<head>
<style>
h1 span {
display: block;
}
</style>
</head>
<body>
<h1 class = "demo">This will break the line here<span> this is the second line</span></h1>
</body>
</html>
Output:
Conclusion
Individuals have the option to utilize any of the tags listed above to implement line break elements instead of paragraph elements in situations where they need a block of text to appear on a separate line, like a stanza in a poem or a mailing address.
This article aims to provide a clear explanation of the optimal scenarios for utilizing line breaks and to showcase the process of adding a line break by employing different HTML elements.