13

確認、エラー、および警告メッセージのセマンティック HTML に関する人々の意見は?

現在、私は次のような単純なものを持っています:

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

これにより、メッセージが異なるタイプの場合、クラスはormessage-warningに置き換えられます。message-confirmationmessage-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 に答える
2

いいえ。HTML には、確認、エラー、または警告メッセージを示す要素はありません。

技術的には、samp要素は「プログラム、スクリプトなどからのサンプル出力」として定義されています。HTML 4.01 および HTML 3.2 では、元は HTML 2.0 で「通常は等幅フォントでレンダリングされるリテラル文字のシーケンス」として定義され、HTML5 では「プログラムまたはコンピューティング システムからの (サンプル) 出力」として再定義されています。そのため、その意味はかなり曖昧であり、あまり使用されていないため、実際に使用する意味はありません. sampしかし、プログラムからのメッセージにマークアップを使用することは容認できると主張するかもしれません。h3これはテキストレベルの要素であるため、 (any)の内部と内部で別々に使用する必要があり、p多かれ少なかれ構造を壊します。

メッセージは外部ソースからの引用であるとも言えますblockquote。

他のマークアップの使用とh3他のマークアップの使用は、実際には意味論的な問題ではなく、構造的な問題です。これは、ネストの第 3 レベルにあるコンテンツの見出しですか?

于 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 に答える