HTML dialog Tag

Last Updated : 27 Jul, 2026

The <dialog> tag in HTML5 defines a dialog box or window. It can be used for pop-up notifications, messages, or custom user interactions. The <dialog> element can be shown or hidden using JavaScript, providing a native way to create modal interfaces.

HTML 
<!DOCTYPE html>
<html>

<body>
    <dialog open>
        Welcome to GeeksforGeeks
    </dialog>
</body>

</html>

Syntax

<dialog open> Contents... </dialog>

Attributes

  • Open Attribute: It is used to specify that the dialog element is active and the user can interact with it. However, it’s important to note that this tag is now deprecated from HTML.

Example of <dialog> tag with Image and Button

HTML 
<!DOCTYPE html>
<html>
 
<body>
    <dialog open>
        <img src="path/to/image.jpg" alt="Preview Image">
        <button onclick="document.querySelector('dialog').close();">
            Close
        </button>
    </dialog>
</body>

</html>
Comment

Explore