What is Dynamic HTML?
DHTML is not a language but a term used to describe the way of making dynamic and interactive web pages. It is a combination of HTML, JavaScript, Cascading Style Sheets (CSS) and Document Object Model (DOM). Dynamic content is added to static HTML pages using scripts and styles. DHTML uses client side scripting languages like JavaScript to change the static attributes of a HTML page to generate a dynamic effect. This means all DHTML effects achieved are after loading of content on a page without interacting with server again.
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.
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
Below is the another example in which the static HTML image showing in the first column is horizontally flipped using DHTML in second column.
