HTML Elemente
HTML 5 Logo grafisch leicht bearbeitet

< dialog >
HTML-Element

(Materialsammlung)

Mit dem Element dialog kann allein mittels HTML ein Dialogfeld in einem Popup-Fenster realisiert werden.

Definition und Verwendung

Spezifikation (Auszug)

Das Dialog-Element stellt einen überlagernden Teil einer Anwendung in Form eines kleineneren Fensters („Dialogfeld“) dar.

Benutzer*innen können mit dem Dialogfeld interagieren, um eine Aufgabe auszuführen oder Informationen abzurufen. Der Dialog kann nach der Interaktion durch Nutzer*innen automatisch von der Anwendung oder manuell durch Nutzer*innen geschlossen werden.

[…]

Das Dialog-Element darf nicht zur Kennzeichnung von anderen Arten von Steuerelementen verwendet werden. Kontextmenüs, Tooltipps und Popup-Listenfelder sind beispielsweise keine Dialogfelder.

Übersetzung durch Zweiter Blick)

WHATWG | The dialog element (abgerufen 05.06.2026)

Erläuterungen zur Spezifikation

Die Spezifikation zielt in ihrer Formulierung auf Anwendungen ab. Anwendungen umfassen auch Web-Formulare, die in einem Dialogfeld erscheinen, welches den Inhalt einer Webseite überlagert.

Insbesondere bei modalen Dialogen, die einem anwendungsübergreifend bekanntem Muster folgen, sollte die technische Realisierung dem vertrauten Verhalten entsprechen. Dialogfelder lassen sich beispielsweise durch Drücken von Escape schließen. Ein entsprechender Mechanismus kann und sollte durch verfügbare HTML-Attribute in dialog-Element bereitgestellt werden.

Verwendung

Technische Realisierung

Das dialog-Element dient als Container für ein Dialogfeld mit zusammengehörigen Steuerelementen und korrespondierenden Informationen.

Trigger Schalter

Ein Dialogfeld wird gewöhnlich durch einen Schalter geöffnet. Dies entspricht den Erfahrungen in Office-Anwendungen und auf den meisten Webseiten. Dieser Erfahrungshorizont sollte bei der Umsetzung berücksichtigt werden.

Ein Auslösemechanismus zum Öffnen eines Dialogfelds kann technisch etwa folgendermaßen realisiert werden:

Der entsprechende Code würde etwa folgendermaßen aussehen: 

<button 
  aria-haspopup="dialog"
  command="show-modal"
  commandfor="newsletterDialog" >
  [Schalterbeschriftung, beispielsweise "Anmeldung zum Newsletter"]
</button>
<dialog id="newsletterDialog" >
  […]
</dialog>

HTML Rahmen des Dialogs

Typischerweise werden die Dialogelemente in einem Formular gruppiert. Ein einleitender und abschließender Tag sind für Dialog und Formular erforderlich.

Die Spezifikation sieht derzeit noch keinen eigenen Mechanismus für eine Beschriftung des Dialogs vor (caption, legend, …). Dem Dialogfeld sollte daher eine Überschrift vorangestellt werden. Die Überschrift kann dann mittels aria-labelledby als Beschriftung des Dialogs referenziert werden.

Die Grundkonstruktion für den Dialograhmen kann etwa folgendermaßen aussehen: 

<dialog 
  aria-labelledby="dialogHeading" >
  <form>
    <h1 id="dialogHeading" >
      [Dialog Thema]
    </h1>
  </form>
</dialog>

Browser-Validation verhindern

Durch das Attribut novalidate wird eine automatische Validation von Eingaben unterdrückt. Auf diese Weise wird das Schließen des Dialogfelds auch dann ermöglicht, wenn noch nicht alle Pflichtfelder ausgefüllt wurden. Der Dialog soll ja unabhängig von Eingaben abgebrochen werden können. 

<form
  method="dialog"
  novalidate>

Aktionen zum Schließen

Mit der Eigenschaft closedby kann festgelegt werden, welche Aktionen zum Schließen des Dialogfelds zur Verfügung stehen. Der Wert "any" erlaubt beispielsweise als Mechanismus das Drücken von Escape oder einen Mausklick außerhalb des Dialogfelds.

Can I use | <dialog closedby>
Die Umsetzung durch Browser ist noch nicht umfassend gewährleistet. (Stand 06.06.2026)
MDN | HTMLDialogElement: closedBy property
Die Verwendung der Eigenschaft für Scripts mit einem Beispiel.

Visuelle Realisierung

Dialog visuell hervorheben

Typischerweise wird die ursprüngliche Webseite hinter dem Dialogfeld ausgegraut. Dies kann mit dem CSS-Pseudoelement backdrop realisiert werden.

Barrierefreiheit

Nutzungsfreundlichkeit

Aus der Perspektive der Usability scheinen folgende Überlegungen angemessen:

Semantische Informationen nur wenn nötig