The pre tag, which is used to designate preformatted text

In this entry, we will experiment with ASCII art and try to draw a cat. But nothing happens because the code is displayed differently in the HTML editor and in the mini-browser. You can insert as many consecutive spaces in your text, but the browser will only display one space. The same thing applies to line breaks: consecutive empty lines are not displayed.

You can change this behavior by using the <pre> tag (which is short for “preformatted text”). Most often, this tag is used to display examples of code, and it is less commonly used to display ASCII art. The browser will preserve and display all spaces and hyphens that are found inside the <pre> tag.

<pre>Example
                of preformatted
        text     with preserved spaces
                     and line breaks</pre>

And the displayed result in the browser:

Example
                of preformatted
        text     with preserved spaces
                     and line breaks

We added several styles (font and text color parameters) so that the contents of the <pre> tag would look prettier. You can explore the styles in the style.css tab.