Home > Articles, Internet Applications > How to transform XML into HTML5 using XSLT.

How to transform XML into HTML5 using XSLT.

In this article I’ll show you how you can make an XML to HTML5 transformation by using the XSLT language.

Let’s start for example with the following XML document file (movies.xml) which contains some movies data :

<?xml version="1.0" encoding="UTF-8"?>

<movies> 
  <movie> 
    <title>Aliens</title> 
    <year>1986</year> 
    <rank>8.2</rank> 
  </movie> 
  <movie> 
    <title>Apollo 13</title> 
    <year>1995</year> 
    <rank>7.5</rank> 
  </movie> 
  <movie> 
    <title>Pi</title> 
    <year>1998</year> 
    <rank>7.1</rank> 
  </movie> 
</movies>

Our next step is to use an XSL transformation template file (movies.xsl) adapted for the output of HTML5 :

<?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"
              doctype-system="about:legacy-compat"
              encoding="UTF-8"
              indent="yes" />

  <xsl:template match="/">
    <html>
      <head>
        <title>List of Movies.</title>

        <link rel="stylesheet" href="movies.css" />
      </head>
      <body>
        <table class="movies">
          <thead>
            <tr>
              <th>Title</th>
              <th>Year</th>
              <th>Rank</th>
            </tr>
          </thead>
          <tbody>
            <xsl:for-each select="movies/movie">
            <xsl:sort select="rank"/>
            <tr>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="year"/></td>
              <td><xsl:value-of select="rank"/></td>
            </tr>
            </xsl:for-each>
          </tbody>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

The template uses a CSS style sheet file (movies.css) which is combined with the HTML5 output :

table.movies {
  background-color: #CDCDCD;
  font-family: arial;
  margin: 10px 0pt 15px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}

table.movies thead tr th {
  background-color: #E6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  padding: 10px;
}

table.movies tbody tr td {
  background-color: #FFF;
  color: #3D3D3D;
  vertical-align: top;
  padding: 10px;
}

Our last step is to link the initial XML document file with the XSL transformation template file :

<?xml version="1.0" encoding="UTF-8"?> 

<?xml-stylesheet type="text/xsl" href="movies.xsl"?>

<movies> 
  <movie> 
    <title>Aliens</title> 
    <year>1986</year> 
    <rank>8.2</rank> 
  </movie> 
  <movie> 
    <title>Apollo 13</title> 
    <year>1995</year> 
    <rank>7.5</rank> 
  </movie> 
  <movie> 
    <title>Pi</title> 
    <year>1998</year> 
    <rank>7.1</rank> 
  </movie> 
</movies>

Now, in order to test it and see the results, create a directory in your system and add the files movies.xml, movies.xsl and movies.css in it. Open the movies.xml file with your browser and see the XML to HTML5 transformation on runtime. In order to see the HTML5 structure of the transformation use a web development tool on Firefox. You may also use the default development tool of Chrome to inspect the web page.

  1. Laura Gutman
    October 9, 2013 at 23:50

    Short, sweet, and extremely useful … thanks!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: