How To Display XML Tags on HTML Page

XML – Extensible Mark-Up Language

Before learning how to display XML tags on HTML pages, it’s best to understand what XML is, and how it relates to HTML. When HTML was created, it was designed to transfer data over the Internet easily. Therefore the text-based structure of HTML was highly appreciated. However, over time, HTML began to fall short in terms of displaying data, since the tags were finite and did not cover a broad spectrum of requirements.

However, because XML uses a similar notation for tags as HTML, displaying XML data on HTML pages becomes tricky. This is the gap that XML (Extensible Mark-up Language) was made to fill. In XML, the tags are user-designed. The data is then enclosed in these custom tags and sent across, as easily as HTML. The underlying programs and applications were free to interpret the XML text in whichever manner the developers desired.

Using JavaScript

How to Display XML Tags on HTML Pages using JavaScript

JavaScript can be used to dynamically instruct the browser to interpret the XML tags as text, rather than mark-up commands. The HTML page only needs a small change, to include the JavaScript reference, as the bulk of the work is done by the code itself. Only parameters, like the name of the XML file, need to be sent to the JavaScript file from the HTML page.

Calling the JavaScript functions from HTML:

<script type=”text/javascript” src=”XMLloader.js”></script>

<script> loadxml(‘testfile.xml’); </script>

The JavaScript code can be written in a number of ways, depending on the level of intuitiveness the developer requires. A few code examples for various functions are displayed here:

To load an XML into the JavaScript file, XMLloader.js, for manipulation:

var xmlfile = new ActiveXObject(“Microsoft.XMLDOM”);

function loadxml(xmlsource)

{

xmlfile.load(xmlsource);

xmlobject=xmlfile.documentElement;

}

In the above code, the variable ‘xmlfile’ is defined as an XML ActiveX object. The file name parameter, testfile.xml, is passed into the code and stored in the variable ‘xmlsource’ by calling the function loadxml. The file is then loaded into the XML object, and inbuilt functions are used to manipulate the data.

Using Escape Characters

The most straightforward, yet tedious, way to display XML tags on an HTML page is to change all the ‘<’ notations to ‘&lt’ and all the ‘>’ notations to ‘&gt’.

While the process is painstaking, and there is a great chance of missing some of the signs, this is a sure-fire method of getting the job done. The special characters ‘<’ and ‘>’ will be shown exactly as desired because of the use of HTML escape characters.

However, this option should be considered after every other has been tried, as it is completely manual. If the XML in question needs a change, then the code has to be reworked, therefore it is not a sustainable solution.

Why Display XML on HTML Pages?

Displaying XML code on HTML pages can be necessary for a number of reasons; one of the more popular ones being the need to troubleshoot AJAX code. It is also useful to display XML code in the form of a HTML table, as it then becomes visually easier to understand. Although it’s not always easy learning how to display XML code on HTML pages, and learning all of the tags, it is a worthwhile skill to learn, especially if you plan on using XML in the future.