HTModL

Ken Webb 2011-04-30T14:43:29Z

HTModL is valid HTML repurposed for modeling and app (web application) development, rather than HTML in its traditional role as markup. HTML stands for HyperText Markup Language. HTModL changes the focus to HTML as a Modeling Language.

HTModL syntax

The simple conventions that define HTModL are:

An HTModL node consists of an HTML div element, with a class attribute containing at least one non-empty class.
If there is more than one class, only the first class in the list is the HTModL class.
An HTModL structure consists of one or more HTModL nodes, organized into a single tree.
A leaf node in an HTModL structure may be any valid HTML or HTModL element.
Two HTModL nodes are in the same HTModL structure if and only if they are both descendants of the same HTModL root node (or if either of them is the root node), and if all ancestors of both nodes are HTModL nodes up to and including the common root node.

HTModL examples

I have put together some very simple HTModL examples. There are also some larger apps that use the HTModL concept.

Many web sites already use HTModL or near-HTModL structures to organize their web sites. In most cases, trees of div elements are used to organize markup rather than to facilitate modeling or app development.

Some valid HTModL structures

<div class="a"></div>

<div class="Abc"></div>

<div class="Abc def"></div>
"Abc" is the single mandatory HTModL class.

<div class="def Abc"></div>
"def" is the single mandatory HTModL class.

<div class="Abc" id="myId"></div>

<div class="Abc" id="myId" data-one='One' Two="two" three='THrEE'></div>
Note however that browsers will transform any uppercase letters in a class name to lowercase.
Example: Two="two" will become two="two"

<div class="House">
  <div class='SecondFloor'></div>
  <div class='FirstFloor'></div>
</div>

<div class="House">
  <h3>This is the structure of a house.</h3>
  <div class='SecondFloor'><p>Many houses have a second floor.</p></div>
  <div class='FirstFloor'><p>All houses have a main or first floor.</p></div>
</div>

<div class="House">
  <div class='SecondFloor'></div>
  <div class='FirstFloor'>
    <ul>
      <li>
        <div class='Kitchen'>
          <div class='fridge'></div>
          <div class='stove'></div>
        </div>
      </li>
      <li><div class='LivingRoom'></div></li>
    </ul>
  </div>
</div>

There are three separate HTModL structures here, rooted by "House", "Kitchen", and "LivingRoom". "Kitchen" and "LivingRoom" are in separate HTModL structures because they have ancestors that are '''not''' HTModL structures (the ul and li elements).

Some structures that are not valid HTModL

<div class="a"/>
In HTML and HTModL, a "div" element must have both a start and an end tag.

<div id="a"></div>
In HTModL, a "div" element must have a class attribute.

<div class=""></div>
<div class="  "></div>
In HTModL, a class attribute must have at least one non-null non-empty non-whitespace class value.

Alternative HTModL syntaxes

Any structure that can be reversibly transformed into an HTModL structure can be thought of as a valid HTModL equivalent. ex: XML JSON span HTMLUnknownElement etc.

Some examples

HTModL as an object-oriented technology

HTModL nodes may be thought of as objects in object-oriented (OO) programming (OOP), and object-oriented analysis and design (OOAD). The HTML class specifies the single OO class that the object is an instance of. In most OO technologies, an object must be an instance of exactly one class. HTModL nodes may contain additional attributes, which are equivalent to attributes in an OO system. HTModL nodes may have associated scripts, which are equivalent to methods in an OO system. HTModL may have associated class objects, which are themselves HTModL nodes organized into an inheritence hierarchy.

As an example of this interpretation,

<div class="Car" id="5274"></div>

is a unique object that's an instance of the Car class. If HTModL nodes are used as OO objects, and if you wish to define an OO inheritance hierarchy, then the nodes must use id rather than class. For example:

<div id="Car">
  <div id="Ford">
    <div id="Taurus"></div>
    <div id="Mustang"></div>
  </div>
  <div id="Toyota">
    <div id="Camry"></div>
    <div id="Corolla"></div>
  </div>
</div>

Given this inheritance hierarchy, a valid instance might be:

<div class="Mustang" id="75298052" engine="V6" roof="convertible"></div>

Using id to identify classes and class to identify object instances makes it easier to located the nodes when embedded inside an HTML page. To locate the unique node representing a class (using jQuery):

$('div#Mustang');

To locate all instances of that class:

$('div.Mustang');

A comment on divitis
HTModL validation
Tools
See Also, Resources

A comment on divitis

Various authors have pointed out that the HTML div element can be overused, and that sometimes other HTML elements are more semantically appropriate. The overuse of div is sometimes referred to as divitis.

HTModL makes extensive use of the div element, as a repurposing of HTML for modeling or app development, instead of as markup. An HTModL fragment is typically a model of some domain other than the markup domain, and div is therefore probably the most semantically valid HTML element to use. The use of div with a class attribute allows HTML to be used to model any domain.

A developer may choose to add HTML markup or CSS presentation to HTModL nodes, in order to make these nodes visible on a web page. This might be done to help with debugging the application, or selectively as part of the end-user UI. Many other ways are available to allow users to interact with a HTModL model or app, many of which may be more appropriate than directly marking up the HTModL div nodes. The HTModL specification itself has nothing directly to say about user interfaces (UIs) for HTModL. HTModL is about modeling, while HTML and CSS are more about viewing the model. In a Model-View-Controller (MVC) approach, HTModL is the model or domain logic.

HTModL validation

An HTModL fragment is always valid HTML (specifically HTML 4.01 or XHTML 1.0). The major difference, is the additional requirement that an HTModL node must have a class attribute with at least one valid class value. If you want to validate an HTML document containing one or more HTModL fragments, you might want to use a slightly edited version of the HTML or XHTML DTD.

Tools

Xholon webEdition is a jQuery plugin that supports the use of HTModL concepts for building apps and models.

Xholon is a Java framework that implements the HTModL concept in Java.