Description

The HTML element <dialog> is used to define a dialog box on a web page, with which users can interact.

The element <dialog> makes it easy to create interactive popup dialogs, alerts, and modals on a web page.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain Inline elements and text.
Tags Both opening and closing tags are required.
Versions HTML5

Syntax

Here is the basic syntax of the <dialog> element.

<dialog>...</dialog>

Examples

In the below example, the <dialog> element is used to create a dialog.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Element - dialog</h1>
    <dialog open>
        <p>Are you sure you want to delete this item?</p>
        <button type="button">Yes</button>
        <button type="button">No</button>
    </dialog>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <dialog> tag.

Attribute Type Details
Element-Specific Attributes The tag <dialog> has some element-specific attributes listed in the below table.
Global Attributes Like all other HTML tags, the tag <dialog> supports the HTML Global Attributes.
Event Attributes The tag <dialog> also supports the HTML Event Attributes.

Here is a list of attributes that are specific to the <dialog> element.

Attribute Value Description
open open Boolean attribute, which specifies whether the dialog is active with which user can interact.
The default value is false, so the dialog will be inactive by default.

Browser Compatibility

The tag <dialog> is supported in all modern browsers.

  • Google Chrome 37+
  • Internet Explorer or Edge 37+
  • Firefox 22+
  • Apple Safari x
  • Opera 49+

Related Links