用于确认、错误和警告消息的语义HTML

人们对确认、错误和警告消息的语义HTML有什么看法

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

<div class="message message-warning">
     <h3>Message Title</h3>
     <p>Message text</p>
</div>

消息标题
消息文本

如果消息类型不同，

消息警告

类将替换为

消息确认

或

消息错误

---

是否有更具语义的方法来标记此消息？

否。HTML中没有表示确认、错误或警告消息的元素

从技术上讲，

samp

元素在HTML4.01和HTML3.2中被定义为“程序、脚本等的样本输出”，尽管最初在HTML2.0中被定义为“文本字符序列，通常以单间距字体呈现”，在HTML5中被重新定义为“（样本）程序或计算系统的输出”。所以它的意思是相当模糊的，而且没有太多的使用，所以使用它没有真正的意义。但有人可能会争辩说，对来自程序的任何消息使用

samp

标记是可以接受的。它是一个文本级元素，因此您需要在

h3

和（any）

p

中分别使用它，或多或少破坏了结构

也可以说，这些消息是来自外部源的引用，因此它们可以包装在

blockquote

中

---

与其他一些标记相比，

h3

的使用并不是一个真正的语义问题，而是一个结构性问题：这是第三层嵌套中某些内容的标题吗？

如果您想使用语义，您可以使用语义web方法，为消息和警告创建一个本体，并使用它将其嵌入到HTML中。

我认为这是此类消息的合适元素

您可以使用几个

strong

元素来表示消息的重要性：

<strong>Login successfully.</strong> <!-- confirmation --> 
<strong><strong>Wrong login data.</strong></strong> <!-- warning/error -->

错误
错误的登录数据。

用户名和/或密码错误。试试看

错误的登录数据。

登录数据错误。请尝试

使用哪一种取决于消息的类型、是否知道确切的错误、是否提供了其他帮助文本以及是否可以同时出现多条消息

请注意，您可能不希望对应用于单个

输入

元素的消息使用标题（例如，当用户没有填写必填字段或输入错误内容等），因为这些错误消息应该位于相应的

标签中或紧挨着
输入
元素

对于可访问性，您应该查看。也许
aria live=“assertive”
是标记错误消息的合适方法。
我可以建议

摘自（以及他们，摘自）：

figure元素表示一个内容单元（可选地带有标题），该单元是自包含的，通常作为文档主流的单个单元引用，并且可以在不影响文档含义的情况下从文档主流移开

让我们先回答以下问题：


这样的对话是单个单元吗是
这样的对话是独立的吗是
这样的对话框是否可以在不影响文档含义的情况下从文档中移开是

是的，它非常适合

而且，
对于标题栏/标题特别好

因此，我选择了
，甚至不想再看下去：

<figure id="dialog-box" class="warning">
    <figcaption>Message Title</figcaption>
    <p>Message text</p>
</figure>


消息标题
消息文本

这个想法很有趣，但我认为它不适合这里。它缺少的是证明使用标记的正确性的实际内容。根据规范，
表示一个“内容单元”-意味着图像、图表、代码块等，可以选择为该内容添加标题（
）。如果说
之外的消息代表一个适当的内容单元，那就太夸张了

在本例中，我们还应谨慎使用
标记，因为消息是次要内容，可能不应成为文档大纲的一部分

有人可能会争辩说，一个
是合适的。当在
外部使用时，它现在被认为是“相切内容”

适用于消息的“标题”，因为它是消息语义上更重要的部分，而不是文档标题。因此，代码可能看起来是这样的：

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


消息标题
消息文本


也有人可能会说，因为没有专门为这样一个特性创建的东西，一个好的老式的、语义上没有意义的
可能是最好的元素。我想这取决于你觉得你的信息有多“无关紧要”

谢谢，
Jeff
使用并调用
.show（）
而不是
.showmodel（）
，或者在渲染服务器端时为其指定
打开
属性

只要不以模式显示，它就不会阻止与其他页面内容的交互


旧答案（在
成为一件事之前）：

，因为在“纯”HTML中没有直接的方法。因此：

<aside role="alert">
  <h2>Message Title<h2>
  <p>Message Text</p>
</aside>

“警报”角色仅用于动态内容，例如基于用户输入的警告。@MoaazBhnas这不是他们要求的吗？“确认、错误和警告消息”很抱歉这么匆忙！
报警
角色不允许出现在
旁的
元素上。看见而
dialog
需要一个
alertdialog
角色来指示警告或错误消息。但是，如果信息是短暂的，那么它会宣布自己，并且不需要任何提示
[role="alert"] {
  font-size: 2em; /* or what have you */
}