用于确认,错误和警告消息的语义HTML [英] Semantic HTML for confirmation, error and warnings messages
问题描述
目前我有一些简单的东西:
< div class =message message-warning>
< h3> Message标题< / h3>
< p>留言文字< / p>
< / div>
因此,消息警告
类被取代通过消息确认
或消息错误
,如果消息是不同的类型。
是否有更加语义化的标记方式?
我可以建议< figure>
?
图形元素表示内容单元,可选地带有标题,它是自包含的,通常从主流程中引用为单个单元并且可以从文档的主流中移除,而不会影响文档的含义。
让我们回答问题第一:
是的,它符合< figure>
完美。
而< figcaption>
对标题栏/标题特别有用。 / p>
所以,我会去< figure>
,甚至不想进一步看:
< figure id =对话框class =warning>
< figcaption>消息标题< / figcaption>
< p>留言文字< / p>
< / figure>
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?
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>
这篇关于用于确认,错误和警告消息的语义HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!