HTML dialog Tag

In HTML, we can use the <dialog> tag to create a small dialog box or a small window inside the main browser window to show some additional information with ease.

The <dialog> tag can be used to create modal window or pop windows on a webpage to show some message or some component of the webpage in it.

HTML <dialog> Tag - Syntax and Usage

The <dialog> element requires the start(opening) tag and end(closing) tag.

Following is the syntax for using the dialog tag in your HTML code:

<dialog>
   ...
</dialog>

HTML <dialog> Tag Basic Example

Below we have a basic example showing how we can use the HTML <dialog> tag:

HTML <dialog> Tag Attributes

The <dialog> tag supports both Global attributes and Event attributes.

open attribute:

The only attribute specific to the <dialog> tag is open which doesn't even require any value. by default the <dialog> tag creates a dialog box which is hidden and can be displayed using Javascript, but when we specify the open attribute, then by default the dialog is visible on the webpage.

Here is an example,

<dialog open>  
    <p>
        The power of subconcious mind is unlimited. 
    </p>  
</dialog>

Browser Support for HTML5 <dialog> tag

Following browsers support this attribute:

• Google Chrome - 37.0

• Internet Explorer - 79.0

• Firefox - 53.0+

• Opera - 24.0

• Safari - Not supported