HTML Preformatted Text Tutorial

HTML pre

HTML Preformatted <pre> tag is used to define preformatted text in an HTML document.

Example

A simple Preformatted element is shown in the following example.

index.html

<!DOCTYPE html>
<html>
    <body>
        <pre>Apple
Banana
Cherry</pre>
    </body>
</html>

Note: HTML Preformatted element starts with the tag <pre> and ends with an end tag </pre>.

Default CSS for HTML pre

By default, following CSS properties are set for a Preformatted element.

display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;

Inline Style for HTML Preformatted Element

We can change the style of Preformatted element through inline styling using style attribute.

In the following example, we have set the color to red for the Preformatted element.

index.html

<!DOCTYPE html>
<html>
    <body>
        <pre style="color:red;">Apple
Banana
Cherry</pre>
    </body>
</html>

Apply CSS for HTML Preformatted Element

We can apply CSS for all Preformatted elements using the pre tag.

index.html

<!DOCTYPE html>
<html>
    <head>
        <style>
            pre {
              color:red;
            }
          </style>
    </head>
    <body>
        <pre>Apple
Banana
Cherry</pre>
    </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML <pre> tag and went through different examples that cover defining an HTML Preformatted element, and styling it.