DHTML

DHTML, short for Dynamic HTML, was the name browser vendors gave in 1997 to a way of building web pages rather than to a programming language in the strict sense. A DHTML page combined HTML markup, Cascading Style Sheets and a client-side scripting language, usually JavaScript or Microsoft’s JScript and VBScript. A document object model joined them together and let the script reach into a page that had already loaded and change its content, style and position, without fetching a new page from the server. In Microsoft’s 1997 words, Dynamic HTML “lets authors control every element of a Web page and change the page’s content and style at any time, even after the page has loaded, without refreshing the page.”

DHTML matters because it was the first time the web page became a programmable surface. Script-driven drop-down menus, animated banners, collapsible outlines, drag-and-drop and early script-only browser games all came out of it. It also produced the worst years of cross-browser incompatibility, and the W3C Document Object Model was created largely to clear up that mess. The techniques survived after the name fell out of use. With asynchronous server calls added, they were renamed Ajax in 2005, and today they are simply how web front ends work.

History & Origins

Before “Dynamic”

By 1996 Netscape Navigator 2 and 3 had JavaScript, but the script could see only a thin “Level 0” view of the page: forms, links, images and anchors. A script could validate a form or swap an image on mouse-over. It could not move a paragraph, restyle a heading or insert new text into a page that had finished rendering. At the same time, style and layout standards were arriving. CSS level 1 became a W3C Recommendation on 17 December 1996. A W3C working draft on positioning HTML elements with CSS followed on 31 January 1997, co-authored by engineers from both Netscape (Scott Furman) and Microsoft (Scott Isaacs).

Netscape had also tried a script-first route to styling. In August 1996 it submitted JavaScript-Based Style Sheets (JSSS) to the W3C, written by Lou Montulli, Brendan Eich, Scott Furman, Donna Converse and Troy Chevalier. In JSSS, styles were JavaScript property assignments such as document.tags.H1.fontSize = "20pt".

Two companies, one name, two models

Microsoft announced Internet Explorer 4.0 on 8 April 1997 and released the Platform Preview for developers the same day. The press release presented support for “Dynamic HTML” as the foundation for “next-generation, interactive Internet content and applications” and called Microsoft’s implementation “an open, language-independent object model” developed in collaboration with the W3C. IE4’s new rendering engine, Trident, reflected every element of the page into script through the document.all collection. Any CSS property could be changed from script, and the page reflowed on the spot. IE4 shipped on 22 September 1997.

Netscape shipped Communicator 4.0 (Navigator 4) in June 1997 with its own “Dynamic HTML in Netscape Communicator”. Its model centred on layers: a proprietary <LAYER> element (or any absolutely positioned element) that became a separate document object, reachable through document.layers. A layer could be moved, clipped, shown, hidden or rewritten with layer.document.write(), but ordinary elements inside the page could not be restyled after load. Navigator 4 also implemented JSSS, and according to Håkon Wium Lie and Bert Bos it implemented CSS internally by translating rules into JavaScript.

Both companies used the same marketing term for two incompatible object models. A W3C FAQ later defined DHTML as “a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated”, which is a careful description of a term the W3C itself never standardised.

Standards catch up

The W3C answered with a run of Recommendations. HTML 4.0 (18 December 1997) standardised the intrinsic event attributes. CSS2 (12 May 1998) absorbed positioning and z-ordering. DOM Level 1 (1 October 1998) defined a single, platform- and language-neutral object model for HTML and XML documents. The DOM FAQ says plainly that “compatibility with DHTML was a motivating factor in the development of the DOM.” The browser-specific models of the version-4 era became known as the “intermediate DOMs”.

Microsoft kept extending its own DHTML in the meantime. Internet Explorer 5 (18 March 1999) added DHTML behaviors: script components in .htc files, attached to elements through a CSS behavior property and submitted to the W3C as the HTML Components Note in October 1998. It also added HTML Applications, which run DHTML pages as trusted desktop programs, and the XMLHTTP object.

Design Philosophy

DHTML had no designer and no specification. What held it together was an idea shared by the vendors:

• The page is a live object tree. Once HTML is parsed, it stops being text and becomes objects that a script can read and change.
• Separation of concerns, mostly. HTML holds the structure, CSS the presentation and script the behaviour. In practice the 1997 to 2000 code mixed all three freely, with inline onmouseover handlers and style properties set from script.
• Client-side only. In the DHTML model all the work happens in the browser after the page loads. To get new data from the server, the page normally had to be reloaded or submitted. That limit is exactly what Ajax later removed.
• Language independence, in theory. Microsoft described its object model as language-independent, and IE4 could script it equally from JScript or VBScript. In practice JavaScript and JScript dominated because Netscape supported only JavaScript.

Key Features

The classic cross-browser idiom

Supporting both object models meant branching on whichever collection existed, a practice later called object detection:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Move an element 10 pixels to the right, c. 1998-2001
function nudge(id) {
  if (document.getElementById) {            // W3C DOM (IE5+, Netscape 6+)
    var el = document.getElementById(id);
    el.style.left = (parseInt(el.style.left, 10) + 10) + "px";
  } else if (document.all) {                // Internet Explorer 4
    document.all[id].style.pixelLeft += 10;
  } else if (document.layers) {             // Netscape Navigator 4
    document.layers[id].left += 10;
  }
}

Libraries of DHTML menus, tickers and drag-and-drop scripts were often built from many branches like this one.

Microsoft-specific DHTML

1
2
3

<!-- IE4+ only: a visual filter and an .htc behavior (IE5+) -->
<img src="logo.gif" style="filter: alpha(opacity=50)">
<li style="behavior: url(hilite.htc)">Hover me</li>

Filters and transitions were rendered through DirectX. In 2012 Microsoft’s IE team wrote of their “inferior performance compared to their standards-based replacements”, though the post publishes no benchmark figures. Microsoft’s documentation declares binary behaviors obsolete as of Internet Explorer 10.

Evolution

1. 1997–1998: the rival models. IE4 against Navigator 4, and two code paths for every effect.
2. 1998–2001: standardisation. DOM Level 1, CSS2 and DOM Level 2 give a common target. IE5, IE6 and Netscape 6, which was rebuilt on Gecko and dropped <LAYER> and document.layers, converge on getElementById.
3. 2001–2005: “DOM scripting”. Developers of the web-standards movement moved away from the term “DHTML”, which by then was associated with browser sniffing and brittle effects, and towards unobtrusive, standards-based scripting.
4. 2005 onwards: Ajax and libraries. Garrett’s “Ajax” essay (18 February 2005) lists the DOM “for dynamic display of and interaction with data” as one of its building blocks, next to XMLHttpRequest. JavaScript libraries such as jQuery then hid the remaining browser differences.
5. 2012: the last proprietary pieces go. IE10 removes legacy DX filters for Internet sites, and the remaining IE-only DHTML extensions fade along with Internet Explorer.

Current Relevance

The term “DHTML” is historical. Nobody describes a new site as DHTML today, and the proprietary pieces, document.layers, <LAYER>, JSSS, DX filters and .htc behaviors, run only in archived or emulated browsers. The idea itself won completely. Every modern web framework is, at bottom, script that changes a live DOM tree through CSS and markup after page load, which is the model DHTML introduced. Some DHTML-era Microsoft APIs survived by becoming standards. innerHTML, first exposed by IE4, is now specified in the HTML Living Standard. XMLHTTP, written for a DHTML webmail client, became XMLHttpRequest.

Why It Matters

• It turned documents into applications. DHTML was among the first widely deployed demonstrations that a web page could behave like a program interface.
• It forced the DOM into existence. The pain of two incompatible “Dynamic HTML” models was a direct motivation for the W3C DOM, the API every browser still implements.
• It was the testbed for the browser wars. DHTML is where Microsoft and Netscape competed hardest for developers. The habits it produced, such as browser sniffing, “best viewed in” badges and forked code paths, shaped the web-standards movement that reacted against them.
• It led directly to Ajax. XMLHttpRequest was built to serve a DHTML interface, and Ajax is DHTML with a background channel to the server.