Semantically-Accurate HTML5 Element for a Modal Dialog

Question

I was wondering what some of my fellow web developers/designers felt would be the best HTML 5 element to use for a modal dialog like a lightbox, superbox, thickbox, or whatever your favorite flavor might happen to be.

Since these types of UI's don't follow the typical flow of a 'normal' web page (which, apparently, according to HTML 5 spec gurus is, essentially, a blog), they don't really fall into place like a <header>,<nav>,<section>, <article>, or a <footer> (amongst other new 'semantic' elements) might.

Of course, there is always the <div>, but, I was just kinda thinking there might be something a little more semantically-accurate.

Unfortunately, there is no <modal> element. What are your thoughts on whether there should be one in the spec? And since the element doesn't exist, what would be your next best choice?

Crimea

Answer 1

<aside> seems appropriate. The current spec with relevant sections bolded:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

In this case, a modal is "tangentially related" to the action that caused it. While you might normally expect an aside to be in a sidebar, one of the purposes of semantic content is to enable versatility that's unrestricted by physical page characteristics. The last phrase of the spec seems to imply just this versatile use case.

Porphyry

Though, to be fair, another semantic tag such as <modal> or <dialog> or even <action> does seem more appropriate. – Porphyry

That's actually one of the most fantastic answers I've ever received—well written and thorough. I'm going to wait for a few more responses, if possible, before I decide that your answer is the right one, though. Thank you! – Crimea

On a side note, I guess I should have known that they would have html encoded my emdash... Lame. – Crimea

I am going to try using the <details><summary></summary></details> combo for some lightboxes. Specifically, when you click "more info" and the lightbox gives you the full scoop. Seems like a good use for details. – Saccharine

This totally depends on the context and content. So you can't say that you should use aside in general. – Hemichordate

details isn't supported on Edge as of current date (caniuse.com/#search=details) – Llovera

Answer 2

The current draft of HTML has a dialog element. It was removed at one point but it's back, and browsers are starting to implement it. (Edit: in 2022, it’s in all modern browsers.)

The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.

For accessibility (until the element is more widely supported) I would also include the dialog ARIA role.

To get the JavaScript API in browsers that don't natively support the <dialog> element, you can use a polyfill.

Anu

I feel like both you and mVChr make a good point -- perhaps the answer is that there isn't a single element to represent all modals. I'd say it makes sense to say <aside> if it's an informational modal <aside>Welcome to my site! Here's how to get started</aside> vs one that requires interaction <dialog>Enter your birthday to continue</dialog> – Vennieveno

3 years later, support is still very poor (caniuse.com/#feat=dialog), I would say it's better to stick to <aside> for now. – Michikomichon

@Michikomichon Thanks. The way the question was phrased the OP seemed to be more interested in a theoretical answer than a practical one. It looks like native browser support is either present of forthcoming in most of the major browsers. I've added some more practical information on how to write future-proof code that works today. – Anu

There is no dialog element in w3.org/TR/html5 so should this answer still be here? – Bala

@setek That's not the latest. The current recommendation is HTML5.1. The <dialog> element was introduced in HTML5.2, which is currently in "working draft" status. – Anu

Answer 3

As of 2024 you can use the Dialog API that HTML5 provides.

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});

Daley