用于确认，错误和警告消息的语义HTML [英] Semantic HTML for confirmation, error and warnings messages

问题描述

目前我有一些简单的东西：

 < div class =message message-warning> 
< h3> Message标题< / h3> 
< p>留言文字< / p> 
< / div> 
  

因此，消息警告类被取代通过消息确认或消息错误，如果消息是不同的类型。

是否有更加语义化的标记方式？

解决方案

我可以建议< figure> ？

摘自 HTML5医生（以及他们来自 W3C ）：

图形元素表示内容单元，可选地带有标题，它是自包含的，通常从主流程中引用为单个单元并且可以从文档的主流中移除，而不会影响文档的含义。

让我们回答问题第一：

• 这样的对话是否会唱歌le单位？ 是


• 这样的对话是否独立？ 是


• 在不影响文档含义的情况下，可以将此类对话框从文档移开吗？ 是

是的，它符合< 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屋！