What Element Displays White Space Exactly as It Is Typed and Uses a Mono-spaced Font Family?
The HTML <pre> tag defines a preformatted block of text. It comes in handy when y'all want to brandish text where the typographical formatting affects the pregnant of the content, such every bit lawmaking 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 volition look at the <pre> tag in detail. I'll testify you how it works using some "with and without" code snippets and so you lot can accept more than fun writing HTML, every bit HTML was never designed to be boring.
Basic Syntax
Simply like a lot of other HTML elements, the <pre> tag takes a endmost tag (</pre>) also.
<pre> Hi World, this text is within a pre tag, all white spaces are preserved </pre> Check out the screenshot below for the issue:
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 side by side two words, only they are ignored by the browser: Hello World</p> </div> body { display: flex; align-items: middle; justify-content: center; top: 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, fabricated 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 betwixt the next words, just they're ignored by the browser: I'm a camper</p> </div> 
Tab in HTML with the pre Tag
<div> <p>At that place are tabs between the adjacent words, made visible with the <code>pre</code> <pre>tag: I'thou a camper</pre></p> </div> 
Line Breaks in HTML without the <pre> Tag
<div> <p> At that place are line breaks between the adjacent words: I'm a camper </p> </div> 
Line Breaks in HTML with the <pre> Tag
<div> <p> At that place are line breaks between the adjacent words: <pre> I'thou a camper </pre> </p> </div> 
As you can probably imagine at present, the <pre> tag is super useful in CSS fine art (HTML art as well), illustrations, for inserting code snippets into HTML, and lots more.
How to Insert Code Snippets without the <pre> Tag
Oftentimes, you might demand to display code snippets on web pages for academic purposes or in the documentation of a programming language or framework. This helps y'all/the maintainers properly communicate with learners.
And you'll desire to preserve white space fifty-fifty later on using the <code> tag to do it, and that's exactly what the <pre> tag does.
<div> <h3>Some CSS Resets</h3> <p> Did yous know you tin can remove the default padding and margin browsers insert onto web pages? </p> <lawmaking> * { padding: 0; margin: 0; box-sizing: border-box; }</code> </div> body { display: flex; marshal-items: eye; justify-content: centre; peak: 100vh; } 
How to Insert Lawmaking Snippets with the <pre> Tag in HTML
<div> <h3>Some CSS Resets</h3> <p> Did you know yous can remove the default padding and margin browsers insert to web pages? </p> <pre> <lawmaking> * { padding: 0; margin: 0; box-sizing: edge-box; } </code> </pre> <p>Now you know that.</p> </div> 
A Bit of Art without the <pre> Tag
<div><p> ^^^^^^^^^^^^^^^^^^^^^ <><><> ^ I'm Kolade, ^ <> <> ^ Web programmer from ^ <><><> ^^^^ Nigeria. ^ <> ^ I'm proud to be a ^ <> ^ Camper. ^ <> <> <> ^^^^^^^^^^^^^^^^^^^^^ <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <></p> </div> body { display: flex; align-items: middle; justify-content: center; elevation: 100vh; } 
A Flake of Art with the <pre> Tag
<div> <pre> ^^^^^^^^^^^^^^^^^^^^^ <><><> ^ I'm Kolade, ^ <> <> ^ Web developer from ^ <><><> ^^^^ Nigeria. ^ <> ^ I'yard proud to be a ^ <> ^ Camper. ^ <> <> <> ^^^^^^^^^^^^^^^^^^^^^ <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> </pre> </div> 
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 likewise sometimes get an unnecessary vertical scrollbar too.
<div> <pre> These are some lorem texts: Lorem ipsum dolor sit down 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 go rid of this, CSS provides a white-space holding. Setting its value to wrap gets rid of the scrollbars.
pre { white-space: pre-wrap; } 
Conclusion
During this tutorial, you accept seen how the <pre> tag works in HTML. Now become have some fun with information technology in your next coding project.
Give thanks you lot for reading, and keep coding.
Learn to lawmaking for gratuitous. freeCodeCamp'south open source curriculum has helped more than twoscore,000 people get jobs equally developers. Get started
Source: https://www.freecodecamp.org/news/pre-tag-in-html-example-code/
0 Response to "What Element Displays White Space Exactly as It Is Typed and Uses a Mono-spaced Font Family?"
Post a Comment