Semantic HTML for confirmation, error and warnings messages

Question

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?

Answer 1

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>