XML XSLT

Transforming XML with XSLT

XSLT (Extensible Stylesheet Language Transformations) is a powerful language designed specifically for transforming XML documents into other formats, such as HTML, plain text, or even other XML structures.

Why Use XSLT?

While CSS can style XML for direct display in browsers (see the ‘Displaying XML’ chapter), XSLT offers much more control over the output structure:

Structural Transformation: Add, remove, reorder, or rename elements and attributes.
Data Manipulation: Sort data, perform conditional processing (if/then logic), group elements.
Content Generation: Create new content based on the XML source.
Format Conversion: Transform XML into HTML, XHTML, text, CSV, JSON (with XSLT 3.0), or other XML vocabularies.
Reusability: Define templates for processing specific elements.

XSLT uses XPath expressions to select nodes (elements, attributes, text) from the input XML document that need to be processed.

XSLT exists in several versions (1.0, 2.0, 3.0), each adding more features. XSLT 1.0 is widely supported, while 2.0 and 3.0 offer significant enhancements, especially for data manipulation and output formats. Browser support is typically limited to XSLT 1.0.

Learn more about XSLT

Consider the following XML document (breakfast.xml):

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
  <food available="true">
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
    <calories>650</calories>
  </food>
  <food available="true">
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>Light Belgian waffles covered with strawberries and whipped cream</description>
    <calories>900</calories>
  </food>
  <food available="false"> <!-- Example of unavailable item -->
     <name>Berry-Berry Belgian Waffles</name>
     <price>$8.95</price>
     <description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
     <calories>900</calories>
  </food>
  <food available="true">
    <name>French Toast</name>
    <price>$4.50</price>
    <description>Thick slices made from our homemade sourdough bread</description>
    <calories>600</calories>
  </food>
</breakfast_menu>

We can use the following XSLT stylesheet (breakfast_transform.xsl) to transform this XML into an HTML page, displaying only available items:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" encoding="UTF-8" indent="yes"/>

<xsl:template match="/">
  <html>
    <head>
      <title>Breakfast Menu</title>
      <style>
        body { font-family: Arial, sans-serif; font-size: 12pt; background-color: #EEEEEE; }
        .item { margin-bottom: 1em; border: 1px solid #ccc; background-color: white; padding: 5px; }
        .item-header { background-color: teal; color: white; padding: 4px; font-size: 11pt; }
        .item-name { font-weight: bold; }
        .item-details { margin-left: 20px; margin-bottom: 1em; font-size: 10pt; }
        .calories { font-style: italic; color: #555; }
      </style>
    </head>
    <body>
      <h1>Today's Breakfast Menu</h1>
      <!-- Apply templates to process only 'food' elements where @available='true' -->
      <xsl:apply-templates select="breakfast_menu/food[@available='true']"/>
    </body>
  </html>
</xsl:template>

<!-- Template to process each selected 'food' element -->
<xsl:template match="food">
  <div class="item">
    <div class="item-header">
      <span class="item-name"><xsl:value-of select="name"/></span> -
      <span><xsl:value-of select="price"/></span>
    </div>
    <div class="item-details">
      <p><xsl:value-of select="description"/></p>
      <p class="calories">(<xsl:value-of select="calories"/> calories per serving)</p>
    </div>
  </div>
</xsl:template>

</xsl:stylesheet>

Explanation:

<?xml-stylesheet ...?>: This processing instruction links the XSLT file to the XML file for client-side transformation (see ‘Displaying XML’ chapter).
<xsl:stylesheet>: Defines the document as an XSLT stylesheet.
<xsl:output method="html">: Specifies that the output should be HTML.
<xsl:template match="/">: Matches the root node of the XML document and defines the basic HTML structure.
<xsl:apply-templates select="breakfast_menu/food[@available='true']"/>: This is key. It selects only the food elements that are children of breakfast_menu AND have an attribute available with the value 'true'. It then tells the processor to find matching templates for these selected nodes.
<xsl:template match="food">: This template matches each food element selected by apply-templates.
<xsl:value-of select="..."/>: Extracts the text content of the selected child element (e.g., name, price).
The generated HTML uses CSS classes for styling, which is generally better practice than inline styles.

This transformation can happen either on the server before sending HTML to the browser, or directly in the browser if it supports XSLT 1.0 and the XML document includes the <?xml-stylesheet ...?> processing instruction.

XML XSLT

Transforming XML with XSLT

Why Use XSLT?

XSLT Example: Transforming Breakfast Menu to HTML