Semantico HTML per messaggi di conferma, errore e avvertenze

Question

Quali sono le opinioni delle persone sull'HTML semantico per i messaggi di conferma, di errore e di avviso?

Attualmente ho qualcosa di semplice come:

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

Per cui la classe di segnalazione di allarme viene sostituito dal messaggio-conferma o messaggio di errore se il messaggio è un diverso tipo.

Interessato solo se esiste un modo più semantico di contrassegnarlo?

Grazie in anticipo

Answer 1

No. Non v'è alcun elemento in HTML che denota una conferma, di errore o messaggio di avviso.

Tecnicamente, l'elemento samp è stato definito come "output di esempio da programmi, script, ecc." In HTML 4.01 e in HTML 3.2, sebbene originariamente in HTML 2.0 come "sequenza di caratteri letterali, in genere resi in un formato mono- carattere distanziato "e in qualche modo ridefinito in HTML5 come" (esempio) output da un programma o da un sistema informatico ". Quindi il suo significato è piuttosto vago, e non è usato molto, quindi non c'è un vero motivo per usarlo. Ma si potrebbe sostenere che è accettabile usare il markup samp per qualsiasi messaggio da un programma. Si tratta di un elemento a livello di testo, quindi è necessario utilizzarlo separatamente all'interno di h3 e all'interno di qualsiasi (p, più o meno rottura della struttura.

Si potrebbe anche dire che i messaggi sono citazioni da una fonte esterna, in modo che possano essere impacchettati all'interno di .

L'uso di h3 rispetto ad altri markup non è in realtà una questione semantica, ma strutturale: si tratta di un titolo per alcuni contenuti al 3 ° livello di nidificazione?

Answer 2

Se vuoi diventare semantico, puoi utilizzare un approccio basato sul web semantico creando un'ontologia per i messaggi e gli avvisi e utilizza RDFa per incorporarlo nel codice HTML.

Answer 3

Penso che lo strong element sia un elemento appropriato per tali messaggi.

Si potrebbe utilizzare diversistrong elementi per indicare l'importanza del messaggio:

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

userei un section element invece di un div, in modo da poter utilizzare un h1 come intestazione. Ora puoi inserire questo blocco ovunque ti serva nel tuo documento, senza dover regolare il livello di intestazione. In caso di errori gravi che si applicano a tutta la pagina, dovrebbe essere il primo elemento della pagina.

Diverse varianti sono possibili:

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

quale usare dipende dal tipo di messaggio, se l'errore esatto è sapere, se non viene fornito il testo di ulteriore aiuto, e se o se non più di messaggio potrebbe venire allo stesso tempo.

Si noti che probabilmente non si desidera utilizzare un'intestazione per i messaggi che si applicano a un singolo elemento input (ad esempio quando l'utente non ha compilato un campo obbligatorio o inserito un contenuto errato ecc.), poiché questi messaggi di errore dovrebbero essere nel corrispondente label risp. direttamente accanto all'elemento input.

Per l'accessibilità, è necessario dare un'occhiata a WAI-ARIA. Penso che aria-live="assertive" potrebbe essere un modo appropriato per contrassegnare i messaggi di errore, ma non conosco bene l'ARIA, quindi dovresti assolutamente leggerlo prima dell'uso.

Answer 4

Posso suggerire <figure>?

Estratto da HTML5 Doctor (e, da W3C):

L'elemento figura rappresenta un'unità di contenuti, eventualmente con una didascalia, che è auto-contenuto, che è tipicamente riferimento come una singola unità dal il flusso principale del documento, che può essere allontanato dal flusso principale del documento senza influire sul significato del documento.

Consente rispondere alle domande prima:

• È un tale dialogo una sola unità? Sì
• Questa finestra di dialogo è autonoma? Sì
• È possibile allontanare una tale finestra di dialogo dal documento senza influire sul significato del documento? Sì

Sì, si inserisce un <figure> perfettamente.

E, lo <figcaption> è particolarmente indicato per le barre del titolo.

Quindi, mi piacerebbe andare con <figure> senza nemmeno cercare di guardare oltre:

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

Answer 5

L'idea <figure> è interessante, ma non credo che si adatta qui. Quello che manca è il contenuto effettivo per giustificare l'uso del tag. Secondo le specifiche, <figure> rappresenta una "unità di contenuto", ovvero un'immagine, un diagramma, un blocco di codice, ecc. Che può avere facoltativamente una didascalia per questo contenuto (<figcaption>). Sarebbe un limite affermare che il messaggio all'esterno dello <figcaption> rappresenta un'unità di contenuto appropriata.

Dobbiamo anche essere cauti nell'utilizzare i tag in questa istanza, poiché il messaggio è contenuto secondario e probabilmente non dovrebbe far parte della struttura del documento.

Si potrebbe argomentare, sotto lo revised spec, che uno <aside> sarebbe appropriato. Ora è considerato "contenuto tangenziale" se utilizzato all'esterno di <article>.

<strong> sarebbe appropriato per il "titolo" del messaggio, poiché è una parte semanticamente più importante del messaggio, ma non un'intestazione del documento. Così il codice potrebbe essere così:

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

Si potrebbe anche sostenere, dal momento che non c'è nulla di creato appositamente per tale funzione, che una buona, semanticamente insignificante potrebbe essere <div> l'elemento più vecchio stile.Immagino che dipenda da quanto "tangenziale" senti i tuoi messaggi.

Grazie, Jeff

Answer 6

Alerts are one of the semantics that ARIA added to HTML, perché non c'è modo semplice di fare in HTML "puro". Quindi:

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

personalmente mi piace usare <aside> come elemento di schiaffeggiare il role su - non è tecnicamente parte del contenuto della pagina, come descritto da Jeff Lindblom's answer.

Avere un selettore CSS "semantica" per questo è abbastanza facile:

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