<pre>-Preformatted text

The <pre> tag in HTML is used to define preformatted text, which preserves spaces, line breaks, and other formatting. It is commonly used to display code blocks or other content that requires maintaining its original formatting.

Basic Usage of the <pre> Tag

Text inside the <pre> tag is displayed in a monospace font (usually Courier New or monospace) and retains all spaces and line breaks. For example:

<pre>
  This is preformatted text.
  It preserves   spaces and
  line breaks.
</pre>

In the browser, this text will be displayed as-is:

  This is preformatted text.
  It preserves   spaces and
  line breaks.

Without the <pre> tag, HTML ignores extra spaces and line breaks. For example:

<p>
  This is a regular paragraph.
  It does not preserve   spaces or
  line breaks.
</p>

When rendered in the browser, this text will appear as:

This is a regular paragraph. It does not preserve spaces or line breaks.

Common Uses of the <pre> Tag

1. Displaying Code Blocks

The most common use of the <pre> tag is to display code, especially multi-line code. For example:

<pre>
function greet() {
  console.log("Hello, World!");
}
</pre>

Rendered output:

function greet() {
  console.log("Hello, World!");
}

2. Combining with the <code> Tag for Better Semantics

While <pre> can be used alone, it is often paired with the <code> tag to enhance semantics:

<pre><code>
function add(a, b) {
  return a + b;
}
</code></pre>

This preserves formatting while clearly indicating that the content is code.

3. Displaying ASCII Art or Tables

Since <pre> preserves spaces and line breaks, it can also be used to display ASCII art or simple tables:

<pre>
  +---------+---------+
  |  Name   |  Age    |
  +---------+---------+
  |  John   |   25    |
  |  Jane   |   30    |
  +---------+---------+
</pre>

Rendered output:

  +---------+---------+
  |  Name   |  Age    |
  +---------+---------+
  |  John   |   25    |
  |  Jane   |   30    |
  +---------+---------+

Styling the <pre> Tag with CSS

By default, text inside the <pre> tag is displayed in a monospace font and may have default margin and padding. You can customize its appearance with CSS:

<pre style="background-color: #f4f4f4; padding: 10px; border-radius: 5px;">
  This is a styled preformatted text block.
</pre>

Rendered output:

  This is a styled preformatted text block.

Controlling Line Breaks and Overflow

By default, content inside the <pre> tag does not wrap, which may cause horizontal scrolling for long lines. You can control this using the white-space and overflow CSS properties:

<pre style="white-space: pre-wrap; overflow-x: auto;">
  This is a very long line of text that should wrap if it exceeds the container width instead of showing a horizontal scrollbar.
</pre>

• white-space: pre-wrap: Preserves spaces and line breaks but allows text to wrap when necessary.
• overflow-x: auto: Displays a horizontal scrollbar if the content exceeds the container width.

Notes on Using the <pre> Tag

1. Escaping Special Characters

Since the <pre> tag displays content as-is, if the text contains HTML special characters (e.g., <, >, &), they must be escaped manually to avoid being parsed as HTML tags:

<pre>
  &lt;div&gt;This is a div tag&lt;/div&gt;
</pre>

Rendered output:

  <div>This is a div tag</div>

2. Dynamic Content with JavaScript

When dynamically inserting content into a <pre> tag, handle special characters carefully. For example:

<pre id="code-block"></pre>
<script>
  const code = `function test() {
    return "Hello";
  }`;
  document.getElementById("code-block").textContent = code;
</script>

Using textContent instead of innerHTML prevents HTML parsing issues.

Advanced Usage of the <pre> Tag

1. Syntax Highlighting

While <pre> itself does not support syntax highlighting, you can use JavaScript libraries like Prism.js or highlight.js to achieve this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<pre><code class="language-javascript">
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

<script>hljs.highlightAll();</script>

2. Responsive <pre> Tags

On mobile devices, <pre> content may overflow the screen. Adjust this with CSS:

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

Comparing <pre> with Other HTML Tags

<pre> vs <code>

• <pre>: Used for preformatted text blocks, typically for multi-line code or formatted text.
• <code>: Used for inline code snippets; does not preserve spaces or line breaks.

<pre> vs <textarea>

• <pre>: Only displays text; users cannot edit it.
• <textarea>: Allows users to input and edit multi-line text.

Practical Examples of the <pre> Tag

1. Displaying JSON Data

<pre id="json-display"></pre>
<script>
  const data = {
    name: "John",
    age: 25,
    skills: ["HTML", "CSS", "JavaScript"]
  };
  document.getElementById("json-display").textContent = JSON.stringify(data, null, 2);
</script>

Rendered output:

{
  "name": "John",
  "age": 25,
  "skills": [
    "HTML",
    "CSS",
    "JavaScript"
  ]
}

2. Displaying Command-Line Output

<pre>
$ npm install react
+ react@18.2.0
added 1 package in 2s
</pre>

Rendered output:

$ npm install react
+ react@18.2.0
added 1 package in 2s