Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I wrap text in a \'pre\' tag in HTML?
In this article, we are going to learn how to wrap text in a <pre> tag in HTML. The HTML <pre> tag is used to display preformatted blocks of text exactly as they appear in the source code, preserving all spaces, line breaks, and indentation.
Preformatted text refers to content that has already been formatted and should be displayed without any additional formatting changes by the browser. The <pre> tag preserves whitespace and uses a monospace font by default, making it ideal for displaying code, poetry, ASCII art, or any text where spacing is important.
Syntax
Following is the basic syntax for the <pre> tag −
<pre> Your preformatted text here... </pre>
When you wrap text in the <pre> tag, the browser displays it exactly as written in the HTML source, including all spaces, tabs, and line breaks. This behavior is different from normal HTML text, where multiple spaces are collapsed into a single space.
How Pre Tag Works
The <pre> tag has the following characteristics −
Preserves whitespace − All spaces, tabs, and line breaks are maintained exactly as written.
Monospace font − Text is displayed in a fixed-width font (usually Courier New).
No text wrapping − Long lines may extend beyond the container width unless CSS is applied.
Block-level element − Creates line breaks before and after the content.
Displaying Code with Pre Tag
The most common use of the <pre> tag is to display programming code. It is often combined with the <code> tag for semantic markup.
Example
Following example demonstrates wrapping JavaScript code in a <pre> tag −
<!DOCTYPE html>
<html>
<head>
<title>Pre Tag for Code</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>JavaScript Function Example</h2>
<pre>
function showAlert() {
var message = "Welcome to TutorialsPoint!";
alert(message);
document.getElementById("demo")
.addEventListener("click", showAlert);
}
</pre>
</body>
</html>
The output preserves all indentation and spacing in the JavaScript code −
JavaScript Function Example
function showAlert() {
var message = "Welcome to TutorialsPoint!";
alert(message);
document.getElementById("demo")
.addEventListener("click", showAlert);
}
Comparison − With and Without Pre Tag
To understand the importance of the <pre> tag, let us compare the same text displayed with and without it.
Example − Without Pre Tag
Following example shows text without using the <pre> tag −
<!DOCTYPE html>
<html>
<head>
<title>Without Pre Tag</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Letter Without Pre Tag</h2>
To
Date: 25/Jan/2020
The Principal
ABC College
New York
Subject: Application for Sick Leave
Dear Sir/Madam,
I am writing to inform you that I am suffering from
fever and need complete bed rest for 5 days.
Thank you,
John Smith
Grade 10
</body>
</html>
The output collapses all extra spaces and line breaks −
Letter Without Pre Tag To Date: 25/Jan/2020 The Principal ABC College New York Subject: Application for Sick Leave Dear Sir/Madam, I am writing to inform you that I am suffering from fever and need complete bed rest for 5 days. Thank you, John Smith Grade 10
Example − With Pre Tag
Following example shows the same text wrapped in a <pre> tag −
<!DOCTYPE html>
<html>
<head>
<title>With Pre Tag</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Letter With Pre Tag</h2>
<pre>
To
Date: 25/Jan/2020
The Principal
ABC College
New York
Subject: Application for Sick Leave
Dear Sir/Madam,
I am writing to inform you that I am suffering from
fever and need complete bed rest for 5 days.
Thank you,
John Smith
Grade 10
</pre>
</body>
</html>
The output preserves all formatting, spaces, and line breaks −
Letter With Pre Tag
To
Date: 25/Jan/2020
The Principal
ABC College
New York
Subject: Application for Sick Leave
Dear Sir/Madam,
I am writing to inform you that I am suffering from
fever and need complete bed rest for 5 days.
Thank you,
John Smith
Grade 10
Using Pre with Code Tag
For semantic HTML, it is recommended to combine <pre> with <code> when displaying programming code. This provides better accessibility and meaning to screen readers.
Example
<!DOCTYPE html>
<html>
<head>
<title>Pre with Code Tag</title>
<style>
pre code {
background-color: #f4f4f4;
padding: 15px;
border-radius: 5px;
display: block;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML Code Example</h2>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
</code></pre>
</body>
</html>
This combination provides semantic meaning and allows for enhanced styling of code blocks.
Common Use Cases
The <pre> tag is commonly used for −
| Use Case | Description |
|---|---|
| Code Examples | Displaying programming code with proper indentation |
| ASCII Art | Preserving character-based artwork and diagrams |
| Poetry | Maintaining line breaks and spacing in verses |
| Email Headers | Displaying formatted email metadata |
| Directory Listings | Showing file structures with proper alignment |
Conclusion
The <pre> tag is essential for displaying preformatted text that requires exact spacing and formatting. It preserves all whitespace, line breaks, and indentation, making it perfect for code examples, poetry, and any content where layout matters. Always combine it with the <code> tag when displaying programming code for better semantic markup.
1K+ Views
