HTML <xmp> Tag

The <xmp> tag was an HTML element used to display text exactly as it is written, including spaces and line breaks. It rendered the content as preformatted text, similar to the <pre> tag, but with a crucial difference: it did not interpret HTML tags within its content. This made it useful for displaying code examples or other content where literal rendering was required. However, the <xmp> tag is now deprecated and should not be used in modern web development.

Syntax

<xmp>
  Preformatted text content here.
  Including spaces, line breaks,
  and HTML tags, which are displayed as text.
</xmp>

Attributes

The <xmp> tag does not support any specific attributes. It relies solely on its content to define the displayed text.

Example

<xmp>
  This is some text within the <xmp> tag.
  It preserves
    all     spacing     and    line
    breaks.
  <p>This HTML tag will be displayed as text, not parsed.</p>
</xmp>

More Examples

Showing Code Snippets

While the <xmp> tag could be used to show code, it's not recommended. Modern approaches use <pre> and <code> elements.

<!-- Example of how xmp used to be used, but is not recommended -->
<xmp>
  function helloWorld() {
    console.log("Hello, World!");
  }
</xmp>

Displaying Special Characters

The <xmp> tag displays special characters without needing encoding but this is not the recommended way to do it.

<xmp>
 < > & " '
 </xmp>

Comparison to <pre>

The most important difference between <xmp> and <pre> is the handling of HTML tags. The <pre> tag renders HTML elements as they are, whilst the <xmp> tag renders them as plain text.

 <pre>
  <p>This paragraph will render as a paragraph.</p>
 </pre>

 <xmp>
  <p>This paragraph will be displayed as plain text.</p>
 </xmp>

Browser Support

The <xmp> tag is deprecated and support for it is inconsistent across browsers. Avoid using it in modern web development.

Note: Although support is technically present in most browsers, its use is not advised due to deprecation.

Notes and Tips

• Avoid Using <xmp>: The <xmp> tag is deprecated in HTML5 and should not be used. It may cause unexpected behavior and issues in the future.
• Use <pre> and <code> Instead: For displaying preformatted text or code snippets, use the combination of <pre> and <code> tags. This is the recommended way to handle preformatted text.
• HTML Entities for Special Characters: Use HTML entities to display special characters, for example < for < and > for >, in HTML content when not displaying code.
• Proper Code Highlighting: For more advanced code displays, use a JavaScript library for syntax highlighting.

Example of recommended usage:

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

By avoiding the <xmp> tag and using the recommended <pre> and <code> tags, you can ensure your content is displayed correctly and is consistent with modern web standards.