Semantically-Accurate HTML5 Element for a Modal Dialog
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?
Answer
<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.