HTML <dialog> Element: Reference and Examples

You might see <dialog> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.

The Idea in Plain English

Represents a dialog box. Calling showModal() opens it modally with browser-managed modality; the open attribute alone is not equivalent.

For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<dialog id="confirm-dialog" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Save changes?</h2>
    <form method="dialog">
        <button value="cancel">Cancel</button>
        <button value="confirm">Save</button>
    </form>
</dialog>
<button type="button" id="open-dialog">Open dialog</button>
<script>
    document.querySelector("#open-dialog").addEventListener("click", () => {
        document.querySelector("#confirm-dialog").showModal();
    });
</script>

What Each Part Does

• The dialog element is the container for a browser-managed dialog.
• The h2 identifies a major subsection.
• The form collects and submits named fields to the destination specified by action.
• id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
• method chooses GET or POST for form submission.
• value specifies a form value or a machine-readable value.

The button opens a modal dialog; the form buttons close it and set its return value.

Try It Yourself

Try replacing the example content with your own while keeping the valid HTML structure.

Common Beginner Mistakes

• Adding the open attribute and assuming it provides modal focus handling.
• Changing several parts of the example at once, making it difficult to see which part caused a different result.
• Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

• Represents a dialog box. Calling showModal() opens it modally with browser-managed modality; the open attribute alone is not equivalent.
• The button opens a modal dialog; the form buttons close it and set its return value.
• Test the markup in a browser, and check accessibility and real-world behavior where relevant.