What Is Pre-Formatted Text?

Here how's 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 little to no control over where those lines of text will break or the spacing that will be used. This is because the web browser will flow the text as needed based on the area that contains it. This includes responsive websites which will have a very fluid layout that changes based on the size of the screen being used to view the page.

HTML text will break a line where it needs to once it has reached the end of its containing area. In the end, the browser plays more of a role in determing how the text breaks than you do.

In terms of adding spacing to create a certain format or layout, HTML doesn't recognize the spacing that is added to code, including spacebar, tab, or carriage returns. If you put twenty spaces between one word and the word that comes after it, the browser will render only one single space there. This is known as white space collapse and it is actually one of the concepts of HTML that many new to the industry struggle with at first. They expect HTML whitespace to work the way it does in a program like Microsoft Word, but that is not how HTML whitespace works at all.

In most cases, the normal handling of text in any HTML document is exactly what you need, but in other instances, you may actually want more control over exactly how the text spaces out and where it breaks lines.

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

Using the <pre> Tag

Many years ago, it used to be common to see web pages with blocks of pre-formatted text. Using the pre tag to define sections of the page as formatted by the typing itself was a quick and easy way for web designers to get the text to display as they wanted it to.

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

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

Here is one way to use the HTML <pre> tag:


<pre>
Twas brillig and the slithey toves
    Did gyre and gimble
        in
   the
  wabe
</pre>

Typical HTML collapses the white space in the document. This means that the carriage returns, spaces, and tab characters used in this text would all be collapsed to one space. If you typed the above quote into a typical HTML tag like the p (paragraph) tag, you would end up with one line of text, like this:

Twas brillig and the slithey toves Did gyre and gimble in the wabe

The pre tag leaves the white space characters as is. So line breaks, spaces, and tabs are all maintained in the browser's rendering of that content. Putting the quote inside a pre tag for that same text would result in this display:

Twas brillig and the slithey toves
    Did gyre and gimble
        in
   the
  wabe

Regarding Fonts

The pre tag does more than just maintain the spaces and breaks for the text you write. In most browsers, it is written in a monospace font. This makes the characters in the text all equal in width. In other words, the letter i takes up as much space as the letter w.

If you would prefer to use another font in place of the default monospace one that the browser display, you can still change this with style sheets and select any other font you'd like the text to be render in.

HTML5

One thing to be mindful of is that, in HTML5, the "width" attribute is no longer supported for the <pre> element. In HTML 4.01, the width specified the number of characters that a line would contain, but this has been dropped for HTML5 and beyond.

Edited by Jeremy Girard on 2/2/17