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>

Answer 2

The <figure> idea is interesting, but I don't think it fits here. What it's missing is the actual content to justify use of the tag. According to the spec, <figure> represents a "unit of content" - meaning an image, diagram, code block, etc. that may optionally have a caption for this content (<figcaption>). It would be a stretch to say that the message outside the <figcaption> represents an appropriate unit of content.

We should also be cautious of using <h#> tags in this instance, as the message is secondary content, and should probably not be part of the document outline.

One could argue, under the revised spec, that an <aside> would be appropriate. It's now considered "tangential content" when used outside an <article>.

<strong> would be appropriate for the "title" of the message, since it's a semantically more important part of the message, but not a document header. So the code might look so:

<aside class="warning-or-whatever">
    <strong>Message Title</strong>
    <p>Message Text</p>
</aside>

One could also argue, since there's nothing specifically created for such a feature, that a good old-fashioned, semantically meaningless <div> might be the best element. I guess it comes down to how "tangential" you feel your messages are.

Thanks, Jeff