Line Break tag and Pre tag in html

      Comments Off on Line Break tag and Pre tag in html
Spread the love

HTML offers several tags to help format and structure text on a web page. Two of these tags are <br> and <pre>, which are used to create line breaks and preserve whitespace, respectively. In this article, we’ll explore these two tags in more detail and show you how to use them effectively.

Line Breaks with the <br> Tag

The <br> tag is used to create a line break within a block of text. When the web browser encounters a <br> tag, it inserts a line break, which starts a new line of text. Here’s an example:

php
<!DOCTYPE html>
<html>
<head>
	<title>Line Break Example</title>
</head>
<body>
	<p>This is the first line of text.<br>
	This is the second line of text.</p>
</body>
</html>

In this example, we’ve used the <br> tag to insert a line break between the two lines of text within the <p> tag. When displayed in a web browser, the two lines of text will appear on separate lines.

Preserving Whitespace with the <pre> Tag

The <pre> tag is used to preserve whitespace within a block of text. When the web browser encounters a <pre> tag, it ignores any whitespace formatting (such as line breaks or spaces) within the tag and displays the text exactly as it appears in the HTML code. Here’s an example:

php
<!DOCTYPE html>
<html>
<head>
	<title>Preformatted Text Example</title>
</head>
<body>
	<pre>This is a line of text.
		This is another line of text with extra spaces.</pre>
</body>
</html>

In this example, we’ve used the <pre> tag to display a block of text exactly as it appears in the HTML code. The text includes both line breaks and spaces, which are preserved within the <pre> tag.

Using the <pre> tag is especially useful when displaying code snippets or other text that needs to maintain its formatting. By preserving whitespace within the tag, you can ensure that the text is displayed exactly as intended.

In conclusion, the <br> tag and the <pre> tag are both useful tools for formatting text on a web page. The <br> tag allows you to create line breaks within a block of text, while the <pre> tag preserves whitespace and displays text exactly as it appears in the HTML code. By using these tags effectively, you can create web pages that are easy to read and visually appealing.

HTML Paragraphs