The terms DHTML or dynamic HTML refers to certain web design methods in which a web page itself is changed during the display of it, triggered by events such as user input. The term “dynamic” refers to the idea that these events can also occur multiple times when a page is displayed. Examples of dynamic display effects include:
- The appearance (“unfolding”) of a menu
- The highlighting of a text
- The ability to drag and drop objects on the screen
- Automatically populate form fields depending on other fields
- Effects similar to those of client-side applications
As early as the mid-1990s, the scripting languages JavaScript in Netscape Navigator and JScript in Microsoft Internet Explorer made it possible to modify websites based on events. At that time, the term DHTML was used to refer to these capabilities of the program versions of the time. Due to the standardization of the Document Object Model and the bursting of the dot-com bubble at the time, the term fell out of fashion.
Techniques of Dynamic HTML
Dynamic HTML includes the following techniques:
---
- HTML for Document Writing
- A client-side scripting language, mostly JavaScript
- An interface for modifying and extending the HTML document, today the Document Object Model (DOM) is mainly used
- XMLHttpRequest to exchange data between the browser and a remote HTTP server (see also Ajax).
- Fetch API to exchange data between the browser and a remote HTTP server.
- A format for transmitting structured data, such as XML or JSON
It is not necessary to use all the techniques in this list in a document (especially those for data transfer after the first load) in order to call it an application of dynamic HTML.
Use Cases of Dynamic HTML
Using JavaScript, you can create forms that dynamically update based on user input. For example, you can create a form where the options in one dropdown menu change based on the selection made in another dropdown menu.
DHTML allows for the creation of animated effects such as fading, sliding, or expanding elements on a web page. For instance, you can create a slideshow where images transition smoothly from one to another.
Websites that display real-time data, such as stock tickers or live news feeds, utilize DHTML to dynamically update the content without requiring the user to refresh the page manually. JavaScript can fetch data from a server periodically and update the DOM accordingly.
DHTML enables drag-and-drop interactions, where users can move elements around on a web page using their mouse. This can be useful for creating interactive interfaces such as sortable lists or draggable elements in a game.
JavaScript can be used to perform client-side form validation, providing immediate feedback to users when they fill out a form incorrectly without needing to submit it first. This enhances the user experience by reducing the number of server requests and page reloads.
Code Examples of Dynamic HTML
Interactive Button Click:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>Dynamic HTML Example</title> <script> function changeText() { document.getElementById("demo").innerHTML = "Text changed!"; } </script> </head> <body> <p id="demo">Click the button to change this text.</p> <button onclick="changeText()">Change Text</button> </body> </html> |
See the Pen
Untitled by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
In this example, clicking the button triggers the changeText() function, which updates the text inside the p element with the id “demo”.
Dynamic Image Change:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>Dynamic HTML Example</title> <script> function changeImage() { document.getElementById("image").src = "new_image.jpg"; } </script> </head> <body> <img id="image" src="old_image.jpg" alt="Old Image"> <button onclick="changeImage()">Change Image</button> </body> </html> |
Clicking the button in this example changes the src attribute of the img element, replacing the old image with a new one.
Real-time Clock:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <title>Dynamic HTML Example</title> <script> function updateClock() { var now = new Date(); var time = now.toLocaleTimeString(); document.getElementById("clock").innerHTML = time; } // Update the clock every second setInterval(updateClock, 1000); </script> </head> <body onload="updateClock()"> <p>The current time is: <span id="clock"></span></p> </body> </html> |
See the Pen
Untitled by Abhishek Ghosh (@abhishekghosh-the-encoder)
on CodePen.
This example displays a real-time clock that updates every second. The updateClock() function retrieves the current time and updates the content of the element with the id “clock” accordingly. The setInterval() function is used to call updateClock() every 1000 milliseconds (1 second).
These are just a few simple examples of how JavaScript can be used to dynamically modify HTML elements on a web page. There are countless other possibilities for creating dynamic and interactive web content using DHTML techniques.
Criticism and disadvantages
Dynamic HTML is often used for effect-oriented functions where the benefit is not clearly visible and which are more likely to be distracting.
In the early days, DHTML could only be implemented via browser-specific so-called DHTML models, which were not compatible with each other. As a result, some DHTML pages on certain browsers resulted in errors. This reputation continues to this day. For this reason, the term DOM scripting is used today to distinguish standards-compliant DHTML from browser-specific variants.
Dynamic HTML sometimes places high demands on the browser’s JavaScript capabilities, which are only met by the newer generations of browsers. If the use of JavaScript is disabled, for example for security reasons, dynamic HTML cannot be used. In addition, accessibility may deteriorate for users who have to resort to alternative input or output methods due to physical limitations. However, it is possible to use dynamic HTML in such a way that it is only used by browsers that can handle it. The rest of the users can then use the website as if it were not using dynamic HTML at all.
