HTML <dialog> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <dialog> element in HTML represents a dialog box or interactive component that can be displayed to the user, typically as a modal or non-modal pop-up. It is designed to provide a way for web applications to present temporary content or user interactions without navigating away from the current page. Dialogs are commonly used for alerts, prompts, forms, confirmations, or custom pop-up interfaces.

When a <dialog> is shown, it creates a separate layer on top of the main document content, focusing user attention on the dialog itself. Depending on how it is used, it can behave as:

Modal: A modal dialog prevents the user from interacting with the rest of the page until the dialog is closed. This is useful for critical interactions, such as confirming a deletion or filling out essential form information.
Non-modal: A non-modal dialog allows the user to interact with other parts of the page while the dialog is open. This can be used for supplementary information, tips, or optional forms.

The <dialog> element is natively supported in HTML5, meaning it can be controlled using JavaScript methods such as show(), showModal(), and close(). These methods allow developers to dynamically display, hide, and control the state of the dialog in response to user actions.

Dialogs are highly versatile. They can contain any type of HTML content, including text, images, forms, buttons, or interactive elements. This flexibility makes <dialog> ideal for custom user interfaces where the content of the pop-up is not restricted to simple messages. It also supports semantic clarity, as it explicitly indicates a temporary user interface component, which can improve accessibility for screen readers and other assistive technologies.

Properties

Permitted Parents: Any element that accepts flow content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<dialog open>

<p>The open attribute has been added, which means that the dialog is already open upon the page loading.</p>

</dialog>

Attributes

open: Specifies that the dialog element is active and that the user can interact with it.

Global Attributes

The <dialog> tag also supports the Global Attributes in HTML5

Event Attributes

The <dialog> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <dialog> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.