Displaying XML in HTML

Current Location：Home > Learning > WEB FRONT-END > HTML >

Vue React JavaScript Angular CSS HTML

Displaying XML in HTML

Author：JIYIK Last Updated：2025/04/19 Views：

This article describes how to display XML code on an HTML page.

Introduction to Extensible Markup Language (XML)

It is a markup language similar to HTML, but has no built-in tags. Instead, tags are created by the user as per the user's requirements.

It is an efficient way to store data in a structured manner that can later be quickly accessed, searched, and shared across different endpoints.

Best of all, because XML syntax is standardized, even if you start sharing or transferring XML across platforms or systems, either directly or over the Web, the recipients will still be able to parse the data.

Differences from HTML

It is somewhat similar to HTML as both use tags, but the difference is that XML does not have any predefined tags. Instead, all tags are made according to the needs and requirements of the users.

These tags have the appropriate data format to be transferred from one tag to another. Moreover, HTML is concerned with the appearance of the web page and enhances it, whereas XML is just a piece of information or data sent to someone.

Displaying XML code in HTML

Since XML also works with tags, displaying XML code on an HTML page is a challenge because it also manipulates the XML tags through the manipulation of HTML tags.

Therefore, if we need to display XML code on an HTML page, we can either enclose it <xmp>in tags or write it in <textarea>.

In both cases, the XML tags are not manipulated when the HTML page is rendered, but the entire code is displayed.

Use `<xmp>`the tag to display XML code on an HTML page

Sample code:

<h1> Example to display XML code in HTML </h1>
<xmp>
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <article>
        <data>
            <title>Test HTML page</title>
            <author>NSS</author>
            <country>Pakistan</country>
            <year>2022</year>
        </data>
    </article>
</xmp>

The HTML code above uses <xmp>the tag and contains our XML data in this tag. XML data contains some data. Each tag of XML is the name of the data kept in it.

Now, <xmp>the effect is that this XML code will be displayed as is, without interpretation. Note that we have also used HTML tags in the code to mark the difference between the two.

But the problem is that <xmp>the <head> tag is now deprecated after HTML 3.2. Hence, using it directly in the current HTML version is not advisable.

Use `<textarea>`the tag to display XML code on an HTML page

Another way to display XML code is to enclose it in <textarea>. <textarea>The same is true for . It will display any text within it as is without manipulating it.

We can specify the number of rows and columns to set <textarea>the size of the . Take a look at the following example where we use <textarea>to display XML on the screen in a preformatted style.

Sample code:

<h1> Example to display XML code in HTML </h1>
<textarea cols="35" rows="20" style="border:none;">
    <?xml version="1.0" encoding="ISO-8859-1"?>
<article>
    <data>
        <title>Test HTML page</title>
        <author>NSS</author>
        <country>Pakistan</country>
        <year>2022</year>
    </data>
</article>
</textarea>

We applied border: noneso that it hides the textbox and does not display it. Let's see its output.

So we can say that if we need to display any XML code as it is without rendering its markup on HTML page, we can use any of these two methods.

Previous: None

Next：Read-only checkbox in HTML

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >