Semantisches HTML für Bestätigungs-, Fehler- und Warnmeldungen

Question

Wie lauten die Meinungen der Menschen zum semantischen HTML für Bestätigungs-, Fehler- und Warnmeldungen?

Zur Zeit habe ich etwas Einfaches wie:

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

Wobei die Nachricht-Warnung Klasse von Nachrichtenbestätigung oder Nachricht-Fehler ersetzt wird, wenn die Nachricht eine andere Art ist.

Nur interessiert, wenn es einen semantischen Weg gibt, dies zu markieren?

Vielen Dank im Voraus

Answer 1

Nein, es gibt in HTML kein Element ist, das eine Bestätigung, Fehler bezeichnet, oder Warnmeldung.

Technisch wurde das samp Element als "Beispielausgabe von Programmen, Skripten usw." in HTML 4.01 und in HTML 3.2 definiert, obwohl es ursprünglich in HTML 2.0 als "Folge von Literalzeichen, typischerweise in einem Mono- Font "und in HTML5 etwas neu definiert als" (Beispiel) Ausgabe von einem Programm oder Computersystem ". Seine Bedeutung ist also ziemlich vage, und es wird nicht viel benutzt, also hat es keinen Sinn, es zu benutzen. Aber es könnte argumentiert werden, dass es akzeptabel ist, samp Markup für jede Nachricht von einem Programm zu verwenden. Es ist ein Text-Level-Element, so dass Sie es separat innerhalb h3 und innerhalb (beliebig) p, mehr oder weniger brechen die Struktur verwenden müssen.

Es kann auch gesagt werden, dass die Nachrichten Zitate aus einer externen Quelle sind, so dass sie in verpackt werden konnten. Die Verwendung von h3 vs. einigen anderen Markups ist nicht wirklich eine semantische Frage, aber strukturell: Ist das eine Überschrift für einen Inhalt auf der dritten Ebene der Verschachtelung?

Answer 2

Wenn Sie semantisch werden möchten, können Sie einen semantischen Web-Ansatz verwenden, indem Sie eine Ontologie für Nachrichten und Warnungen erstellen und RDFa verwenden, um sie in Ihren HTML-Code einzubetten.

Answer 3

Ich denke, die strong element ist ein geeignetes Element für solche Nachrichten.

Sie könnten mehrerestrong Elemente verwenden, um die Bedeutung der Nachricht anzuzeigen:

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

ich einen section element anstelle eines div verwenden würde, so dass Sie ein h1 als Überschrift verwenden können. Jetzt können Sie diesen Block überall dort einfügen, wo Sie ihn brauchen, ohne die Überschrift anzupassen. Im Falle von schwerwiegenden Fehlern, die für die ganze Seite gelten, sollte es das erste Element auf der Seite sein.

Verschiedene Varianten sind möglich:

<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> 

Welches von der Art der Nachricht abhängig zu verwenden, wenn die genauen Fehler wissen, sind, wenn zusätzlicher Hilfetext zur Verfügung gestellt, und wenn oder wenn nicht mehrere Nachricht könnte kommen zur gleichen Zeit.

Beachten Sie, dass Sie wahrscheinlich keine Überschrift für Nachrichten verwenden möchten, die für ein einzelnes Element input gelten (z. B. wenn der Benutzer ein erforderliches Feld nicht ausgefüllt oder falschen Inhalt usw. eingegeben hat)), da diese Fehlermeldungen in den entsprechenden label resp. direkt neben dem input Element.

Für die Zugänglichkeit sollten Sie einen Blick auf WAI-ARIA werfen. Ich denke, aria-live="assertive" könnte eine geeignete Möglichkeit sein, Fehlermeldungen zu markieren, aber ich kenne ARIA nicht gut, also sollten Sie unbedingt vor der Verwendung darüber lesen.

Answer 4

Kann ich vorschlagen <figure>?

Auszug aus HTML5 Doctor (und sie aus W3C):

Die Figur Element eine Inhaltseinheit darstellt, die gegebenenfalls mit einer Beschriftung, ist, dass in sich geschlossene, die typischerweise als eine einzelne Einheit referenziert wird aus Der Hauptfluss des Dokuments, der vom Hauptfluss des Dokuments entfernt werden kann, ohne die Bedeutung des Dokuments zu beeinträchtigen.

Hier können die Fragen beantworten zuerst:

• Ist ein solcher Dialog eine einzelne Einheit? Ja
• Ist ein solcher Dialog in sich abgeschlossen? Ja
• Kann ein solcher Dialog aus dem Dokument entfernt werden, ohne die Dokumentbedeutung zu beeinflussen? Ja

Ja, es passt ein <figure> perfekt.

Und die <figcaption> ist besonders gut für Titelleisten/Überschriften.

Also, würde ich mit <figure> gehen, ohne auch nur versuchen weiter zu suchen:

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

Answer 5

Die <figure> Idee ist interessant, aber ich glaube nicht, dass hier paßt. Was es fehlt, ist der eigentliche Inhalt, um die Verwendung des Tags zu rechtfertigen. Gemäß der Spezifikation stellt <figure> eine "Inhaltseinheit" dar - was ein Bild, ein Diagramm, einen Codeblock usw. bedeutet, die optional eine Beschriftung für diesen Inhalt haben können (<figcaption>). Es wäre eine Strecke zu sagen, dass die Nachricht außerhalb der <figcaption> eine geeignete Einheit des Inhalts darstellt.

Wir sollten auch vorsichtig sein, <h#> Tags in dieser Instanz zu verwenden, da die Nachricht sekundärer Inhalt ist und sollte wahrscheinlich nicht Teil der Dokumentgliederung sein.

Man könnte argumentieren, unter der revised spec, dass eine <aside> wäre angemessen. Es wird jetzt als "tangentialer Inhalt" betrachtet, wenn es außerhalb eines <article> verwendet wird.

<strong> wäre für den "Titel" der Nachricht geeignet, da es ein semantisch wichtiger Teil der Nachricht, aber kein Dokumentkopf ist. So könnte der Code aussehen so:

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

Man könnte auch argumentieren, da gibt es nichts, speziell für ein solches Merkmal geschaffen, dass eine gute altmodische, semantisch bedeutungs <div> könnte das beste Element sein.Ich denke, es kommt darauf an, wie "tangential" Sie Ihre Botschaften fühlen.

Danke, Jeff

Answer 6

Alerts are one of the semantics that ARIA added to HTML, denn es gibt in "reinen" HTML zu tun, keine einfache Art und Weise ist. Daraus folgt:

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

Ich mag persönlich <aside> als das Element verwenden, um die role auf zu schlagen - es ist technisch nicht Teil des Inhalts der Seite, wie von Jeff Lindblom's answer beschrieben.

einen "semantischen" CSS-Selektor für diese zu haben, ist einfach genug:

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