Pre preserves whitespace and line breaks in its text. It works well for code samples, text art, and other content where spacing matters.
What You Need to Know
For programming examples, nesting code inside pre gives both preserved formatting and code meaning. Escape any HTML tag characters shown as sample text.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
<pre>
Line one keeps its spacing.
Line two stays indented.
Line three stays farther right.
</pre>Let’s Understand the Example
- Pre preserves ordinary spacing and line breaks so formatted examples remain readable.
Look for the text “Line one keeps its spacing. Line two stays indented. Line three stays farther ri” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “Line one keeps its spacing. Line two stays indented. Line three stays farther right.”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Wrap a short, indented sample in pre and code.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Putting raw <h1> inside a code sample and accidentally creating a heading.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- Pre preserves whitespace and line breaks in its text.
- Pre preserves ordinary spacing and line breaks so formatted examples remain readable.
- For programming examples, nesting code inside pre gives both preserved formatting and code meaning. Escape any HTML tag characters shown as sample text.