Il modo più semantico per contrassegnare una conversazione (o un'intervista)?

Question

Sto cercando di capire il modo più semantico per contrassegnare qualcosa come questo.

John: blah blah 
Paul: blah blah 
George: blah blah 
Ringo: blah blah 

o

John: blah blah 
Paul: blah blah 
George: blah blah 
Ringo: blah blah 

Idealmente ci sarebbe la flessibilità CSS per fare uno o di rompere in un paragrafo, con o senza i nomi visibili. Ho preso in considerazione l'utilizzo del selettore before: per aggiungere i nomi, ma voglio anche che siano collegabili. Ad esempio, collegherei al profilo twitter di Ringo se ne avesse uno. Dovrebbe anche essere letto correttamente negli screen reader.

Answer 1

Le specifiche HTML5 discusses this, il senso di che è:

autori sono invitati a contrassegnare le conversazioni utilizzando p elementi e punteggiatura. Gli autori che hanno bisogno di contrassegnare l'oratore per scopi di stile sono incoraggiati a utilizzare span o b. I paragrafi con il loro testo inserito nell'elemento i possono essere utilizzati per contrassegnare le indicazioni di fase.

Quindi, in definitiva, qualcosa di simile:

<p><span>John:</span> blah blah</p> 

<p><span>Paul:</span> blah blah</p> 

<p><span>George:</span> blah blah</p> 

<p><span>Ringo:</span> blah blah</p> 

Ciò consentirebbe stile nel modo di descrivere. Potresti, naturalmente, aggiungere anche gli attributi class se necessario. Il tuo istinto a non mettere i nomi in CSS con il selettore :before è buono - questa informazione dovrebbe essere sicuramente nel markup.

Answer 2

hm.

Suggerimento: utilizzare xml per contrassegnarlo. Dovrebbe rendere più facile lavorare con più tardi

qualcosa come <voice speaker="John"></voice>

forse