DHTML

Was bedeutet DHTML?

Unter DHTML versteht der Webdesigner dynamisches HTML (Dynamic Hypertext Markup Language). In der Praxis bezeichnet DHTML Webseiten, deren einzelne Elemente sich während der Anzeige durch Aktionen des Besuchers verändern. Diese Aktionen können beispielsweise Mausbewegungen oder Eingaben in Formularfelder sein. DHTML ist keine eigenständige Programmier-, Skript- oder Auszeichnungssprache, sondern beschreibt einen Sammelbegriff für den methodischen Einsatz von HTML, CSS sowie Skriptsprachen wie z. B. JavaScript. Entscheidend ist, dass bei dynamischem HTML die einzelnen Objekte einer Webseite ausschließlich browserbasiert verändert werden, ohne dass dabei eine erneute HTTP-Kommunikation zwischen Server und Client stattfindet, wie dies etwa bei Ajax mit HTTP-Requests während der Anzeige einer Webseite der Fall ist.

Modernes DHTML mit DOM-Scripting

Dynamisches HTML und dazugehörige browserspezifische Elemente und Darstellungen wurden bereits mit frühen Browsern wie dem Internet Explorer 4 oder dem Netscape Navigator 4 realisiert. Diese verwendeten jedoch z. T. zueinander inkompatible Skriptsprachen (JavaScript vs. JScript) und Auszeichnungsmerkmale, sodass es keine Standards gab und in der Folge Webseiten mit neuen DHTML-Elementen auf jedem Browsertyp entweder anders aussahen oder gar nicht erst dargestellt wurden.

Für diesen Missstand schuf das W3C-Konsortium das DOM-Scripting-Modell. Dieses ist eine konsequente Weiterführung des DHTML-Gedankens. So erlaubt DOM (Document Object Model) den Zugriff aufstandardisierte HTML- und XML-Elemente mittels etablierter JavaScript-Sprachelemente. DOM-Scripting ist eine HTML-Methode, die es browserunabhängig erlaubt, das gesamte Layout einer Webseite oder auch einzelne Elemente ausschließlich clientseitig in der Darstellung zu verändern. Dies kommt insbesondere beim Responsive Webdesign (Darstellung von Webseiten in mobilen Browsern auf kleinen Displays) zum Tragen.

Funktionen und Anwendungen

Mittels dynamischem HTML können eine Vielzahl von Funktionen, Effekten und Animationen realisiert werden. Dabei werden unterschiedliche Typen von Inhalten dynamisch ausgewählt und dann per JavaScript verändert. Veränderbare Elemente können aus Texten, Grafiken, Bildern oder Fenstern bestehen. Hier eine Auswahl von typischen Anwendungen mit dynamischen HTML-Elementen:

  • Aufklappende Menüs oder Navigationselemente durch Mouseover-Effekte
  • Editieren und Platzieren von Bildern oder Grafikelementen mittels Drag and Drop
  • PopUps – beim Anklicken von Elementen öffnen sich neue Fenster
  • Animierte Elemente – Texte und Bilder schweben über den Bildschirm
  • Layer-Techniken, die Überlappungseffekte von Menüs, Texten oder Bildern erlauben
  • Durch veränderbares CSS können Stilelemente einer Webseite beliebig geändert werden.

Einige DHTML-Techniken werden heutzutage kaum noch verwendet, da sie im wahrsten Wortsinne “schlechtem Stil” entsprechen – PopUps und unruhestiftende blinkende und sich bewegende Elemente gehören dazu. Andere DHTML-Techniken und -Elemente werden heutzutage wiederum mit neuen HTML5- und CSS3-Auszeichnungen umgesetzt.

DHTML: SEO und Barrierefreiheit

Dynamisches HTML wird vorrangig mittels Browser-Scriptsprachen wie JavaScript umgesetzt. Diese werden jedoch von den Crawlern der Suchmaschinen nicht immer berücksichtigt. Des Weiteren kann es sein, dass bei manchen Browsern aus unterschiedlichen Gründen JavaScript deaktiviert ist. Deshalb ist unbedingt dafür Sorge zu tragen, dass bei der Gestaltung von Webseiten mit DOM-Scripting die Inhalte auch bei abgeschaltetem JavaScript angezeigt werden und für den User leicht erfassbar sind. Möglicherweise kann es dazu kommen, dass einzelne Inhalte von dynamischen HTML-Webseiten nur teilweise oder überhaupt nicht in den Suchmaschinen-Indizes gespeichert werden, was zu einem schlechteren Ranking wegen nicht sichtbarer Keywords führen kann.

Darüber hinaus kann die Usability einer Website darunter leiden, wenn manche Browser den DHTML-basierten Quellcode nicht richtig darstellen: Kürzere Verweildauern und hohe Absprungraten haben indirekt Auswirkungen auf die Suchmaschinenoptimierung. Somit empfiehlt es sich, JavaScript nur dort einzusetzen, wo es unbedingt notwendig ist und entsprechenden Quellcode mit den zugehörigen Meta-Tags zu markieren. Die Webcrawler “wissen” dann, wie sie damit bei der Verarbeitung umzugehen haben.


Sie haben noch Fragen?

Kontaktieren Sie uns

Free Account erstellen


Weitere Inhalte