标记对话(或访谈)的大多数语义方式？

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:选择器添加名称,但我也希望它们可以链接.例如,如果他有一个,我会链接到Ringo的推特个人资料.它也应该在屏幕阅读器中正确读取.

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在必要时添加属性.你的本能不是把名字放在带有:before选择器的CSS中是一个好的 - 这个信息肯定应该在标记中.