HTML xmp Tag
Filter

HTML xmp Tag

by Soeng Souy /
Share

The <xmp> tag in HTML is used to display preformatted text exactly as it is written in the HTML source code. It preserves whitespace, line breaks, and formatting, making it useful for displaying code snippets or other text where exact formatting is important.

However, the <xmp> tag is obsolete in HTML5 and has been replaced by the <pre> tag in most cases. The <pre> tag achieves a similar result, but it is a more modern and supported approach.

That said, here’s how you could have used the <xmp> tag (though not recommended today) and the equivalent approach using <pre>.

1. Using the <xmp> Tag (Deprecated)

<xmp>
    <html>
        <head>
            <title>Sample Title</title>
        </head>
        <body>
            <h1>Welcome to My Website</h1>
        </body>
    </html>
</xmp>

In this example:

  • The content inside the <xmp> tag will display exactly as it appears in the source code, including any HTML tags, spaces, and line breaks.

  • Important: The content will not be interpreted as HTML. It will be shown as raw text on the webpage.

2. Using the <pre> Tag (Recommended)

The <pre> tag is now the preferred way to display preformatted text. It also preserves whitespace, newlines, and formatting.

Here’s the same example using <pre>:

<pre>
    <html>
        <head>
            <title>Sample Title</title>
        </head>
        <body>
            <h1>Welcome to My Website</h1>
        </body>
    </html>
</pre>

Key Points for <pre> Tag:

  • Text inside the <pre> tag is rendered exactly as written, maintaining all spaces and line breaks.

  • It’s useful for displaying code examples or ASCII art.

3. HTML Display of Code Examples

If you're posting code examples on your website, you might want to use <pre> in combination with the <code> tag for better semantics. The <code> tag is used to specify that the enclosed text is a piece of computer code.

<pre>
<code>
    <html>
        <head>
            <title>Sample Title</title>
        </head>
        <body>
            <h1>Welcome to My Website</h1>
        </body>
    </html>
</code>
</pre>

In this case:

  • The <code> tag adds semantic meaning, indicating that the content is code.

  • The <pre> tag preserves formatting.

4. Styling Preformatted Text

You can also style the <pre> tag (or <code>) with CSS to adjust its appearance. For example:

<pre style="background-color: #f4f4f4; padding: 10px; border: 1px solid #ccc;">
    <code>
        <html>
            <head>
                <title>Sample Title</title>
            </head>
            <body>
                <h1>Welcome to My Website</h1>
            </body>
        </html>
    </code>
</pre>

Conclusion:

  • The <xmp> tag was used for displaying preformatted text in older versions of HTML but is deprecated.

  • The modern and preferred tag for displaying preformatted text is the <pre> tag, which can be used with <code> for better semantic meaning.

Tag
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close