Static HTML means when we put HTML elements (images,paragraphs etc.) in a specific order in the source code. The browser always showed all elements in this order. styling and Positioning was done by tables, div's and such aids. If we wanted to change the positioning or order of the elements, we had to again write the HTML.

DHTML gives a way to re-organize our pages on the fly. we can take some elements out of the natural flow of the page, put them somewhere and change its position again and again by clicking a link.

The natural flow of the page is the page as the browser shows it one by one and displays them in the best possible way from the beginning to the end of the HTML document.

Now take an image, and put it somewhere on the page without regard to this natural flow. We can force the image to be in the extreme upper left corner of the page, while the rest of the content is still distributed by the natural flow.

Attach a link to that page, say "Move image to the right". As soon as the user clicks this link, a JavaScript is executed which moves the image, suppose 200 pixels to the right. We can do this at once or make the image move stealthily to its new position. In either case, the other elements on the page stay where they are, only the image moves.

Dynamic HTML gives authors creative control so they can manipulate any page element and change styles, content and position at any time. It provides a more dynamic experience on web pages, making them more like dynamic applications and less like static content. Dynamic HTML presents richly formatted pages and lets you interact with the content on those pages without having to download additional content from the server. it means that a page can respond immediately to user actions, such as a mouse click, without having to retrieve an entire new page from the server.

We discuss the three important components of Dynamic HTML authoring:
Positioning - precisely placing blocks of content on the page and, moving these blocks around.

Style modifications done by altering the look and display of content on the page.

Event handling is how to relate user events to changes in style and position

DHTML is a combination of three existing technologies meshed together by the Document Object Model (DOM):

1. HTML - For creating different page elements like text,image links.

2. CSS - Cascading Style Sheets allows authors and users to attach style (e.g., fonts, spacing,) to structured documents by separating content of documents and the presentation style of documents. CSS simplifies site maintenance and Web authoring .

3. JavaScript - it allows you to accesses and dynamically control the individual properties of both HTML and CSS

JavaScript accesses the properties of an HTML document through the DOM.The work of DOM is to represent all the attributes of HTML and Style sheets to JavaScript control. You need only to know about the DOM is what JavaScript commands it accepts.As different browsers have their slightly different versions of the DOM, so they display HTML properties defferently as well as access them differently.The basic object in DHTML is a named rectangular region, whose method of declaration and javascript reference can differ depending on the browser involved.