Самый семантический способ разметки разговора (или интервью)?

Question

Я пытаюсь найти наиболее семантический способ разметки чего-то подобного.

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

или

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

В идеале, была бы гибкость CSS, позволяющая сделать или разбить его на абзац с видимыми именами или без них. Я решил использовать селектор before: для добавления имен, но я также хочу, чтобы они были связанными. Например, я бы связался с твиттером Ринго, если бы он был. Он также должен правильно читаться в программах чтения с экрана.

Answer 1

Спецификация HTML5 обсуждает это , суть которого:

Авторам рекомендуется отмечать разговоры, используя p элементы и знаки препинания. Авторам, которым необходимо пометить говорящего в целях стилизации, рекомендуется использовать span или b. Абзацы с текстом, заключенным в элемент i, можно использовать для разметки направлений сцены.

Итак, в конечном итоге, что-то вроде этого:

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

Это позволило бы стилизовать так, как вы описываете. Вы можете, конечно, также добавить class атрибутов, если это необходимо. Ваш инстинкт не помещать имена в CSS с помощью селектора :before хорош - эта информация обязательно должна быть в разметке.

Answer 2

гм.

Совет - используйте xml, чтобы пометить его. Должно облегчить работу с более поздними

что-то вроде <voice speaker="John"></voice>

возможно