HTModL alternative syntaxes

Ken Webb 2011-04-29T22:14:27Z

The examples on this page cannot all be reversibly transformed into each other because some of the examples use upper and lower case, while others use only lowercase. To be completely interconvertible, all the examples should have class or element names in the same case, for example "house" rather than "House", or "LivingRoom" rather than "livingroom".

HTModL syntax

This is an HTModL model of a house, shown here as a complete HTML page.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>A house</title>
</head>
<body>
  <div class="House">
    <div class="Roof"></div>
    <div class="SecondFloor">
      <div class="BedRoom">
        <div class="Window"></div>
      </div>
      <div class="BedRoom">
        <div class="Window"></div>
      </div>
      <div class="BedRoom">
        <div class="Window"></div>
      </div>
    </div>
    <div class="FirstFloor">
      <div class="LivingRoom">
        <div class="Window"></div>
      </div>
      <div class="FrontEntrance">
        <div class="Door"></div>
      </div>
      <div class="Kitchen">
        <div class="Window"></div>
      </div>
    </div>
  </div>
</body>
</html>

HTML-span equivalent syntax

This is an equivalent model using the HTML span element in place of the HTML div element.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>A house</title>
</head>
<body>
  <span class="House">
    <span class="Roof"></span>
    <span class="SecondFloor">
      <span class="BedRoom">
        <span class="Window"></span>
      </span>
      <span class="BedRoom">
        <span class="Window"></span>
      </span>
      <span class="BedRoom">
        <span class="Window"></span>
      </span>
    </span>
    <span class="FirstFloor">
      <span class="LivingRoom">
        <span class="Window"></span>
      </span>
      <span class="FrontEntrance">
        <span class="Door"></span>
      </span>
      <span class="Kitchen">
        <span class="Window"></span>
      </span>
    </span>
  </span>
</body>
</html>

XML equivalent syntax

This is the same model using XML syntax rather than the HTML div element.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<House>
  <Roof/>
  <SecondFloor>
    <BedRoom>
      <Window/>
    </BedRoom>
    <BedRoom>
      <Window/>
    </BedRoom>
    <BedRoom>
      <Window/>
    </BedRoom>
  </SecondFloor>
  <FirstFloor>
    <LivingRoom>
      <Window/>
    </LivingRoom>
    <FrontEntrance>
      <Door/>
    </FrontEntrance>
    <Kitchen>
      <Window/>
    </Kitchen>
  </FirstFloor>
</House>

JSON equivalent syntax

This is the same structure represented using JSON.

{
    "House": [
        {
            "Roof": null 
        },
        {
            "SecondFloor": [
                {
                    "BedRoom": {
                        "Window": null
                    } 
                },
                {
                    "BedRoom": {
                        "Window": null
                    } 
                },
                {
                    "BedRoom": {
                        "Window": null
                    } 
                } 
            ] 
        },
        {
            "FirstFloor": [
                {
                    "LivingRoom": {
                        "Window": null
                    } 
                },
                {
                    "FrontEntrance": {
                        "Door": null
                    } 
                },
                {
                    "Kitchen": {
                        "Window": null
                    } 
                } 
            ] 
        } 
    ]
}

HTMLUnknownElement equivalent syntax

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>A house</title>
</head>
<body>
  <house>
    <roof></roof>
    <secondfloor>
      <bedroom>
        <window></window>
      </bedroom>
      <bedroom>
        <window></window>
      </bedroom>
      <bedroom>
        <window></window>
      </bedroom>
    </secondfloor>
    <firstfloor>
      <livingroom>
        <window></window>
      </livingroom>
      <frontentrance>
        <door></door>
      </frontentrance>
      <kitchen>
        <window></window>
      </kitchen>
    </firstfloor>
  </house>
</body>
</html>

return to main page