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?
If you want to go semantic, you can use a semantic-web approach by making an ontology for messages and warnings and use RDFa to embed it in your HTML.
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: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
No. There is no element in HTML that denotes a confirmation, error, or warning message.
Technically, the
samp
element has been defined as “sample output from programs, scripts, etc.” in HTML 4.01 and in HTML 3.2, though originally in HTML 2.0 as “sequence of literal characters, typically rendered in a mono-spaced font” and being somewhat redefined in HTML5 as “(sample) output from a program or computing system”. So its meaning is rather vague, and it’s not used much, so there is no real point in using it. But it might be argued that it is acceptable to usesamp
markup for any message from a program. It is a text-level element, so you would need to use it separately insideh3
and inside (any)p
, more or less breaking the structure.It might also be said that the messages are quotations from an external source, so they could be wrapped inside
blockquote
.The use of
h3
vs. some other markup isn’t really a semantic question, but structural: is this a heading for some content at the 3rd level of nesting?I think the
strong
element is an appropriate element for such messages.You could use several
strong
elements to indicate the importance of the message:If it’s stand-alone message for which a heading is warranted, use a
section
element instead of adiv
. In case of serious errors that apply to the whole page, it should be the first element on the page.Various variants are possible:
Which one to use depends on the kind of message, if the exact error is know, if additional help text is provided, and if several message could come up at the same time.
Note that you probably don't want to use a heading for messages that apply to a single
input
element (e.g. when the user didn't fill out a required field or entered wrong content etc.), as these error messages should be in the correspondinglabel
or directly next to theinput
element.For accessibility, you should have a look at WAI-ARIA. Maybe
aria-live="assertive"
might be an appropriate way to mark error messages.NEW ANSWER: Use the
<dialog>
element, and call.show()
instead of.showModal()
, or give it theopen
attribute if rendering server-side.As long as it’s not shown modally, it won’t block interactions with other page content.
Old answer (before
<dialog>
was a thing):Alerts are one of the semantics that ARIA added to HTML, because there's no straightforward way of doing in "pure" HTML. Hence:
I personally like to use
<aside>
as the element to slap therole
on — it's technically not part of the page content, as described by Jeff Lindblom's answer.Having a "semantic" CSS selector for this is easy enough:
May I suggest
<figure>
?Excerpt from HTML5 Doctor (and they, from W3C):
Lets answer the questions first:
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: