Phillip Thorne
Bioinformatics Research & Development Group
Tuesday, 17 August 1999
"Dynamic HTML" (DHTML) is a catch-all term for a variety of mechanisms that permit the update of a webpage's appearance after it's downloaded to a browser, without recourse to plug-ins, embeds, independently-updated frames, or server-side scripting or push content. The mechanisms include:
Due to the exigencies of commercial development, the implementation of each of these mechanisms differs markedly between browser vendors and the W3C's own slowpoke standards.
As an SGML application, HTML is intended to represent document structure and content, not appearance. This latter duty should properly be reserved for an orthogonal stylesheet, but delays in implementing such led to the creation by browser vendors of such physical formatting tags as B, UNDERLINE, and FONT; and such attributes as BACKGROUND and BGCOLOR of the BODY tag.
Cascading stylesheets, level one (CSS-1) provide syntax to describe certain presentation properties of a document, orthogonal to the HTML content. These properties include font, colors, and margin/border/padding, for both inline elements (e.g. A, EM) and block elements (e.g. P, BLOCKQUOTE). These properties do not affect the document flow, i.e. rendered text appears in the same order as HTML code. The "cascading" in CSS refers to rules to resolve contention between multiple sheets vying to define the same elements; for instance, the sheet associated with a document by an author, a browser's default sheet, and a third defined by the browser's user.
Cascading stylesheets, positioning (CSS-P) provide additional syntax to describe the positioning (in three dimensions) and visibility of block elements in a document, which can affect the document flow. (Netscape initiated the field with its nonstandard LAYER and ILAYER tags.) Blocks can be positioned in absolute terms (outside the document flow, but relative to the coordinate origin of the enclosing element) or in relative terms (relative to where it would normally stand within the document flow). Blocks can also be stacked vertically and overlapped, with a specific z-order. The portion of a block that is visible can be changed with its clip property, and it can be hidden altogether with its visibility property. The most commonly positioned element is DIV.
A browser's document object model (DOM) exposes the attributes of page elements, and their arrangement into a tree structure, by means of read and/or write properties and methods. Whereas HTML, CSS-1 and CSS-P can define a document only once, the DOM permits scripting languages to subsequently change that structure. This is the "dynamic" in DHTML.
Stylesheets do not expand the bestiary of HTML tags, but they do allow you to (1) change the appearance of pre-existing tags (e.g. you can make all EM elements 12-point orange boldface), (2) create subclasses of specific tags, (3) create subclasses that can be applied to arbitrary tags, and (4) create conditional formatting that depends upon a tag's nesting (e.g. EM is usually italicized, but if contained within a second EM you can make the font normal).
Stylesheets are usually defined at the top of a document, within its HEAD element. Like the SCRIPT tag, they can be defined inplace, or imported from a URL; multiple imports are legal. The standard syntax is called text/css; Netscape permits a second, JavaScript-style syntax called text/javascript. Typography in stylesheets is more critical than in HTML or JavaScript code; you must be sure all your quotes, single-quotes, colons and semicolons are up to spec.
(Like the META tag, the LINK tag is intended to express metadata about a document, specifically its context in relation to other resources, such as index, glossary, or next-chapter. These relations might be ubiquitous and important enough to warrant their own browser chrome or hotkeys, rather than relegating them to content-less A HREF hyperlinks. The major vendors have largely ignored LINK.)