Open In App
Related Articles

HTML5 <dialog> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The HTML <dialog> tag is used to specify the dialog box or window. This tag is used to create a popup dialog and models on a web page. This tag is new in HTML5. 

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: This tag accepts a single attribute open which is used to specify the dialog element is active and the user can interact with the tag element.This tag is deprecated now 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><dialog> 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: 

aas

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


Last Updated : 12 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials