How to mark up chats and conversations in HTML5

  • HTML5
  • Gabriele Romanato

Chats and dialogues were originally marked up with definition lists because the HTML 4 specifications stated that another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words. Later on, the HTML 5 specifications redefined the semantics behind definition lists.

In HTML 5 definition lists cannot be used to mark up chats and dialogues because the dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements). In this case chats and dialogues were no longer mentioned as an extended use of definition lists. Now the question: how we can semantically mark up chats and dialogues?

A chat or a dialogue can be considered as an ordered list where each item marks up a section of a specific conversation. Since we're reporting the speech of the partecipants, dialogues can be considered as quotations from the involved speakers.

Here's an example of a chat:


<ol class="chat">
	<li>
		<div class="user">
			<img src="avatar-1.png" alt="Lorem"/>
			<h3>Lorem</h3>
		</div>
		<blockquote>
			<p>...</p>
		</blockquote>
	</li>
	<li>
		<div class="user">
			<img src="avatar-2.png" alt="Ipsum"/>
			<h3>Ipsum</h3>
		</div>
		<blockquote>
			<p>...</p>
		</blockquote>	
	</li>
	<!-- continues -->
</ol>

If you're using HTML 5, you can choose the figure and figcaption elements to mark up the avatar image and the username of each user.

References

  1. Definition lists – misused or misunderstood? – (January 27 2004)
  2. Utilizing the Underused (But Semantically Awesome) Definition List – (November 20 2007)
  3. The dl element – (June 3, 2010)
  4. How to mark up conversations
Back to top