Basics of Dynamic HTML [DHTML]

• 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.

• 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.

Check out more dynamic content change effects and DHTML font transition widget.

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.

Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...

Some of the general examples where DHTML is used include:

• Generating animated text
• Content slide from one position to another
• Collect user inputs through a form and processing through client site JavaScript
• Dynamic menu and mouse over events