HTML <abbr> Tag

HTML acronym Tag

HTML <address> Tag

HTML applet Tag

HTML <area> Tag

HTML5 <article> Tag

HTML5 <aside> Tag

HTML5 <audio> Tag

HTML <base> Tag

HTML <basefont> Tag

HTML 5 <bdi> Tag

HTML | <bgsound> tag

HTML <blockquote> Tag

HTML <body> Tag

HTML <button> Tag

HTML <caption> Tag

HTML <canvas> Tag

HTML <center> Tag

HTML <cite> Tag

HTML <code> Tag

HTML <colgroup> Tag

HTML  Tag

HTML <data> Tag

HTML <datalist> Tag

HTML5 <details> Tag

HTML5 <dialog> Tag

HTML <embed> Tag

HTML5 fieldset Tag

HTML5 figcaption Tag

HTML5 figure Tag

HTML <font> Tag

HTML5 <footer> Tag

HTML | <frame> Tag

HTML frameset Tag

HTML <head> Tag

HTML5 <header> Tag

HTML h1 to h6 Tag

HTML <hgroup> Tag

HTML <html> Tag

HTML | <isindex> tag

HTML | keygen Tag

HTML <label> Tag

HTML <legend> Tag

HTML <main> Tag

HTML <mark> Tag

HTML <marquee> Tag

HTML | <menuitem> tag

HTML <meta> Tag

HTML5 <meter> Tag

HTML <nobr> Tag

HTML | <noembed> Tag

HTML <noscript> Tag

HTML <Object> tag

HTML <optgroup> Tag

HTML <option> Tag

HTML <output> Tag

HTML <param> Tag

HTML Phrase Tag

HTML 5 <progress> Tag

HTML5 <ruby> Tag

HTML5 <ruby> Tag

HTML5 <ruby> Tag

HTML <script> Tag

HTML <script> Tag

HTML <small> Tag

HTML <source> Tag

HTML | <spacer> tag

HTML <span> Tag

HTML <strike> Tag

HTML <strong> Tag

HTML Subscript and Superscript Tags

HTML5 <summary> Tag

HTML template Tag

HTML <track> Tag

HTML 5 <wbr> Tag

HTML | <xmp> tag

HTML5 <dialog> Tag

Last Updated : 08 Apr, 2024

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:

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

Suggest improvement

HTML5 <details> Tag

HTML <dir> Tag

Share your thoughts in the comments

Similar Reads

Onsen UI Dialog CSS Component Material Alert Dialog

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons 2

Onsen UI Dialog CSS Component Basic Alert Dialog

Onsen UI Dialog CSS Component Alert Dialog without Title

Onsen UI Dialog CSS Component Alert Dialog with Multiple Buttons

Why <big> tag is not in HTML5 while <small> tag exists ?

Explain the difference between head Tag and header Tag in HTML5 ?

HTML5 MathML <menclose> Tag

HTML5 <article> Tag

HTML5 date attribute in <input> Tag

M

ManasChhabra2

Article Tags :