标记对话（或采访）的最语义方式？

发布于 2024-12-25 17:42:24 字数 378 浏览 3 评论 0原文

我试图找出最语义化的方式来标记这样的东西。

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

原文

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

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦言归人 2025-01-01 17:42:24

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 中是一个很好的选择 - 此信息绝对应该位于标记中。

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

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>

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.

回复收藏 0 原文