Chats and dialogues were originally marked up with definition lists because the HTML 4 specifications
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
figcaption elements to mark up the avatar image and the username of each user.
- Definition lists – misused or misunderstood? – (January 27 2004)
- Utilizing the Underused (But Semantically Awesome) Definition List – (November 20 2007)
- The dl element – (June 3, 2010)
- How to mark up conversations