What is pre-formatted text?

Here’s how to use the pre-formatted text tag in your HTML code

When you add text to the HTML code for a web page, say in a paragraph element, you have almost no control over where those lines of text will be destroyed or the distance that will be used. This is because the web browser will flow text as needed based on the area that contains it. This includes responsive sites that will have a very smooth layout that varies depending on the screen size used to view the page .

HTML text will break the line it needs once it reaches the end of the area containing it. After all, the browser plays a bigger role in determining how text is corrupted than you do.

When it comes to adding spaces to create a specific format or layout, HTML does not recognize spaces that are added to code, including space, tab, or box spacing. If you put twenty spaces between a word and the word that comes after it, the browser will make only one separate place there. This is known as white space collapse and is actually one of the HTML concepts that many of us in the industry struggle at first. They expect the HTML space to work the way a program like Microsoft Word does, but that’s not the way an HTML image works at all.

In most cases, normal word processing in any HTML document is exactly what you need, but in other cases, you may actually want more control over exactly how text spaces come out and where they break lines.

This is known as pre-formatted text (in other words, you dictate the format). You can add pre-formatted text to your web pages using pre-HTML code.

Using the marker


Many years ago, it was common to see web pages with blocks of pre-formatted text. Using the pre-tag to define sections of the page formatted by the writing itself is a quick and easy way for web designers to get the text to appear the way they want it.

This was before the advent of CSS for layout, when web designers were really stuck trying to force layout using tables and other HTML-only methods. This (inversely) works backwards because pre-formatted text is defined as text in which the structure is defined by typographic conventions rather than HTML rendering.

Today, this label is not used as much because CSS allows us to dictate visual styles in a much more efficient way than trying to enter our HTML, and because web standards dictate a clear separation of structure (HTML) and styles (CSS). . However, there may be cases where pre-formatted text makes sense, such as a mailing address where you want to force line breaks or examples of poetry where line breaks are essential for reading and overall content flow.

Here’s a way to use HTML

tag:    Twas brillig and the slithey toves He behaved and invaded the wabe

Typical HTML shrinks the white space in a document. This means that the characters used in the text are returned, the spaces and tabs will collapse in one place. If you wrote the above quote in a typical HTML tag as the p (paragraph) tag, you will end up with a line of text as follows:


 The two brilliant and sweet tops passed by and headed for the barn


The pre-marker leaves the white space symbols as is. So line breaks, spaces, and sections are preserved in the browser’s display of this content. Placing the quote in a pre-label for the same text would result in this display:

The two brilliant and sweet tops passed by and headed for the barn

 In terms of fonts

The pre-marker not only supports spaces and breaks for the text you write. In most browsers, it is written in large font. This makes all characters in the text the same width. In other words, the letter i takes up as much space as the letter w.


If you prefer to use a different font instead of the standard monosap that your browser displays, you can still change it with style sheets and choose another font in which you want the text to be displayed .



One thing to keep in mind is that in HTML5, the “width” attribute is no longer supported for the element

. In HTML 4.01, the width determines the number of characters a line will contain, but this is omitted for HTML5 onwards.


Leave a Comment