XQuery HTML

Transform XML data into HTML pages

🌐 XQuery to HTML

XQuery can generate HTML pages from XML data. This powerful feature lets you create dynamic web pages, reports, and user interfaces by transforming structured XML into browser-ready HTML. 


<html>
    <body>
        <h1>Welcome</h1>
    </body>
</html>

Why Generate HTML?

Converting XML to HTML makes data accessible in web browsers. XQuery provides flexible tools to create formatted pages, tables, lists, and interactive elements from your XML data sources.

📄

Web Pages

Create complete HTML pages

📊

Data Tables

Format data in HTML tables

📋

Lists

Generate ordered/unordered lists

🎨

Styled Output

Add CSS for presentation

🔹 Basic HTML Generation

Create a simple HTML page from XML:

📄 data.xml: 

<website>
    <title>My Website</title>
    <content>Welcome to my site!</content>
</website>

📄 XQuery: 

<html>
    <head>
        <title>{doc("data.xml")/website/title/text()}</title>
    </head>
    <body>
        <h1>{doc("data.xml")/website/title/text()}</h1>
        <p>{doc("data.xml")/website/content/text()}</p>
    </body>
</html>

HTML Output:

My Website

Welcome to my site!

🔹 Generate HTML Table

Transform XML data into an HTML table:

📄 employees.xml: 

<employees>
    <employee>
        <name>John Doe</name>
        <position>Developer</position>
        <salary>75000</salary>
    </employee>
    <employee>
        <name>Jane Smith</name>
        <position>Designer</position>
        <salary>70000</salary>
    </employee>
</employees>

📄 XQuery: 

<html>
    <head>
        <title>Employee List</title>
    </head>
    <body>
        <h2>Company Employees</h2>
        <table border="1">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
            </tr>
            {
                for $emp in doc("employees.xml")//employee
                return 
                    <tr>
                        <td>{$emp/name/text()}</td>
                        <td>{$emp/position/text()}</td>
                        <td>${$emp/salary/text()}</td>
                    </tr>
            }
        </table>
    </body>
</html>

HTML Output:

Company Employees

Name Position Salary
John Doe Developer $75000
Jane Smith Designer $70000

🔹 Generate HTML List

Create ordered or unordered lists:

📄 tasks.xml: 

<tasks>
    <task priority="high">Complete project</task>
    <task priority="medium">Review code</task>
    <task priority="low">Update docs</task>
</tasks>

📄 XQuery: 

<html>
    <body>
        <h2>Task List</h2>
        <ul>
            {
                for $task in doc("tasks.xml")//task
                return 
                    <li>
                        <strong>{$task/@priority/string()}: </strong>
                        {$task/text()}
                    </li>
            }
        </ul>
    </body>
</html>

HTML Output:

Task List

  • high: Complete project
  • medium: Review code
  • low: Update docs

🔹 Add CSS Styling

Include CSS for better presentation: 

<html>
    <head>
        <title>Styled Page</title>
        <style>
            body {{ 
                font-family: Arial, sans-serif; 
                margin: 20px;
            }}
            .product-card {{ 
                border: 2px solid #ddd; 
                padding: 15px; 
                margin: 10px 0;
                border-radius: 8px;
            }}
            .product-name {{ 
                color: #333; 
                font-size: 18px; 
                font-weight: bold; 
            }}
            .price {{ 
                color: #007bff; 
                font-size: 16px; 
            }}
        </style>
    </head>
    <body>
        <h1>Product Catalog</h1>
        {
            for $product in doc("products.xml")//product
            return 
                <div class="product-card">
                    <div class="product-name">{$product/name/text()}</div>
                    <div class="price">${$product/price/text()}</div>
                </div>
        }
    </body>
</html>

🔹 Conditional HTML

Generate different HTML based on data: 

<html>
    <body>
        <h2>Product Status</h2>
        {
            for $product in doc("products.xml")//product
            return 
                <div>
                    <h3>{$product/name/text()}</h3>
                    {
                        if ($product/stock > 0) then
                            <p style="color: green;">In Stock: {$product/stock/text()} units</p>
                        else
                            <p style="color: red;">Out of Stock</p>
                    }
                </div>
        }
    </body>
</html>

🔹 Generate Links

Create HTML links from XML data: 

<html>
    <body>
        <h2>Navigation</h2>
        <nav>
            {
                for $page in doc("sitemap.xml")//page
                return 
                    <a href="{$page/@url}">
                        {$page/title/text()}
                    </a>
            }
        </nav>
    </body>
</html>

🔹 Complete HTML Page Example

Full example with multiple sections: 

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Company Report</title>
        <style>
            body {{ font-family: Arial; padding: 20px; }}
            table {{ width: 100%; border-collapse: collapse; }}
            th, td {{ padding: 10px; border: 1px solid #ddd; }}
            th {{ background-color: #4CAF50; color: white; }}
        </style>
    </head>
    <body>
        <h1>Annual Report 2024</h1>
        
        <section>
            <h2>Summary</h2>
            <p>Total Employees: {count(doc("data.xml")//employee)}</p>
            <p>Total Salary: ${sum(doc("data.xml")//employee/salary)}</p>
        </section>
        
        <section>
            <h2>Employee Details</h2>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Salary</th>
                </tr>
                {
                    for $emp in doc("data.xml")//employee
                    order by $emp/salary descending
                    return 
                        <tr>
                            <td>{$emp/name/text()}</td>
                            <td>{$emp/position/text()}</td>
                            <td>${$emp/salary/text()}</td>
                        </tr>
                }
            </table>
        </section>
    </body>
</html>

🔹 HTML Generation Tips

  • DOCTYPE: Add <!DOCTYPE html> for valid HTML5
  • Encoding: Use <meta charset="UTF-8"/>
  • Escaping: XQuery handles special characters automatically
  • Attributes: Use {} for dynamic attribute values
  • CSS: Include styles in <style> or link external files
  • Validation: Test output in browsers for compatibility

🧠 Test Your Knowledge

How do you insert dynamic values in HTML attributes with XQuery?