How to Display XML in HTML
This article introduces how to display XML code as it is on an HTML page.
Introduction to Extensible Markup Language (XML)
It is a markup language like HTML but does not have built-in tags. Instead, tags are created by the users according to their requirements of the users.
It is an efficient way to store the data in a structural manner that can later be accessed quickly, searched, and shared among different endpoints.
Most importantly, because the XML syntax is standardized, even if you start sharing or transmitting XML across platforms or systems, whether directly or over the web, the recipient will still be able to parse the data.
Difference With HTML
It is somewhat the same as HTML because both are used with tags, but the difference is that XML does not have any predefined tags. Instead, all the tags are made according to users’ needs and requirements.
These tags have a proper format of data to be transferred from one to the other. Moreover, HTML focuses on the web page’s appearance and enhances it, whereas XML is just a piece of information or data sent to someone.
Display XML Code in HTML
Since XML also works with tags, it is challenging to display XML code as it is on an HTML page since it will also manipulate XML tags with the manipulation of HTML tags.
Therefore, if we need to display the XML code on an HTML page, we can either enclose it in a <xmp> tag or write it in a <textarea>.
In both cases, XML tags will not be manipulated while rendering the HTML page, but the whole code will be displayed.
Use the <xmp> Tag to Display XML Code on HTML Page
Example 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 above HTML code uses a <xmp> tag and encloses our XML data in this tag. XML data contains some data. Each tag of XML is the name of the data retained in it.
Now, the effect of <xmp> will be that this XML code will be displayed as it 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 the <xmp> tag is now deprecated after HTML 3.2. Therefore, using this directly in the current HTML versions is not advisable.
Use the <textarea> Tag to Display XML Code on HTML Page
Another way to display XML code is by enclosing it in a <textarea>. The <textarea> also functions like this. It will display Any text in it as it is without manipulating it.
We can specify the number of rows and columns to set the size of the <textarea>. Look at the example below where we use a <textarea> to display XML on the screen in a preformatted style.
Example 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 have applied border: none so that it hides the textarea box and doesn’t display it. Let us look at the output of it.
Thus we can say that we can use any of these two methods if we need to display any XML code as it is without rendering its tags on an HTML page.