What is Dynamic HTML?
Though DHTML and Ajax both are used to add dynamic effect to static HTML content, Ajax can interact with server by sending a request but DHTML does not interact with server.
Features of DHTML
All features of dynamic HTML can be classified into four categories as below:
- Dynamic Content – Content on the page is modified dynamically based on the user input. Below is the example of the content change when hovering the mouse over the text.
- Dynamic Style – The appearance of an element on a web page is modified dynamically like color change or font change. Below is the example of dynamic font change on mouse hover.
See what color I take when you move your mouse over me! And what happens when you take your mouse out??
- Dynamic Positioning – The position of an element is dynamically changed relative to other elements on the page.
- Dynamic Binding – Linking an object at run time based on the conditions at that moment.
Advantages of DHTML
There are many advantages of using DHTML especially when the content is to be modified dynamically.
- DHTML supports adding styles to static content in various manners.
- It is dynamic so it can be changed even during the run time execution.
- Webmasters are often limited to use default fonts such as Arial or Times Roman. DHTML allows downloadable fonts which make the web pages looking more attractive.
- DHTML page is also saved as an .html file.
It is worth to note here that using multiple scripts on a web page will reduce the page loading speed and slower the site. Also dynamic pages may not perform well on search engines compared to static HTML pages. Learn more about dynamic vs static pages.
Examples of DHTML
Here is an example of a flip image displayed using HTML image tag and flipped horizontally using CSS to display a text behind the image.
Some of the general examples where DHTML is used include:
- Generating animated text
- Content slide from one position to another
- Dynamic menu and mouse over events
Below is the another example in which the static HTML image showing in the first column is horizontally flipped using DHTML in second column.