HTML <xmp> Tag

What You’ll Learn

In the early days of web development, the <xmp> tag displayed preformatted text without parsing HTML inside it. With modern HTML standards, it has been deprecated. This guide covers its history, syntax, and the supported alternatives you should use today.

What Is the <xmp> Tag?

The <xmp> tag was an HTML element designed to display text in a fixed-width font, preserving whitespace and showing HTML tags as literal characters instead of rendering them. It was primarily used to display HTML code snippets on tutorial pages.

Learn xmp only to understand legacy HTML and migrate old content. For code snippets, documentation, and unformatted text today, use pre, code, or textarea.

🚫 Deprecated Status

The <xmp> tag is deprecated in HTML4 and obsolete in HTML5. This means it should not be used in modern web development because it is not supported by current standards and may not work consistently across browsers.

• Listed as obsolete in the HTML5 specification.
• Modern browsers may legacy-render it but behavior is unreliable.
• HTML inside xmp may still be parsed in some environments.
• Replace with pre, code, or textarea in all new projects.

📝 Syntax

Despite its deprecated status, here is the basic syntax of the <xmp> tag:

<xmp>
  Your content here, including <tags> and &entities; which will be displayed as-is.
</xmp>

Syntax Rules

• Wrap content between opening and closing <xmp> tags.
• Historically, inner HTML was shown as text rather than rendered.
• Never rely on xmp for security or HTML escaping today.
• Use pre with escaped entities (<, >) for safe code display.

⚖️ <xmp> vs <pre> vs <plaintext>

📚 Common Use Cases

The primary historical use case for the <xmp> tag was to display HTML code snippets directly on a webpage without rendering the tags. Due to its deprecated status, it should not be used in modern web development.

Examples Gallery

Historical xmp patterns plus modern pre, code, and textarea replacements. Legacy examples are for learning only.

<div class="container">
  <p>This is a paragraph inside a div.</p>
</div>

<xmp>
  <div class="container">
    <p>This is a paragraph inside a div.</p>
  </div>
</xmp>

<div class="container">
  <p>This is a paragraph inside a div.</p>
</div>

<pre>
  <code>
    <div class="container">
      <p>This is a paragraph inside a div.</p>
    </div>
  </code>
</pre>

<div class="container">
  <p>This is a paragraph inside a div.</p>
</div>

<h3>HTML <textarea> Example (Alternative to <xmp>)</h3>
<textarea rows="10" cols="50">
  <div class="container">
    <p>This is a paragraph inside a div.</p>
  </div>
</textarea>

♿ Accessibility

• Never use xmp — Obsolete markup confuses parsers and assistive technology.
• Use semantic code elements — code communicates programmatic text to screen readers.
• Escape HTML in examples — Use entities so assistive technology reads markup correctly.
• Label textarea fields — Associate label elements when users edit raw text.

💡 Best Practices