html - 标记对话(或采访)的最语义方式？

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 规范 discusses this ，其要点是:

Authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

所以，最终，是这样的:

<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 中的本能是很好的——此信息绝对应该包含在标记中。