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.