HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <dialog> Tag


The <dialog> tag in HTML is used to create a dialog box or popup window that can be used to display information, warnings, or ask for user input. It’s a versatile element that can enhance user interaction on a webpage.


Sponsored by Google

Example 1: Basic Dialog Box

Using the <dialog> element, you can create a simple dialog box that can be opened or closed using JavaScript:

<dialog id="myDialog">
  This is a dialog box!
  <button onclick="document.getElementById('myDialog').close()">Close</button>
<button onclick="document.getElementById('myDialog').showModal()">Show Dialog</button>

Example 2: Dialog Box with Form

You can also include a form inside the dialog box to gather user input:

<dialog id="formDialog">
  <form method="post" action="/submit">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
    <button type="button" onclick="document.getElementById('formDialog').close()">Cancel</button>
<button onclick="document.getElementById('formDialog').showModal()">Open Form</button>

Try it out below:



Attribute Description
open Specifies that the dialog element is active and that the user can interact with it.

Global Attributes

The <dialog> tag supports all the global attributes in HTML.

Event Attributes

The <dialog> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome 37.0
Firefox 79.0
Safari 98.0
Opera 15.4
IE 24.0

Default CSS Settings

Most browsers will display the <dialog> element with the following default CSS settings:

dialog {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;


The <dialog> tag provides a convenient way to create dialog boxes and popups in HTML. It can be used for various purposes, such as displaying alerts, gathering user input, or providing additional information.

With the support of JavaScript, you can control the behaviour of the dialogue box, making it a powerful tool for enhancing user experience.