How to Use XSLT to Display XML Data on an HTML Webpage

XML is a language used to structure, store, and exchange data. XSLT is another language that allows you to transform your XML data into other formats, such as HTML.

You can use XSLT to display XML data on an HTML webpage. Using XML and XSLT to display your data can be useful, as it allows you to structure the data in a way that makes sense for your specific needs.

How to Add Example Data to an XML File

To display XML data on a webpage, you first need to create the XML file and add data to it.

Create a new file called data.xml.

Inside the XML file, declare the encoding and XML version:

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

Link the XML file to an XSL stylesheet file, which you will create in a later step.

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

Add data to the XML file. XML contains structured data, and stores each data point in a separate tag. This example includes a root tag called games. Inside the games tag, store each individual game inside its own game tag. Store data for each game such as the name and developer in separate tags.

        <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xmlstylesheet.xsl"?>
<games>
   <game>
      <name>The Last of Us Part II</name>
      <developer>Naughty Dog</developer>
   </game>
   <game>
      <name>Ghost of Tsushima</name>
      <developer>Sucker Punch Productions</developer>
   </game>
   <game>
      <name>Death Stranding</name>
      <developer>Kojima Productions</developer>
   </game>
</games>

How to Use XSLT to Read Data From the XML File

Create a new XSL file to loop through each data point in the XML page and display the data.

In the same folder as your XML file, create a new file called xmlstylesheet.xsl.

Inside the file, declare the XSL version, and add the basic XSL tag structure:

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

Inside the main XSL tag, add a template tag. This is where you can add custom HTML code to display and style your XML data.

        <xsl:template match="/">
      <html>
         <body>
             // Your HTML code in here
         </body>
      </html>
</xsl:template>

Inside the body tag, use the xsl:for-each tag selector. This will act as a for-loop to loop through each game tag nested underneath the games tag.

        <xsl:for-each select="games/game">
                
</xsl:for-each>

Inside the for-each loop, display the name and developer data points, using the xsl:value-of tag selector.
```
        <xsl:value-of select="name" />
<xsl:value-of select="developer" />
    
```

How to Display Data on an HTML Webpage

You will not be able to open the XSLT or XML file directly in the browser to view the data as part of a webpage. Create a new HTML file, and render the data using an iframe tag.

In the same folder as your XML and XSL files, create a new file called index.html.

Add the basic structure of an HTML file. If you have not used HTML before, you can brush up on introductory HTML concepts.

        <!DOCTYPE html>
<html>
    <head>
       <title>XML and XSLT Example</title>
    </head>
    <body>
       
       
    </body>
</html>

Inside the body tag, use an iframe tag to link to the XML file and XSL file:

        <h1>XML and XSLT Example</h1>
<p>The following content is generated from an XML file:</p>
<iframe src="data.xml" xslt="xmlstylesheet.xsl"></iframe>

Create a new file called styles.css.

Inside the file, add some CSS to style your webpage. Feel free to modify your CSS using other interesting CSS tips and tricks.

        html,
body {
   height: 100%;
   margin: 0;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

p {
    margin-bottom: 24px;
}

Link your HTML file to the CSS styling by adding the following to the HTML head tag.
```
        <link rel="stylesheet" href="styles.css">
    
```
Open your HTML file using a browser to view your XML data. Some browsers do not support XSLT, but some browsers such as Firefox do.

Display Data in HTML Webpages

There are many ways to display data in HTML webpages, XML and XSLT being one of them. Feel free to explore the other ways you can do this, such as storing and displaying user input using JavaScript.