The HTML <pre> tag defines a preformatted block of text. It comes in handy when you want to display text where the typographical formatting affects the meaning of the content, such as code snippets and poems.
By default, browsers ignore white space of any kind – extra text space, line breaks, tabs, or any other formatting characters – that are specified in the HTML.
But with the <pre> tag, you can preserve all the white space you want. The default font-family assigned to any text inside the <pre> is monospace, but you can override it with CSS if you want.
In this tutorial, we will look at the <pre> tag in detail. I'll show you how it works using some "with and without" code snippets so you can have more fun writing HTML, as HTML was never designed to be boring.
Basic Syntax
Just like a lot of other HTML elements, the <pre> tag takes a closing tag (</pre>) as well.
<pre>
Hello World,
this text is inside a pre tag, all white spaces are
preserved
</pre>
Check out the screenshot below for the result:
Examples of the <pre> Tag in HTML
Below are some code snippets and screenshots that show you how the <pre> tag works.
White Space in HTML without the <pre> Tag
<div>
<p>There are extra white spaces in the next two words, but they are ignored by the browser: Hello
World</p>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p, pre {
font-size: 1.2rem;
}
White Space in HTML with the pre Tag
<div>
<p>There are extra white spaces in the next two words, made visible by the <code>pre</code>
tag: <pre>Hello World</pre> </p>
</div>
Tab in HTML without the pre Tag
<div>
<p>There are tabs between the next words, but they're ignored by the browser: I'm a camper</p>
</div>
Tab in HTML with the pre Tag
<div>
<p>There are tabs between the next words, made visible with the <code>pre</code> <pre>tag: I'm
a camper</pre></p>
</div>
Line Breaks in HTML without the <pre> Tag
<div>
<p>
There are line breaks between the next words:
I'm
a
camper
</p>
</div>
Line Breaks in HTML with the <pre> Tag
<div>
<p>
There are line breaks between the next words:
<pre>
I'm
a
camper
</pre>
</p>
</div>
As you can probably imagine now, the <pre> tag is super useful in CSS art (HTML art too), illustrations, for inserting code snippets into HTML, and lots more.
How to Insert Code Snippets without the <pre> Tag
Oftentimes, you might need to display code snippets on web pages for academic purposes or in the documentation of a programming language or framework. This helps you/the maintainers properly communicate with learners.
And you'll want to preserve white space even after using the <code> tag to do it, and that's exactly what the <pre> tag does.
<div>
<h3>Some CSS Resets</h3>
<p>
Did you know you can remove the default padding and margin browsers
insert onto web pages?
</p>
<code> * { padding: 0; margin: 0; box-sizing: border-box; }</code>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
How to Insert Code Snippets with the <pre> Tag in HTML
<div>
<h3>Some CSS Resets</h3>
<p>
Did you know you can remove the default padding and margin browsers
insert to web pages?
</p>
<pre>
<code>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
</code>
</pre>
<p>Now you know that.</p>
</div>
A Bit of Art without the <pre> Tag
<div><p> ^^^^^^^^^^^^^^^^^^^^^
<><><> ^ I'm Kolade, ^
<> <> ^ Web developer from ^
<><><> ^^^^ Nigeria. ^
<> ^ I'm proud to be a ^
<> ^ Camper. ^
<> <> <> ^^^^^^^^^^^^^^^^^^^^^
<> <> <>
<> <> <>
<>
<> <>
<> <>
<> <>
<> <>
<> <>
<> <></p> </div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
A Bit of Art with the <pre> Tag
<div>
<pre>
^^^^^^^^^^^^^^^^^^^^^
<><><> ^ I'm Kolade, ^
<> <> ^ Web developer from ^
<><><> ^^^^ Nigeria. ^
<> ^ I'm proud to be a ^
<> ^ Camper. ^
<> <> <> ^^^^^^^^^^^^^^^^^^^^^
<> <> <>
<> <> <>
<>
<> <>
<> <>
<> <>
<> <>
<> <>
<> <>
</pre>
</div>
How to Fix Unnecessary Scrollbars
Because the text inside a <pre> tag are displayed in the browser as they are in the code, having a block or line of text wider than the available screen width leads to a horizontal scrollbar. You can also sometimes get an unnecessary vertical scrollbar too.
<div>
<pre> These are some lorem texts: Lorem ipsum
dolor sit amet consectetur adipisicing elit. Amet rem nam ea nihil fuga doloribus voluptatem sed officiis iusto. Eveniet quaerat sit quisquam consequatur necessitatibus
totam placeat, ut unde nesciunt.
</pre>
</div>
To get rid of this, CSS provides a white-space property. Setting its value to wrap gets rid of the scrollbars.
pre {
white-space: pre-wrap;
}
Conclusion
During this tutorial, you have seen how the <pre> tag works in HTML. Now go have some fun with it in your next coding project.
Thank you for reading, and keep coding.