Dynamisches HTML

Die Begriffe DHTML, dynamisches HTML (englisch dynamic HTML) oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Methoden, bei denen während der Anzeige einer Webseite diese selbst, ausgelöst durch Ereignisse wie z. B. Benutzereingaben, verändert wird.

Der Begriff „dynamisch“ bezieht sich dabei auf die Idee, dass diese Ereignisse auch mehrfach beim Anzeigen einer Seite auftreten können.

Beispiele für dynamische Anzeigeeffekte sind:

das Erscheinen („Aufklappen“) eines Menüs
die Hervorhebung eines Textes
die Möglichkeit, Objekte durch Drag & Drop auf dem Bildschirm zu verschieben
Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen
Effekte wie bei clientseitigen Anwendungsprogrammen

Geschichte

Die Skriptsprachen JavaScript im Netscape Navigator und JScript im Microsoft Internet Explorer ermöglichten schon Mitte der 1990er Jahre die ereignisbasierte Veränderung von Webseiten. Damals wurde der Begriff DHTML benutzt, um auf diese Fähigkeiten der damaligen Programmversionen hinzuweisen. Durch die Standardisierung des Document Object Model und das Platzen der damaligen Dotcom-Blase geriet der Begriff aus der Mode.

Techniken

Dynamisches HTML umfasst die folgenden Techniken:

HTML zum Verfassen von Dokumenten
eine clientseitige Skriptsprache, meistens JavaScript
eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das Document Object Model (DOM) verwendet
XMLHttpRequest, um Daten zwischen dem Browser und einem entfernten HTTP-Server auszutauschen (siehe auch Ajax).
Fetch API, um Daten zwischen dem Browser und einem entfernten HTTP-Server auszutauschen.
ein Format zur Übertragung strukturierter Daten, etwa XML oder auch JSON

Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können.

Beispiele

Ein einfaches Beispiel eines dynamischen HTML-Abschnitts, bei dem sich der dargestellte Text beim Anklicken verändert:

...
<p onclick="this.firstChild.nodeValue = 'Danke'">Klick mich</p>
...

Kritik und Nachteile

Oft wird dynamisches HTML für effekt-orientierte Funktionen verwendet, bei denen der Nutzen nicht klar erkennbar ist und die eher stören.

In der Anfangszeit konnte DHTML nur über Browser-spezifische sogenannte DHTML-Modelle realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML-Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff DOM Scripting verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte.

Dynamisches HTML stellt teils hohe Anforderungen an die JavaScript-Fähigkeiten des Browsers, die nur von den neueren Browsergenerationen erfüllt werden. Wenn die Verwendung von JavaScript, z. B. aus Sicherheitsgründen, deaktiviert wird, kann dynamisches HTML nicht verwendet werden. Darüber hinaus kann sich die Zugänglichkeit für Anwender verschlechtern, die wegen körperlichen Einschränkungen auf alternative Eingabe- bzw. Ausgabemethoden zurückgreifen müssen (siehe Barrierefreies Internet). Es ist aber möglich, dynamisches HTML so zu verwenden, dass es nur bei Browsern verwendet wird, die damit auch umgehen können. Die übrigen Anwender können die Website dann verwenden, als ob diese gar kein dynamisches HTML einsetzen würde.

Weblinks

Tutorials für Anfänger und Schritt-für-Schritt-Anleitungen für konkrete Problemstellungen im SELFHTML-Wiki