Introduction to XML and XSL

HTML, as you know, is short for HyperText Markup Language. The "markup" refers to the library of tags that describes how data should be organized or structured on the page. The browser then parses the information out of those tags and presents it to the user in a friendly and legible fashion. What HTML doesn't do, however, is give any information about what the data means, called metadata. Without metadata, search engines and other data-filtering techniques have to rely on keyword searches or content searches to retrieve information for the user.

XML is about metadata and the fact that different people have different needs for how they categorize and organize that data. Like HTML, XML is a set of tags and declarations. Rather than being concerned with how the data is structured and subsequently parsed by the browser, XML provides information on what the data means and how it relates to other data.

In the near term, XML provides an immediate opportunity for intranet database-driven site development. As could be the case with our fictitious Dorknozzle company, departments (including even yours) can use the same database in different ways. Accounting needs payable and receivable information, Sales wants to monitor information by salesperson to figure out commission structures, and Marketing wants data organized by product and industry segment to figure out future release strategies. Using XML, you can customize the presentation of the queried data in a fashion most useful to the person making the query.

As is true for HTML, XML's purpose is to describe the content of a document. Unlike HTML, XML does not describe how that content should be displayed. Instead, it describes what that content is. Using XML, the web developer can mark up the contents of a document, describing that content in terms of its relevance as data. Take a look at the following HTML element:

 <P>Cammy the Content Manager</P> 

This example describes the contents within the tags as a paragraph. This is fine if all we are concerned with is displaying the words Cammy the Content Manager on a web page. But what if we want to access those words as data? Using XML, we can mark up the words Cammy the Content Manager in a way that better reflects their significance as data:

 <employee>Cammy the Content Manager</employee> 

Notice the <employee> tag. Surely an <employee> tag doesn't exist in any markup language, does it? The beauty of XML is that it does not limit you to a set library of tags like HTML does. When marking up documents in XML, you can choose the tag name that best describes the contents of the element. For instance, in the preceding example, you might want to differentiate between the employee's name/title and her employee ID. You can do this by using an attribute to describe the employee ID. Because XML allows you to place attributes on elements, you could identify Cammy the Content Manager with the employee ID of 1001 as follows:

 <employee >Cammy the Content Manager</employee> 

As a second example, take a look at the following document which describes employees working at Dorknozzle:

 <h1>Dorknozzle Employees</h1> <table>         <tr>                 <td>Ada the Admin Assistant</td>                 <td>Cammy the Content Manager</td>                 <td>Damon the Developer</td>         </tr> </table> 

This document provides us with information, but that information isn't too clear. Do these employees have unique employee IDs? Do they belong to a department? As it relates to describing data, the following code might be better suited for the preceding example:

 <employees>         <company>Dorknozzle</company>         <employee>                 <name  department="Administration">Ada</name>                 <name  department="Marketing">Cammy</name>                 <name  department="Engineering">Damon</name>         </employee> </employees> 

Because XML is concerned with how data should be defined, it does not make a good presentational language. If you created an XML document from the preceding example and tried to view it in the browser, you would get little more than a simple collapsible tree as shown in Figure A.1.

Figure A.1. Viewing an XML document in a browser displays a collapsible tree.

As you can see, XML is not a presentational language; instead it is used to define data. Presenting XML data so that it can be viewed in the browser can be accomplished by using the eXtensible Stylesheet Language (XSL). XSL allows you to apply HTML-like features to an XML document so that it can be presented in a friendly format to the user in a browser window. Consider the following data, which represents information about an employee (Cammy) within the fictitious Dorknozzle company:

 <?xml version="1.0" ?> <?xml-stylesheet type="text/xsl" href="employeesTransform.xsl"?> <employees>         <employee >                 <name>Cammy</name>                 <title>Content Manager</title>                 <department>Marketing</department>                 <email>[e-mail]</email>         </employee> </employees> 

Although this an example of a simple XML file, you could potentially have hundreds, perhaps thousands of employees in your Dorknozzle XML file. With that said, you might need a way of presenting that data in a browser-friendly format. You could apply the following style sheet in this situation:

 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>Dorknozzle Employees</h2> <table border="1">         <tr bgcolor="Silver">                 <th align="left">Name</th>                 <th align="left">Title</th>                 <th align="left">Department</th>                 <th align="left">Phone</th>         </tr>         <xsl:for-each select="catalog/cd">         <tr>                 <td><xsl:value-of select="name" /></td>                 <td><xsl:value-of select="title" /></td>                 <td><xsl:value-of select="department" /></td>                 <td><xsl:value-of select="phone" /></td>         </tr>         </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> 

As Figure A.2 shows, the employee's data is now presented in a cleanly formatted HTML table.

Figure A.2. XSL provides HTML-like formatting features for XML documents.

XML is about defining what data means. Unlike HTML, which deals with structuring data, XML deals with defining it. Unfortunately, without XSL, the XML data is of little use in a browser. And as you probably noticed, working with XSL, unless you're a seasoned XML/XSL developer, seems to come with a steep learning curve. This is where Dreamweaver comes in.