13

人们对用于确认、错误和警告消息的语义 HTML 有何看法？

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

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

从而message-warning类被替换message-confirmation或者message-error如果消息是不同的类型。

有没有更语义化的方式来标记它？

4

6 回答 6

13

我可以建议<figure>吗？

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

figure 元素表示一个内容单元，可以选择带有标题，它是自包含的，通常作为单个单元从文档的主要流程中引用，并且可以从文档的主要流程中移开而无需影响文档的意义。

让我们先回答问题：

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

是的，它非常适合<figure>。

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

所以，我<figure>什至不去想更进一步看：

<figure id="dialog-box" class="warning">
    <figcaption>Message Title</figcaption>
    <p>Message text</p>
</figure>
于 2012-11-23T01:54:15.607 回答
12

使用element，并调用而不是，或者在渲染服务器端时为其提供属性<dialog>。.show().showModal()open

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

旧答案（以前<dialog>是一件事）：

警报是 ARIA 添加到 HTML 的语义之一，因为在“纯”HTML 中没有直接的方法。因此：

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

我个人喜欢将其<aside>用作拍打的元素- 正如Jeff Lindblom 的回答role所描述的那样，它在技术上不是页面内容的一部分。

有一个“语义”的 CSS 选择器很容易：

[role="alert"] {
  font-size: 2em; /* or what have you */
}
于 2016-03-03T16:06:35.633 回答
8

这个<figure>想法很有趣，但我认为它不适合这里。它缺少的是证明使用标签的实际内容。根据规范，<figure>表示“内容单元” - 表示图像、图表、代码块等，可以选择为此内容提供标题 ( <figcaption>)。说 外面的消息<figcaption>代表一个适当的内容单元将是一个延伸。

在这种情况下，我们也应该谨慎使用<h#>标签，因为消息是次要内容，可能不应该是文档大纲的一部分。

根据修订后的规范，有人可能会争辩说 an<aside>是合适的。在<article>.

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

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

人们也可以争辩说，由于没有专门为这样的功能创建任何东西，一个好的老式的、语义上没有意义<div>的可能是最好的元素。我想这取决于你觉得你的信息有多“切题”。

谢谢，杰夫

于 2013-12-15T20:34:31.973 回答
2

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

从技术上讲，该samp元素被定义为“程序、脚本等的样本输出”。在 HTML 4.01 和 HTML 3.2 中，虽然最初在 HTML 2.0 中是“文字字符序列，通常以等宽字体呈现”，并且在 HTML5 中被重新定义为“程序或计算系统的（样本）输出”。所以它的意思比较模糊，用的也不多，所以用起来也没有什么实际意义。但有人可能会争辩说，samp对来自程序的任何消息使用标记是可以接受的。它是一个文本级元素，因此您需要在内部h3和内部 (any)单独使用它p，或多或少会破坏结构。

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

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

于 2012-11-22T18:21:54.437 回答
1

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

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

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

如果它是需要标题的独立消息，请使用section元素而不是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 …&lt;/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 …&lt;/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 …&lt;/p>
</section>

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

请注意，您可能不想为适用于单个input元素的消息使用标题（例如，当用户没有填写必填字段或输入错误内容等时），因为这些错误消息应该在相应的或直接在元素label旁边。input

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

于 2012-11-23T01:43:30.753 回答
0

如果你想去语义化，你可以使用语义网络方法，为消息和警告创建一个本体，并使用RDFa将它嵌入到你的 HTML 中。

于 2012-11-22T19:28:00.590 回答