Embed XML in HTML

This is how to embed XML into a HTML page, including hyperlinks / links using data islands in HTML.

!!UPDATE 01/01/2009!!

Your best bet is to use Javascript and interpret the XML using XMLHttpRequest(). I'll keep this article here any case anyone finds it useful.

Try this website

Having spent nearly a month trying to figure out if this was possible (it is but only in IE5+), I decided to ramble about my methodology on th'internet to help fellow XML amateurs.

My Objective

To get XML content presented within a HTML page with a .html or .htm extension, rather than an XML extension.

Why didn't you just use an XSLT style sheet?

Because I wanted users to be able to paste code into their own HTML webpage and have the benefit of XML database content without the ball ache of creating XML/XSLT stylesheets.

The Solution - Data Islands

Data Islands provide a way of binding HTML data content to a data source such as XML.

I created an XML file which can be found here http://www.adambetts.com/xml/feed/feed.asp

This is an XML file that comes from my database. It is formatted using an XML data structure (despite the .asp extension it is still interpreted as XML)

The Code - Step by Step

Point to the XML datasource

Firstly we need to point to our XML file. This uses an <xml> tag, which Internet Explorer 5 and above recognize for the purpose of data islands.

<xml src="http://www.adambetts.com/xml/feed/feed.asp" id="VoteTory" async="false"></xml>

ID can be called whatever you like. Async = false means XML data will be loaded before any other HTML processing takes place.

Bind a table to our datasource

Next we need to hook a table up to the bound XML data. This is really simple. All we do is set the datasrc attribute to that of the id (in my example "VoteTory").

I've also added a table header using the <thead> and <th> tags respectively. This is optional, although it is worth remembering this is the only way to put headers into your table in this case, as we will find out in a moment.

<table datasrc="#VoteTory" border ="1">
<thead><th>Header goes here</th></thead>

Loop through the data

Now we have pointed to our datasouce and bound a table to it, we loop through the records displaying the data as we go. The key to remember is a <tr> tag will loop through all the records in your XML source data.

This is why it is important to use only one <tr> tag if you wish to go through each record just once.

To display the data we use the <span> element with the <datafld> attribute set to the name of the field. For example:

<tr><td><span datafld="intro"></span></td></tr></table>

The Finished Product

This the simple result of XML embedded into a HTML document.

Header goes here

The above example is created by the code below. You can paste this into your .html page and it should work.

<xml src="http://www.adambetts.com/xml/feed/feed.asp" id="VoteTory" async="false"></xml>

<table datasrc="#VoteTory" border ="1">

<thead><th>Header goes here</th></thead>

<tr><td><span datafld="intro"></span></td></tr></table>

Using Hyperlinks

Hyperlinks can be tricky when the link is in the xml data itself (eg you have a 'field' which is a link). The link will be displayed as text without the ability to click through to its destination.

The solution is to use the <dataformatas="html"> attribute within an <a> tag. In the example below I have a field called "Link" which I wish to display as a hyperlink rather than text.

The code below demonstrates how to use the dataformas attribute:

<xml src="http://www.adambetts.com/xml/feed/feed.asp" id="VoteTory" async="false"></xml>

<table datasrc="#VoteTory" border ="1">

<thead><th>My Links</th></thead>

<tr><td><a datafld="link" dataformatas="html">Links from my XML file</a></td></tr></table>

Header goes here
Links from my XML file

The end

Email me with any suggestions or questions regarding this subject.

Mr Betts.

Printer Friendly Version