Semantic HTML for confirmation, error and warnings messages

error-messaging, html, semantic-markup

Solution

May I suggest `<figure>`?

Excerpt from HTML5 Doctor (and they, from W3C):

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Lets answer the questions first:

- Is such a dialog a single unit? Yes

- Is such a dialog self-contained? Yes

- Can such a dialog be moved away from the document without affect the document meaning? Yes

Yes, it fits a `<figure>` perfectly.

And, the `<figcaption>` is especially good for title bars / headings.

So, I'd go with `<figure>` without even trying to look further:

<figure id="dialog-box" class="warning">
    <figcaption>Message Title</figcaption>
    <p>Message text</p>
</figure>

Problem

What are people's opinions on semantic HTML for confirmation, error and warnings messages? Currently I have something simple like: ``` <div class="message message-warning"> <h3>Message Title</h3> <p>Message text</p> </div> ``` Whereby the `message-warning` class gets replaced by `message-confirmation` or `message-error` if the message is a different type. Is there a more semantic way of marking this up?

Original source