What Exactly Is Dynamic HTML?
Simply put, Dynamic HTML uses normal HTML elements to create a web page that relies on style sheets for element formatting, and scripting to dynamically change HTML content, style, or positioning, without having to re-download the page from the server. Dynamic HTML isn't a thing by itself, but a collection of technologies working together to produce an interactive interface. So, what can you do with DHTML? The possibilities are endless! Just to whet your appetite, here are a few of them:
Dynamic HTML was born with the advent of the "fours." The World Wide Web Consortium developed HTML 4.01 and released the official recommendation at about the same time Microsoft and Netscape released their competing web browsers, Internet Explorer 4 and Netscape 4. There was a flurry of activity surrounding all this. HTML 4.01 promoted several new features to better integrate itself with cascading style sheets and respond to user events. Microsoft and Netscape were competing hard for market share in the browser war, and the result of it all was a drive for something different: a level of user interactivity and "dynamism" in web pages that previously was impossible without resorting to external programming. DHTML was born.
For DHTML to work, it requires the following three key technologies supported by the web browser:
Style sheets are wonderful after you know how to use them, and are a critical component of DHTML. Although DHTML technically isn't dependent on any one type of style sheet, the official W3C style sheet technology, cascading style sheets (CSS), is the standard. CSS enables you to format elements on your web pages using properties, such as font, color, and spacing, as well as positioning items on the web page.
DHTML takes style to a new level. Rather than creating a style rule or positioning an element on the page and then forgetting about it, you can use DHTML to dynamically alter the visual style or position of your elements. As with HTML, there are inconsistencies in how various browsers implement CSS. None have fully implemented all of the specifications, but also browsers have implemented portions differently. Things are a lot better now than they were a few years ago. The latest versions of Internet Explorer, Netscape, and Opera offer much closer adherence to the HTML and CSS standards than they once did. That said, complex dynamic HTML applications require lots of testing and many workarounds to work on all the browsers that are still in common use.
If you've caught on to the "inconsistent implementation across web browsers" pattern here, you should know that official specifications may bear little resemblance to reality. You should always read any browser-specific documentation you can find to ensure that the web browsers you're targeting support what you're attempting to accomplish. Even then, some experimentation will usually be required.
Two final notes about what DHTML actually is: DHTML (the scripting part of it) relies on something called a Document Object Model (DOM) to identify, create, and manipulate elements on a web page. For example, you have to be able to identify an element, such as an image, in order to manipulate it with a script. Likewise, you must be able to identify an element's style in order to change it. This is what the DOM does. It provides a bridge between the content of the web page and scripts.
Finally, DHTML relies on event handling to track the actions of the web browser and user. When the page loads, the onload event is triggered. Likewise, when a visitor clicks a button in a form, several events might be triggered that you, the DHTML author, can use to run scripts. Event handling is covered in more depth later on.