HTML <pre> Element

Publish in HTML Tutorial el 25/05/2025 14:59

The HTML <pre> Element: Preserving Text Formatting

The <pre> element in HTML defines preformatted text. Text within a <pre> element is displayed exactly as written in the HTML source code - preserving both spaces and line breaks. This makes it ideal for displaying code blocks, ASCII art, or any content where whitespace matters.

Key Characteristics:

Monospaced font (typically Courier or similar)
Preserves all whitespace (spaces, tabs, line breaks)
Does not automatically wrap text (unless CSS is applied)
Often used with <code> element for code blocks

Basic Syntax:

Basic Example

Here's a simple example showing how the pre element preserves formatting:

Play Code

<pre>
  Line 1
    Line 2
      Line 3
  Last Line
</pre>

Displaying Code with Syntax Highlighting

While <pre> preserves formatting, you can combine it with <code> for better semantic meaning:

Play Code

<pre><code>
function helloWorld() {
  // This is a code block
  console.log("Hello World!");
  return true;
}
</code></pre>

ASCII Art Example

The <pre> element is perfect for displaying ASCII art:

Play Code

<pre>
   (\_/)
  (='.'=)
 (")___(")
   Bunny!
</pre>

Dynamic Content with JavaScript

You can update the content of a <pre> element dynamically with JavaScript:

Play Code

<pre id="dynamicPre">Initial content</pre>
<button onclick="updatePre()">Update Content</button>

<script>
function updatePre() {
  document.getElementById("dynamicPre").textContent = 
    "Updated content\nwith new lines\nand formatting!";
}
</script>

Logging Output with JavaScript

Here's how you can use <pre> to display console-like output:

Play Code

<pre id="consoleOutput">System ready</pre>
<button onclick="logMessage()">Add Message</button>

<script>
function logMessage() {
  const pre = document.getElementById("consoleOutput");
  pre.textContent += "\nNew message at: " + new Date().toLocaleTimeString();
}
</script>

Tips and Tricks

Horizontal Scrolling: By default, <pre> elements don't wrap text. Add white-space: pre-wrap; in CSS to enable wrapping.
Syntax Highlighting: Combine with libraries like Prism.js or Highlight.js for beautiful code display.
Accessibility: Add appropriate ARIA roles when displaying code (role="code").
Tab Size: Control tab width with CSS tab-size property.
Line Numbers: Add line numbers by combining with CSS counters.