Dynamisches HTML

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

Der Begriff "dynamisch" bezieht sich dabei auf die Idee, dass diese Änderungen von Ereignissen bedingt werden, die 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 (Nicht zu verwechseln mit Auto-Fill Funktionen eines Webbrowsers)
Webseiten, die sich wie clientseitige Anwendungsprogramme bedienen lassen, bspw. Javascript Spiele.

Techniken

Dynamisches HTML umfasst die folgenden Techniken:

HTML zum Verfassen von Dokumenten
Dynamik in der Formatierung mit HTML 5 und CSS 3
eine clientseitige Skriptsprache, meistens JavaScript oder ActiveX
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).
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.

Dymaisches HTML umfasst keine Plug-ins wie Adobe Flash, Shockwave oder Silverlight, mit denen es oft verwechselt wird.

CSS 3 und HTML 5

Durch CSS 3 und HTML 5 bekommt DHTML eine ganz neue Bedeutung. Mittlerweile sind dynamische Veränderungen ohne Javascript möglich und können im größeren Stil dem Trend "Ohne Javascript" entgegenkommen. Viele zuvor mit Javascript Realisierte Interaktionen wie dynamische Farben, Auto-Complete Funktionen und wiederkehrende CSS Eigenschaftenwechsel sind möglich.

Beispiele

Ein einfaches Beispiel eines dynamischen HTML Abschnitts mit HTML 5, bei dem der Browser einen aufklappbaren Bereich erstellt. (Funktioniert nur in Google Chrome und Safari (Webbrowser):

...
<details>
    <summary>Test Kategorie</summary>
    <p>Hier kann ein beliebiger Text stehen</p>
</details>
...

Ein einfaches Beispiel eines dynamischen HTML Abschnitts mit CSS, bei dem sich der dargestellte Text beim Hovern verändert:

...
<style>
    p:hover{
        text-decoration: underline;
    }
</style>

<p>...ein Text...<p>
...

Ein einfaches Beispiel eines dynamischen HTML Abschnitts mit Javascript, 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 CSS 3- und JavaScript-Fähigkeiten des Browsers, die nur von den neueren Browsergenerationen erfüllt werden. Wenn die Verwendung von JavaScript aus Sicherheitsgründen deaktiviert wird, kann dynamisches HTML nicht auf Skriptsprache gestützt verwendet werden, CSS 3 und HTML 5 Interaktionen funktionieren davon unberührt. 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. Auch nicht alle Suchmaschinen können dynamisches HTML verwenden und bei falscher Anwendung nicht mehr alle Inhalte der Seite auffinden.

Siehe auch

Weblinks