HTML <dialog> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The <dialog> HTML tag is designed to create a modal or pop-up dialog box within a web page. It provides a structured and accessible way to display content that requires user interaction, such as confirmation dialogs, form inputs, or custom notifications. The <dialog> element can be controlled through JavaScript to show or hide it dynamically, making it a versatile tool for improving user experience by capturing user input or displaying important information without navigating away from the current page. Its accessibility features ensure that it can be used effectively by people with disabilities, making web applications more inclusive.

Properties

Permitted Parents: Any element that accepts flow content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<dialog open>

<p>The open attribute has been added, which means that the dialog is already open upon the page loading.</p>

</dialog>

Attributes

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

Global Attributes

The <dialog> tag also supports the Global Attributes in HTML5

Event Attributes

The <dialog> tag also supports the Event Attributes in HTML5

Browser Support

The following table will show you the current browser support for the HTML <dialog> tag.

Desktop

79	37	98	24	15.4

Tablets / Mobile

37	98	24	15.4	3	37

Last updated by CSSPortal on: 30th March 2024

Support Us