Normally, HTML ignores extra spaces and line breaks in the code. However, sometimes you want text to appear exactly as written.
HTML provides the <pre> tag to display preformatted text where spaces, tabs, and line breaks are preserved.
The <pre> Tag
The <pre> tag displays text in a fixed-width font and preserves formatting exactly as it appears in the HTML file.
This tag is commonly used for displaying code examples, poems, logs, and formatted output.
In the example above, the spacing and line breaks are preserved exactly as written inside the <pre> tag.
Without <pre>, the browser would collapse extra spaces and show the text in a single line.
Preformatted Text vs Paragraphs
Paragraphs automatically adjust spacing and wrap text based on screen size.
Preformatted text keeps the original formatting and does not adjust automatically.
The paragraph ignores line breaks, while the preformatted text preserves them.
This difference is important when displaying content that depends on spacing.
Best Practices for Using <pre>
- Use <pre> only when formatting matters
- Avoid using <pre> for regular content
- Combine <pre> with <code> when displaying programming code
- Keep preformatted text readable
Why Preformatted Text Matters for Jobs
Developers often need to display code snippets, logs, or structured data.
Knowing when and how to use <pre> helps you present technical information clearly and professionally.
Practice Task
Display a short block of formatted text such as an address or code snippet using the <pre> tag.
What You Will Learn Next
In the next lesson, you will learn how to write HTML comments and why they are important for developers.