HTML <pre> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions (FAQ)

INTRODUCTION

The HTML <pre> element is used to display text, exactly as they appear in the HTML file by preserving spaces, line breaks, and indentation. It is often used to display code snippets, ASCII art, or any content where whitespace formatting is important. The text is shown by browser in its default monospace font. It is a block-level element, by default.

Whitespace inside this element is displayed exactly as written, with one exception: if one or more newline characters appear immediately after the opening <pre> tag, the first newline is removed.

The <pre> element often includes <code>, <samp>, and <kbd> elements, which represent computer code, output, and user input, respectively.

Syntax:

<pre> --TEXT-- </pre>

Example:


<pre>
   /\
  /  \
 /____\
/      \
</pre>

Example: Without <pre> tag

Example: With <pre> tag



   /\
  /  \
 /____\
/      \

Best Practises

It's important to give a clear description of any images or diagrams made with preformatted text. This helps people understand what the image or diagram shows, even if they can't see it.

People with low vision who use screen readers may not understand the meaning of the text when it's read out loud in order. A good description will help them know what the image or diagram represents. You can use the <figure> and <figcaption> elements for this purpose.

Tag Omission

The HTML <pre> element must have both start tag and end tag.

ATTRIBUTES

The <pre> element only has global attributes.

Frequently Asked Questions (FAQ)

What is the use of pre tag in html?

Whitespace is any string of spaces, tabs or line breaks. White space is ignored in HTML. If developer add space between words in HTML code then browser ignores it and reduce it to single space when shown on webpage. If developer write text on multiple line in HTML code, it is again ignored by browser and converted into single line when shown on webpage.

The HTML <pre> element is used to display text, as they appear in the HTML file by preserving spaces, line breaks, and indentation.

Why does text inside a <pre> tag display with line breaks in the browser?

You're getting line breaks in <pre> tags because that's exactly what they are designed to do. Browsers normally collapse whitespace (like multiple spaces or newlines) in most HTML elements. But <pre> tells the browser: “Render this text exactly as it appears - including the line breaks and indentation.”

What is the difference between the <p> and <pre> tags in HTML?

Paragraph Tag
Purpose: Represents a paragraph of text.
Text Wrapping: Automatically wraps text.
Whitespace Handling: Collapses extra spaces and line breaks.

Preformatted Text Tag
Purpose: Displays preformatted text exactly as typed.
Text Wrapping: Preserves line breaks, spaces, and tabs.
Whitespace Handling: All whitespace is preserved.

How can I enable text wrapping inside a <pre> tag in HTML?

By default, <pre> preserves whitespace and does not wrap text, which can cause long lines to overflow the container. To wrap text inside a <pre> tag, you need to override its default behaviour using the CSS white-space property with value set to pre-wrap (white-space: pre-wrap).
white-space: pre-wrap tells the browser to wrap lines when they reach the container's edge