Semantically-Accurate HTML5 Element for a Modal Dialog

I was wo开发者_运维问答ndering 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?

<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.

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.