Previous
Written by: rJTutorial Team | Last Updated:

HTML Pre Tag

In standard HTML, the browser automatically collapses multiple spaces into one and ignores line breaks in your source code. To get around this, we use the <pre> tag. Short for "preformatted text," this tag instructs the browser to render the text exactly as it is typed in the HTML file preserving every space, tab, and newline.

Developer Tip: Think of the <pre> tag as a "What You See Is What You Get" container. It is the go-to tool when the visual structure of your text is just as important as the words themselves.

Usage:

  • The <pre> tag is a block-level element that creates a distinct container for preformatted content.
  • It is the industry standard for displaying code snippets, system logs, terminal outputs, or even creative ASCII art.
  • Example of basic usage:
<pre>
    Line 1: This maintains indentation.
    Line 2:    This has extra leading spaces.
    Line 3: This is on a new line without using a <br> tag.
</pre>
Best Practice: When using the <pre> tag for code, always ensure your opening and closing tags are flush with your content if you want to avoid extra leading or trailing empty lines in the browser.

Whitespace Preservation:

  • The defining feature of the <pre> tag is its handling of whitespace. Unlike a standard <p> or <div>, the browser will not "clean up" your spacing.
  • This is particularly useful when you need to align columns of text manually without using a complex table structure.
Common Mistake: Beginners often try to use <pre> to create layout columns for a whole website. This is a bad practice; use CSS Flexbox or Grid for layouts and save <pre> for literal text content.

Text Rendering:

  • By default, browsers render text inside a <pre> tag using a monospace font (like Courier or Consolas).
  • In a monospace font, every character (including spaces) has the exact same width. This ensures that 10 spaces on line one will align perfectly with 10 characters on line two, which is vital for code readability and data tables.

Usage Considerations:

  • Responsiveness: Because <pre> prevents text wrapping, a long line of code can "break" your mobile layout by creating a horizontal scrollbar.
  • Accessibility: Screen readers may struggle with complex ASCII art inside these tags. Always provide an aria-label or an alternative description if the content is vital for understanding.
  • Avoid Overuse: Don't use <pre> just to get a specific font style; use CSS for styling and <pre> for structural preservation.
Watch Out: Long lines of code inside a <pre> tag will not wrap by default. To prevent your layout from breaking on mobile, use the CSS property white-space: pre-wrap; or overflow-x: auto;.

Example with Code Snippet:

  • In modern web development, the most common use case is displaying a block of programming logic:
<pre>
<code>
function calculateTotal(price, tax) {
    const total = price + (price * tax);
    return total.toFixed(2);
}

console.log(calculateTotal(100, 0.07)); // Output: 107.00
</code>
</pre>

Nested <code> Tag:

  • While <pre> handles the layout (spacing and line breaks), the <code> tag provides the semantic meaning, telling the browser and search engines that the content is a computer program.
  • Nesting them is the "Gold Standard" for technical blogs and documentation. This also makes it easier to apply syntax highlighting libraries like Prism.js or Highlight.js.
Best Practice: Always nest <code> inside <pre> for programming examples. This combines structural preservation with semantic accuracy, making your HTML more professional and SEO-friendly.

By mastering the <pre> tag, you ensure that your technical content remains readable, structured, and professional, providing a better experience for developers who need to read and understand your code examples.

Previous