MakeW3web

Preformatted Text

In HTML, preformatted text is used to display text exactly as it is written in the source code, preserving whitespace, line breaks, and indentation. The `<pre>` element is used for preformatted text and is particularly useful for displaying code snippets, ASCII art, or any content where maintaining the original formatting is important.

Here's an example of how to use preformatted text in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Preformatted Text Example</title>
</head>
<body>
    <h1>Using Preformatted Text</h1>
    
    <p>This is a normal paragraph where spaces and line breaks are not preserved.</p>
    
    <pre>
This is an example of preformatted text.
  Spaces, line breaks, and indentation
  are preserved exactly as written.
    </pre>
    
    <h2>Code Snippet</h2>
    <pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My Webpage&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Welcome to my webpage!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
    </pre>
    
    <h2>ASCII Art</h2>
    <pre>
 _   _
| | | |
| |_| |__   ___
| __| '_ \ / _ \
| |_| | | |  __/
 \__|_| |_|\___|
    </pre>
</body>
</html>

In this example, the `<pre>` elements are used to display preformatted text, a code snippet, and ASCII art. The text inside the `<pre>` element is displayed exactly as it appears in the source code, preserving all spaces, line breaks, and indentation.

Keep in mind that the text inside the `<pre>` element uses a monospace font by default, meaning that each character takes up the same amount of horizontal space. This can make the content inside the `<pre>` element easier to read and understand, especially for code snippets and ASCII art.

However, for regular text content, it's generally better to use paragraphs and other HTML elements to structure and format your content. Preformatted text should be used sparingly and only when necessary to preserve the original formatting of the content.

Was this page helpful?