Question

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

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

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

如果邮件的类型不同，则message-warning类会被message-confirmation或message-error替换。

是否有更多语义方式来标记它？

Answer 1

我可以建议<figure>吗？

摘自HTML5 Doctor（以及他们，来自W3C）：

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

让我们先回答问题：

这样的对话是一个单元吗？的是
这样的对话是否自足？的是
这样的对话框是否可以在不影响文档含义的情况下远离文档？的是

是的，它完全适合<figure>。

而且，<figcaption>对标题栏/标题特别有用。

所以，我甚至没有试图进一步观察<figure>：

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

Answer 2

新答案： 使用the <dialog> element，然后拨打.show()而不是.showModal()，或者open。 }属性，如果渲染服务器端。

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

旧答案（<dialog>之前的事情）：

Alerts are one of the semantics that ARIA added to HTML，因为在＆＃34;纯粹＆＃34;中没有直接的做法。 HTML。因此：

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

我个人喜欢使用<aside>作为打击role的元素 - 它在技术上不属于页面内容的一部分，如Jeff Lindblom's answer所述。

有一个＆＃34;语义＆＃34; CSS选择器很容易：

[role="alert"] {
  font-size: 2em; /* or what have you */
}

Answer 3

<figure>这个想法很有意思，但我觉得它不适合这里。缺少的是用于证明使用标签的实际内容。根据规范，<figure>表示“内容单元” - 表示图像，图表，代码块等，可以选择性地为此内容添加标题（<figcaption>）。如果<figcaption>之外的消息代表适当的内容单元，那将是一个延伸。

我们还应该谨慎使用此实例中的<h#>标记，因为该消息是次要内容，并且可能不应该是文档大纲的一部分。

有人可能会在revised spec下争辩<aside>是合适的。在<article>之外使用时，它现在被视为“切向内容”。

<strong>适用于邮件的“标题”，因为它是邮件中语义上更重要的部分，但不是文档标题。所以代码可能看起来如此：

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

人们也可以争辩说，因为没有专门为这样一个特征创造的东西，一个好的老式的，语义无意义的<div>可能是最好的元素。我想这取决于你对自己的信息有多“切合”。

谢谢，杰夫

Answer 4

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

从技术上讲，samp元素已被定义为“HTML 4.01和HTML 3.2中的程序，脚本等的示例输出”，尽管最初在HTML 2.0中是“文字字符序列，通常在单声道字体“并在HTML5中稍微重新定义为”（样本）从程序或计算系统输出“。所以它的含义相当含糊，而且使用不多，所以使用它没有实际意义。但可能有人认为，对程序中的任何消息使用samp标记是可以接受的。它是一个文本级元素，因此您需要在h3和内部（任意）p内单独使用它，或多或少地破坏结构。

也可以说消息是来自外部来源的引用，因此它们可以包含在blockquote内。

h3与其他标记的使用并不是一个真正的语义问题，而是结构性的：这是第3级嵌套中某些内容的标题吗？

Answer 5

我认为strong element是此类消息的合适元素。

您可以使用几个 strong元素来表明消息的重要性：

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

如果是有保证标题的独立消息，请使用section element代替div。如果严重错误适用于整个页面，它应该是页面上的第一个元素。

各种变体都是可能的：

<section class="message message-error">
  <h1><strong><strong>Error:</strong> Wrong login data.</strong></h1>
  <p>The username and/or password is wrong. Try …</p>
</section>

<section class="message message-error">
  <h1>Error</h1>
  <p><strong><strong>Wrong login data.</strong></strong></p>
  <p>The username and/or password is wrong. Try …</p>
</section>

<section class="message message-error">
  <strong><strong>Wrong login data.</strong></strong>
</section>

<section class="message message-error">
  <p><strong><strong>Wrong login data.</strong></strong> Try …</p>
</section>

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

请注意，您可能不希望对适用于单个input元素的消息使用标题（例如，当用户未填写必填字段或输入错误内容等）时，这些错误消息应位于相应的label或紧邻input元素旁边。

对于辅助功能，您应该查看WAI-ARIA。也许aria-live="assertive"可能是标记错误消息的合适方式。

Answer 6

如果您想要语义化，可以使用语义网方法制作消息和警告的本体，并使用RDFa将其嵌入HTML中。

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

6 个答案: