HTML5 <dialog> Tag

The HTML5 dialog tag is a powerful tool that web developers can use to create dialog boxes or windows on a webpage. This tag, which is new in HTML5, allows for the creation of popup dialogs and modals, enhancing the interactivity of your website.

Syntax:

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

Attributes:

HTML attributes provide extra information about HTML elements and are defined within the element's opening tag to modify or specify their behavior, appearance, or interaction.

open Tag: The ‘open’ attribute 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 1: In this example, we will see how to use the HTML5 dialog tag with an example.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>&lt;dialog&gt; tag</h1>
    <dialog open>
        Welcome to GeeksforGeeks
    </dialog>
</body>

</html>

Output:

Example 2: In this example, we will see how to use the HTML5 dialog tag with image and button tag.

HTML

<!DOCTYPE html>
<html>

<body>
    <dialog open>
        <img src="path/to/image.jpg" alt="Preview Image">
        <button id="closeImagePreview">
            Close
        </button>
    </dialog>
</body>

</html>

Output:

Output

Supported Browsers:

Google Chrome 37.0 and above
Edge 79.0 and above
Firefox 98.0 and above
Opera 24.0 and above
Safari 15.4 and above

Article Tags :

HTML

Web Technologies

HTML-Tags

HTML5