Most semantic way to markup a conversation (or interview)?

我与影子孤独终老i 提交于 2021-01-21 07:21:28

问题


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 

or

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.


回答1:


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.




回答2:


hm.

Tip - use xml to mark it up. Should make it easier to work with later

something like <voice speaker="John"></voice>

maybe



来源:https://stackoverflow.com/questions/8798685/most-semantic-way-to-markup-a-conversation-or-interview

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!