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

Question

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.

Answer 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.