Markup Language: HTML, SGML, XML Basics & Document Structure

What is a Markup Language?

Markup languages are human-readable text-based formats that define the structure and presentation of content using tags and attributes. Unlike programming languages, they do not execute logic but describe how data should be displayed or processed.

Key Characteristics

• Platform-independent: Works across browsers, devices, and operating systems.
• Hierarchical structure: Uses nested tags (e.g., <html><body><p>...</p></body></html>).
• Extensible: Can be customized (e.g., XML schemas).
• Separation of content and presentation: Modern markup (like HTML5) encourages CSS for styling.

1. Standard Generalized Markup Language (SGML)

SGML is the grandfather of markup languages, an ISO standard (ISO 8879) that defines rules for defining custom markup languages. It was used for large document management systems (e.g., government, legal, or technical manuals) before HTML and XML.

How SGML Works

• Defines a Document Type Definition (DTD) to specify valid tags and their hierarchy.
• Uses declarations (e.g., <!ELEMENT chapter (title, section+)>) to structure documents.
• Supports entities (reusable text snippets) and attributes (e.g., class="important").

Example: SGML DTD Snippet

<!ELEMENT book (title, author, chapter+)>
<!ELEMENT chapter (heading, paragraph*)>
<!ATTLIST paragraph style CDATA #IMPLIED>

Visual: SGML Document Structure

2. HyperText Markup Language (HTML)

HTML is the standard markup language for web pages, designed to structure content for browsers. It evolved from SGML but is now an application of XML (HTML5).

HTML Basics

• Tags: Enclose content (e.g., <p>, <h1>, <a>).
• Attributes: Provide extra info (e.g., href="https://example.com", class="menu").
• Doctype Declaration: Specifies HTML version (e.g., <!DOCTYPE html> for HTML5).

Example: Simple HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This is a <strong>paragraph</strong>.</p>
</body>
</html>

HTML vs. SGML

3. Extensible Markup Language (XML)

XML is a subset of SGML designed for data storage and exchange. Unlike HTML (which focuses on display), XML is used for structured data (e.g., APIs, config files, databases).

XML Features

• Self-descriptive tags: You define the meaning (e.g., <book>, <price>).
• No predefined tags: Must be defined in a schema (DTD or XSD).
• Case-sensitive: <Book> ≠ <book>.
• Well-formedness: Must follow strict syntax rules (e.g., closed tags, proper nesting).

Example: XML Document

<?xml version="1.0" encoding="UTF-8"?>
<library>
    <book id="101">
        <title>Web Tech</title>
        <author>John Doe</author>
        <price currency="USD">49.99</price>
    </book>
</library>

XML vs. HTML

In the Real World

1. eSewa (Nepal)

   • Uses XML for secure payment transaction data exchange between banks and eSewa’s servers.
   • Example: When you pay a bill, eSewa sends an XML-formatted request to your bank with details like amount, transaction_id, and user_email.

2. Khalti API (Nepal)

   • Relies on JSON/XML (often XML for legacy systems) to send merchant data to banks for authorization.
   • Example: A Daraz seller’s checkout uses Khalti’s XML API to validate your payment before processing the order.

3. NTC Website (Nepal)

   • Built with HTML5/CSS3, where semantic tags like <header>, <nav>, and <article> structure content for accessibility.
   • Example: The "Service Request" form uses <form> tags with action="/submit" to send data to NTC’s backend.

4. Document Structure in Markup Languages

All markup languages follow a hierarchical tree structure. Here’s how it works:

HTML Document Tree

graph TD
    A["html"] --> B["head"]
    A --> C["body"]
    B --> D["meta"]
    B --> E["title"]
    C --> F["h1"]
    C --> G["p"]
    G --> H["strong"]

XML Document Tree

5. Practical Example: Daraz Order Processing

Imagine a Daraz order workflow using XML for data exchange:

1. User clicks "Buy Now" → Daraz’s frontend sends an XML request to the backend:

   <order>
       <user_id>12345</user_id>
       <product_id>67890</product_id>
       <quantity>2</quantity>
       <shipping_address>
           <street>Kathmandu</street>
           <city>Lalitpur</city>
       </shipping_address>
   </order>
   

2. Daraz’s server validates the XML, checks stock, and sends a confirmation:

   <response>
       <status>success</status>
       <order_id>ORD789</order_id>
       <estimated_delivery>2024-05-20</estimated_delivery>
   </response>
   

3. Pathao’s API (for delivery) receives the order in XML format to assign a rider.

6. Advantages and Disadvantages

Markup Languages: Pros and Cons

Exam Tip

1. Memorize Key Tags:

   • HTML: <!DOCTYPE>, <html>, <head>, <body>, <meta>, <title>, <h1>-<h6>, <p>, <a>, <img>, <form>.
   • XML: <?xml?>, root element, nested tags, attributes with quotes.

2. Differentiate SGML/HTML/XML:

   • SGML = parent standard (theory).
   • HTML = web display (practice).
   • XML = data structure (APIs, configs).

3. Trace Examples:

   • For HTML: Draw a document tree for a given snippet.
   • For XML: Validate if a snippet is well-formed (e.g., closed tags, proper nesting).

4. Real-World Applications:

   • Link eSewa/Khalti to XML data exchange.
   • Link NTC website to semantic HTML.

5. Common Pitfalls:

   • Forgetting </tag> in XML/HTML (leads to parsing errors).
   • Using HTML tags in XML (invalid; XML requires custom tags).
   • Not declaring <?xml version="1.0"?> in XML files.