Dynamic HTML (DHTML) is built on top of HTML. That is, DHTML includes all the elements that make up a traditional Web page. However, with DHTML all of those elements are now programmable objects. You can assign each element an ID and then use scripting to alter them after the page has been downloaded.

Dynamic HTML allows you to dynamically control the look and content of a Web page. For example, the line below is scripted DHTML, to let you dynamically change the colour of the text whenever the user moves the cursor over it...

THIS WILL CHANGE IF THE MOUSE MOVES OVER IT...

We have added the id attribute to the HTML element <H4>, and assigned the id the value "myHeader," thus creating a programmable object:

<H4 id="myHeader">THIS WILL CHANGE IF THE MOUSE MOVES OVER IT...</H4>

Then we've added calls to two script functions to the object, that will be triggered by events (i.e. actions by the user or the web-browser) in this case the onmouseover and the onmouseout events:

<H4 id="myHeader" onmouseover="ChangeColor()" onmouseout="ChangeBack()">THIS WILL CHANGE IF THE MOUSE MOVES OVER IT...</H4>

Finally we've added the actual script functions, using the JavaScript language, that will retrieve the programmable object by its name and change the colour attribute of its style:

<SCRIPT LANGUAGE="JavaScript">
function ChangeColor() {
     document.getElementById("myHeader").style.color = "blue";
}
function ChangeBack() {
     document.getElementById("myHeader").style.color = "black";
}
</SCRIPT>

Below are links to other examples of what you can do with scripting DHTML:

Web page feature	Example	Description
Dynamic styles		Changes element styles on a page.
Dynamic positioning		Changes the position of an element on the page.
Dynamic content		Adds new text or HTML content to a page.