标记对话(或面试)的最语义方式? [英] Most semantic way to markup a conversation (or interview)?

问题描述

我正在尝试找出标记此类内容的最语义方式.

I'm trying to figure out the most semantic way to markup something like this.

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

Ideally there'd be the CSS flexibility to do either or to break it into a paragraph with or without the names visible. I considered using the before: selector to add the names, but I also want them to be linkable. For example, I'd link to Ringo's twitter profile if he had one. It also should read properly in screenreaders.

推荐答案

HTML5规范对此进行了讨论，其要旨是:

The HTML5 spec discusses this, the gist of which is:

鼓励

作者使用 p 元素和标点符号标记对话.鼓励出于样式目的需要标记发言人的作者使用 span 或 b .文字包裹在 i 元素中的段落可用于标记舞台方向.

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.

因此，最终，这样的事情:

So, ultimately, something like this:

<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中放置名称，这是一个很好的选择-此类信息绝对应该在标记中.

This would enable styling in the way you describe. You could, of course, also add class attributes if necessary. Your instinct not to put the names in CSS with the :before selector is a good one--this information should definitely be in the markup.

这篇关于标记对话(或面试)的最语义方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！