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 we create preformatted text in HTML?
HTML provides the <pre> tag to create preformatted text that preserves whitespace, line breaks, and spacing exactly as written in the source code. This is essential for displaying code snippets, ASCII art, or any content where formatting matters.
Note − The <xmp> tag mentioned in older tutorials is deprecated and should not be used. The modern approach uses the <pre> tag combined with proper HTML entity encoding.
Syntax
Following is the syntax for creating preformatted text −
<pre> Preformatted text content with preserved spacing and line breaks </pre>
Using the <pre> Tag
The <pre> tag displays text in a fixed-width font (usually Courier) and preserves both spaces and line breaks. All whitespace inside the <pre> element is preserved exactly as typed.
Basic Example
Following example demonstrates basic preformatted text −
<!DOCTYPE html> <html> <head> <title>Preformatted Text Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>Regular Text:</h2> <p>This is regular text where multiple spaces are collapsed into one.</p> <h2>Preformatted Text:</h2> <pre>This is preformatted text where multiple spaces are preserved. Line breaks are also preserved as well as indentation.</pre> </body> </html>
The output shows the difference between regular and preformatted text −
Regular Text: This is regular text where multiple spaces are collapsed into one. Preformatted Text: This is preformatted text where multiple spaces are preserved. Line breaks are also preserved as well as indentation.
Displaying HTML Code in Preformatted Text
To display HTML tags as text content within preformatted blocks, you must encode the angle brackets using HTML entities: < becomes < and > becomes >.
Example
<!DOCTYPE html> <html> <head> <title>HTML Code in Preformatted Text</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>HTML Tags Reference:</h2> <pre>HTML tags include: <strong><b> for bold text</b></strong> <strong><i> for italic text</i></strong> <strong><u> for underlined text</u></strong> Example usage: <p>This is a <b>bold</b> paragraph.</p></pre> </body> </html>
The HTML tags are displayed as text rather than being rendered −
HTML Tags Reference: HTML tags include: <b> for bold text</b> <i> for italic text</i> <u> for underlined text</u> Example usage: <p>This is a <b>bold</b> paragraph.</p>
Preformatted Text with Code Styling
For better code presentation, you can combine <pre> with <code> tag and CSS styling.
Example
<!DOCTYPE html>
<html>
<head>
<title>Styled Code Block</title>
<style>
pre {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
overflow-x: auto;
}
code {
font-family: 'Courier New', monospace;
color: #c7254e;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>JavaScript Function:</h2>
<pre><code>function greetUser(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, World!");
}
}</code></pre>
</body>
</html>
The code appears in a styled box with proper formatting −
JavaScript Function:
???????????????????????????????????????
?function greetUser(name) { ?
? if (name) { ?
? console.log("Hello, " + name + ?
? } else { ?
? console.log("Hello, World!"); ?
? } ?
?} ?
???????????????????????????????????????
Creating ASCII Art
The <pre> tag is perfect for displaying ASCII art since it preserves the exact spacing required.
Example
<!DOCTYPE html> <html> <head> <title>ASCII Art Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <h2>TutorialsPoint Logo:</h2> <pre> _____ _ _ _ ____ _ _ |_ _| _| |_ ___ _ __(_) __ _| |___| _ \ ___ (_)_ __ | |_ | || | | | __/ _ \| '__| |/ _` | / __| |_) / _ \| | '_ \| __| | || |_| | || (_) | | | | (_| | \__ \ __/ (_) | | | | | |_ |_| \__,_|\__\___/|_| |_|\__,_|_|___/_| \___/|_|_| |_|\__| </pre> </body> </html>
The ASCII art is displayed with perfect alignment −
TutorialsPoint Logo: _____ _ _ _ ____ _ _ |_ _| _| |_ ___ _ __(_) __ _| |___| _ \ ___ (_)_ __ | |_ | || | | | __/ _ \| '__| |/ _` | / __| |_) / _ \| | '_ \| __| | || |_| | || (_) | | | | (_| | \__ \ __/ (_) | | | | | |_ |_| \__,_|\__\___/|_| |_|\__,_|_|___/_| \___/|_|_| |_|\__|
Common Use Cases
The <pre> tag is commonly used for −
Code snippets − Programming code that requires precise formatting
Configuration files − System configurations where spacing matters
ASCII art − Text-based drawings and diagrams
Data tables − Simple tabular data aligned with spaces
Poetry − Text where line breaks and spacing are meaningful
Conclusion
The <pre> tag is the modern, standard way to create preformatted text in HTML. It preserves whitespace and line breaks while maintaining semantic meaning. When displaying HTML code within preformatted blocks, always encode angle brackets using HTML entities for proper display.
234 Views
