Semantic Conversations | Development Articles

Semantic Conversation Mark-up

Introduction

There are interpretations on the W3C specifications on exactly how to mark up quite specific content. This article discuss two different method of marking up conversations on the web.

The Specifications

The World Wide Web Constortiums HTML 4.01 specification states:

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.

http://www.w3.org/TR/html401/struct/lists.html#edef-DL

<dl>
<dt>Term</dt>
<dd>Definition/Description</dd>
</dl>

This provides a good relationship between the speaker and what the speaker says. The default unstyled output may not be what is required but with the use of CSS it can be made to look like dialogs found on a wide range of applications including IRC and personal instant messaging programs such as MSN Messenger.

<dl>
<dt>Trovster</dt>
<dd>Come on need convo examples...</dd>

<dt>Håvard</dt>
<dd>Convo examples?! They're right here!</dd>
</dl>

Unstyled Conversation

Trovster: Come on need convo examples...
Håvard: Convo examples?! They're right here!

MSN Messenger Styled Conversation

This uses the CSS psuedo-class :after and property content which Microsoft Internet Explorer doesn't understand. Using the CSS below will add " says:" after the name.

<dl>
<dt>Trovster</dt>
<dd class="trovster">Come on need convo examples...</dd>
<dt>Håvard</dt>
<dd class="havard">Convo examples?! They're right here!</dd>
</dl>

dl dt
{
color: #666;
}
dl dt:after
{
content: " says:";
}
dl dd
{
margin-left: 20px;
}
dl dd.havard
{
font-family: Lucida Sans Unicode;
color: #0000AD;
}
dl dd.trovster
{
font-family: Arial;
color: #004080;
}

Trovster: Come on need convo examples...
Håvard: Convo examples?! They're right here!

IRC Styled Conversation

This uses the CSS psuedo-classes :after, :before and property content which Microsoft Internet Explorer doesn't understand. Using the CSS below will add < before and > after the name.

dl dd
{
margin-left: 20px;
}
dl dt
{
float: left;
margin-right: 10px;
}
dl dt, dl dd
{
font-family: monospace;
}
dl dt:before
{
content: "<";
}
dl dt:after
{
content: ">";
}

Trovster: Come on need convo examples...
Håvard: Convo examples?! They're right here!

In both the MSN Messenger and IRC styled examples, CSS2 properties were used and as stated before, Internet Explorer doesn't understand these properities. You can add the MSN Messenger " says:" to the the content mark-up, however, the addition of the IRC < and > is purely presentational and should, for clean code, semantics and change of style ease, be placed within the stylesheet.

Better Semantics?

A recorded conversation can be expressed as quotes of each person following in a specific descending time order.

These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks.

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.2

An alternative, more semantic method of mark-up is to use quotes and citations. The HTML tags appropriate to this type of mark-up would be cite, q and blockquote. Below are two examples of semantic mark-up:

<p><cite>Name</cite></p>
<blockquote lang="en-us"><p>Paragraph Quotation.</p></blockquote>

Or alternatively...

<p><cite>Name</cite>
<q lang="en-us">Sentance Quotation.</q></p>

Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element.

http://www.w3.org/TR/html401/struct/text.html#edef-Q

This states that if you use the q HTML element, quotation marks should be added automatically before and after the quotation. If you want to remove these quotation marks, for example when styling MSN Messenger and IRC conversations, you can use the CSS from the example below. Most user-agents apply this however, Internet Explorer doesn't so there will be no visible difference.

Unstyled, Semantic Conversation

<p><cite>Trovster</cite>
<q>Come on need convo examples...</q></p>

<p><cite>Håvard</cite>
<q>Convo examples?! They're right here!</q></p>

Trovster Come on need convo examples...

Håvard Convo examples?! They're right here!

Quotations Removed and Styled Conversation

q
{
display: block;
}
q:before, q:after
{
content: "";
}

Trovster Come on need convo examples...

Håvard Convo examples?! They're right here!.

Combination of Both Methods

Below shows a combination of the definition list, dl, inline quotation, q and citation, cite.

<dl>
<dt><cite>Trovster</cite></dt>
<dd><q>Come on need convo examples...</q></dd>

<dt><cite>Håvard</cite></dt>
<dd><q>Convo examples?! They're right here!.</q></dd<
</dl>

This method provides increased semantic meaning by combining both ideas. It provides more control than the plain q and cite example, but has more meaning than purely using a definition list.

Unrestricted Access

Development Articles