0
0
HTMLmarkup~5 mins

Preformatted text in HTML

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Preformatted text shows exactly how you type it, including spaces and line breaks. It helps keep text layout as you want.

Showing code examples on a webpage
Displaying poetry or song lyrics with line breaks
Presenting ASCII art or diagrams
Sharing text where spacing matters, like tables made with spaces
Syntax
HTML
<pre>
Your text here
</pre>

The <pre> tag preserves spaces and line breaks.

Text inside <pre> uses a monospace font by default.

Examples
This shows spaces and line breaks exactly as typed.
HTML
<pre>
Hello   World
This is preformatted text.
</pre>
Useful for showing aligned numbers or tables made with spaces.
HTML
<pre>
  1  2  3
  4  5  6
</pre>
Great for showing code snippets with indentation.
HTML
<pre>
function greet() {
  console.log('Hi!');
}
</pre>
Sample Program

This page shows text inside a <pre> tag. Spaces and line breaks appear exactly as typed.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preformatted Text Example</title>
</head>
<body>
  <h1>Example of Preformatted Text</h1>
  <pre>
Line 1:   Hello World!
Line 2:   This text keeps    spaces.
Line 3:   And line breaks too.
  </pre>
</body>
</html>
OutputSuccess
Important Notes

Do not use <pre> for normal paragraphs because it keeps all spaces and line breaks, which may break your layout.

You can style <pre> with CSS to change font size or color if needed.

Summary

The <pre> tag shows text exactly as you type it.

It is perfect for code, poetry, or any text where spacing matters.

Remember it uses monospace font and preserves all spaces and line breaks.