XML Display
Web browsers know how to render HTML, but XML is a different story — on its own, XML carries no built-in idea of how it should look.
Raw XML Has No Visual Rules
HTML tags like <p>, <table>, and <h1> come with a built-in meaning that every browser understands: paragraphs get spacing, tables get borders, headings get bold text. XML tags carry no such promise. A tag named <price> or <customer> is invented by the document author, so no browser vendor could possibly hardcode what it should look like. XML was designed to describe data, not to display it.
Because of this, when you open a plain XML file directly in a browser, you don't see a formatted page — you see the document's structure instead, usually rendered as an indented, collapsible tree of tags and text.
How Browsers Render a Raw XML File
Modern browsers still make an XML file readable, even without styling instructions. They parse the file to confirm it is well-formed, then display it as a color-coded, indented tree. Element names typically appear in one color, attribute names in another, and text content in a third, with small triangles or plus/minus icons that let you collapse or expand branches. This default view is a debugging aid, not a presentation — it's the browser's way of saying "here is valid data" rather than "here is a designed page."
Why Styling or Transformation Is Needed
To present XML data as a real web page — with layout, fonts, colors, and structure meant for a human reader — you need to attach separate instructions that tell the browser how each element should be displayed. There are two established approaches.
- CSS — attach a stylesheet with rules like customer { display: block; font-weight: bold; } to style elements directly, similar to styling HTML.
- XSLT — attach a transformation stylesheet that converts the XML into HTML (or another XML vocabulary) before it is displayed, allowing reordering, filtering, and computed output.
- JavaScript — read the XML with the DOM, then dynamically build HTML elements from its data on the page.
- Server-side conversion — transform XML to HTML on the server before ever sending it to the browser.
Linking a CSS stylesheet to an XML document.
Attaching CSS to XML
<!DOCTYPE html>
<html>
<body>
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="catalog.css"?>
<catalog>
<book>
<title>Learning XML</title>
<price>29.99</price>
</book>
</catalog>
</pre>
</body>
</html>The matching CSS file styles raw element tags directly.
catalog.css
<!DOCTYPE html>
<html>
<body>
<pre>
book {
display: block;
margin-bottom: 12px;
border: 1px solid #ccc;
padding: 8px;
}
title {
display: block;
font-size: 18px;
font-weight: bold;
}
price {
display: block;
color: green;
}
</pre>
</body>
</html>Linking an XSLT stylesheet instead, for full transformation into HTML.
Attaching XSLT to XML
<!DOCTYPE html>
<html>
<body>
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="catalog.xsl"?>
<catalog>
<book>
<title>Learning XML</title>
<price>29.99</price>
</book>
</catalog>
</pre>
</body>
</html>Exercise: XML Display
Why does a browser typically show a plain tree view when opening a raw XML file?
