About This HTML Issue
The <dialog> element triggers an informational warning from the W3C validator, not an error. The markup is valid HTML, and no code change is needed to resolve this message.
The <dialog> element is a native HTML element for modal and non-modal dialog boxes. It was part of the HTML specification for years before all major browsers implemented it. As of 2022, all major browsers (Chrome, Firefox, Safari, and Edge) support <dialog> natively. The W3C validator warning is outdated for most practical purposes, since browser support is now widespread.
The <dialog> element provides built-in features that are difficult to replicate with custom markup: a showModal() method that creates a top-layer modal with a backdrop, automatic focus trapping, and Esc key dismissal. It also exposes the correct ARIA role (dialog) by default, which improves accessibility without extra attributes.
If you still need to support older browsers (such as Internet Explorer or pre-2022 Safari), you can include the dialog-polyfill library. Otherwise, the warning can be safely ignored.
HTML example
<dialog id="confirm">
<form method="dialog">
<p>Are you sure?</p>
<button value="no">Cancel</button>
<button value="yes">Confirm</button>
</form>
</dialog>
<button onclick="document.getElementById('confirm').showModal()">
Open dialog
</button>
Using method="dialog" on the form allows the dialog to close automatically when a button inside it is clicked, with the button's value available through the dialog's returnValue property.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.