How to Display XML - The Basics
Introduction
XML is designed for data storage and transport. It encodes data in a format that is human-readable and machine-readable, providing a reliable, extensible framework for describing complex documents and data structures. Its primary use is to facilitate the sharing of structured data across different systems, notably over the Internet.
Given its platform-independent and language-independent nature, XML files can be processed by most modern languages and operating systems.
Our guide aims to cover how to display XML files in a browser and introduce techniques for more advanced formatting, including CSS and XSLT.
Note: For a detailed overview of XML feel free to check out our XML Introduction and Basics
Displaying Raw XML Data in Web Browsers
Before diving into how to view XML files, we need to create one. Let's walk through the steps:
Open a basic text editor like Notepad or, if you prefer, a more sophisticated one like VS Code, Sublime Text, or Atom. For this simple demonstration, a basic text editor will suffice.
Copy the following XML code:
<lunch_menu>
<food>
<name>Chicken Caesar Salad</name>
<price>$10.95</price>
<description>A bed of fresh lettuce, grilled chicken, croutons, and Caesar dressing</description>
<calories>560</calories>
</food>
<food>
<name>Italian Panini</name>
<price>$8.95</price>
<description>Grilled sandwich with ham, cheese, and tomato</description>
<calories>700</calories>
</food>
<food>
<name>Vegetarian Wrap</name>
<price>$9.50</price>
<description>Fresh veggies, feta cheese, and a tangy dressing wrapped in a whole grain tortilla</description>
<calories>650</calories>
</food>
</lunch_menu>
Our XML file represents a lunch menu, with each <food> element detailing the name, price, description, and calorie content of a specific dish.
Specifically, <lunch_menu>, <food>, <name>, <price>, <description>, and <calories> are custom XML tags that structure our data.
While this is a straightforward example, XML files can encapsulate much more complex data structures and continue to find use in various real-world applications. These include legacy systems for data interchange, web services enabling structured communication, and the storage and transportation of intricate document structures across diverse sectors.
Save the file with an .xml extension (for example, lunch_menu.xml).
Open the file in your web browser by dragging and dropping the file, or right-clicking and choosing "Open With" to select your preferred browser.
Viewing XML Files
When opening the lunch_menu.xml file in a browser, browsers like Google Chrome, Mozilla Firefox, and Safari will render the XML file in its raw form, displaying XML tags and data without any styling or formatting.
Modern browsers provide some navigational aids to help you browse the data. They typically color-code the XML elements to distinguish between tags and data and provide expand and collapse features (usually symbolized by plus (+) or minus (-) signs) to navigate the hierarchical structure of an XML document. To view the raw XML source, select "View Page Source" or "View Source" from the browser menu.
The user experience with raw XML files is limited by the visibility of tags and plain data, lacking the visual appeal of a formatted document. For a more user-friendly and visually appealing view of your XML document, consider using an online XML viewer such as this one, among others. It allows you to parse XML, visualize it, and even perform validation checks.
Displaying XML with CSS: A Brief Overview
CSS isn't solely confined to styling HTML documents. It can also add visual formatting to XML files, thereby transforming the bare-bones, tag-ridden view into a more aesthetically pleasing presentation. This is accomplished via the xml-stylesheet processing instruction, which acts as a bridge to a CSS file. Here's how it might be presented:
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
In the above line of code, the XML file is effectively instructed to import styles from an external CSS file named "stylesheet.css". In this CSS file, you would specify the styles for your XML elements, adding a degree of aesthetic formatting to the otherwise plain XML data. For instance, you might want to add colors to differentiate types of data, change fonts or sizes to emphasize certain elements or add borders and spacing for a cleaner layout.
But even with the ability to style XML with CSS, keep in mind that this approach has limitations. The most notable is that CSS doesn't allow for the transformation of XML data into other forms, a crucial requirement for making the data truly versatile. This limitation leads us to a more powerful alternative for displaying XML - XSLT, or Extensible Stylesheet Language Transformations.
Displaying XML with XSLT
When it comes to transforming XML documents into other formats like HTML, XSLT is often the go-to option. More advanced than CSS, XSLT has the capability to not just alter the presentation, but also to reshape the data itself. Through XSLT, you can rearrange elements, sort data, and even add or remove elements and attributes in the output file. To locate and interact with data within an XML document, XSLT utilizes XPath, a language specifically designed for navigating XML.
In your XML file, you can link an XSLT stylesheet using an xml-stylesheet processing instruction, as shown below:
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
The href attribute points to an XSLT file — in this instance, transform.xsl — which houses the rules on how the XML data should be transformed. These rules might dictate the conversion of XML elements into HTML tables, lists, or other kinds of elements.
Constructing such transformations can be intricate, demanding a strong understanding of both XSLT and XPath. To partly assist with this, there are online tools such as the XSLT viewer provided by W3Schools that let you visualize the end result of the transformations before applying them to your XML data.
The versatility of XSLT allows for data presentation in various formats, not just HTML. It's a robust tool that unlocks numerous opportunities for data representation. For an in-depth look into XSLT's unique aspects, its interplay with XPath, and its advanced usage, we suggest the "What is XSLT?" article found in our additional resources below. It provides an extensive introduction to XSLT without assuming a prior knowledge of the subject.