CODEWITHSUNDEEP
htmlsemanticssemantic-markup
ryanve
ryanve

Reputation: 52601

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

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.

Upvotes: 12

Views: 3556

Answers (2)

Jordan Running
Jordan Running

Reputation: 106107

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.

Upvotes: 10

user1136646
user1136646

Reputation: 77

hm.

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

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

maybe

Upvotes: -8

Related Questions