HTML <dialog> Tag

Description

The <dialog> HTML tag is designed to create a modal or pop-up dialog box within a web page. It provides a structured and accessible way to display content that requires user interaction, such as confirmation dialogs, form inputs, or custom notifications. The <dialog> element can be controlled through JavaScript to show or hide it dynamically, making it a versatile tool for improving user experience by capturing user input or displaying important information without navigating away from the current page. Its accessibility features ensure that it can be used effectively by people with disabilities, making web applications more inclusive.

Properties

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

Example

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

Attributes

Attribute Definition
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 table will show you the current browser support for the HTML <dialog> tag.

Desktop
Edge Chrome Firefox Opera Safari
7937982415.4
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
37982415.4337

Last updated by CSSPortal on: 30th March 2024