Semantic HTML for messages

Question

I'm making a small web-chat utility and am looking for advice on which elements to use for messages.

Here's what I'm thinking of using at the moment:

<p id="message-1">
    <span class="timestamp" id="2009-03-10T12:04:01+00:00">
        12:04
    </span>
    <cite class="admin">
        Ross
    </cite> 
    Lorem ipsum dolor sit amet.
</p>

I'd take advantage of CSS here to add brackets around the timestamp, icons for the cited user etc. I figured it would be silly (and incorrect) to use a blockquote for each message, although I consider the cite correct as it's referring to the user that posted the message.

I know this isn't a) an exact science and b) entirely essential but I'd prefer to use meaningful elements rather than spans throughout. Are there any other elements I should consider? Any microformats?

Answer 1

Seems reasonable to me, except that the ‘id’ is invalid. NAME tokens can't start with a number or contain ‘+’.

Plus if two people spoke at once you'd have non-unique IDs. Perhaps that data should go in another attribute, such as ‘title’ (so you can hover to see the exact timestamp).

Answer 2

What you suggested is already very good. If you want to take it a step further and be able to allow tons of different presentation options with the same markup (at the expense of heavier html) you may want to do something like:

<dl class="message" id="message-1">
    <dt class="datetime">Datetime</dt>
    <dd class="datetime">
        <span class="day">Wed</span>
        <span class="dayOfMonth">11</span>
        <span class="month">Mar</span>
        <span class="year">2009</span>
        <span class="hourMin">17:34</span>
        <span class="sec">33</span>
    </dd>
    <dt class="author">Author</dt>
    <dd class="author">Ross</dd>
    <dt class="message">Message</dt>
    <dd class="message">Lorem ipsum dolor sit amet</dd>
</dl>

Answer 3

HTML isn't very semantic in a customizable way. Nevertheless your format should be understandable in any browser (with proper CSS, as you have pointed out).

What I see in the code example above is very similar to XML. It might be cumbersome and overkill for your needs, but I'd like to point out that you can use XML with XSLT as a substitute to both (X)HTML. This way you can get your tags as semantic as possible, and don't need to compromise with the limitations of the HTML tags.

w3schools has an article about the topic. I could swear that I saw a webpage in sun.com that was done in XML, but I can't find it anymore.

If you don't intend this to be interpreted or parsed by third party software, I'd nevertheless advise against this method, and stick with the proven HTML.

Answer 4

<ol>
    <li class="message" value="1">
     <span class="timestamp" id="2009-03-10T12:04:01+00:00">
      12:04
     </span>
     <cite class="admin">
      <address class="email">
       <a href="mailto:[email protected]">
        Ross
       </a>
      </address>
     </cite> 
     Lorem ipsum dolor sit amet.
    </li>
</ol>

I would try something like the above. Notice I have placed everything in an Ordered list, as comments can be construed in the linear manner fitting an ordered list. Also, I have embedded, inside your Cite tag, an Address tag with an Anchor element. The unfortunately named Address element is actually meant to convey contact information for an Author, so you would probably want to link to the author's email address there.

Answer 5

Since you mention microformats in the question, you are no doubt already familiar with the microformats wiki. It contains a good number of examples for different situations.

Another possibility would be to borrow parts of SIOC, which among other things is an ontology for forums - pretty similar to chat.

By re-using existing formats, you can take advantage of plugins and tools like Operator and maybe get more out of your app for free.

Answer 6

If you're going for semantic HTML, you'll probably want to know that HTML5 doesn't consider your use of the <cite> element correct anymore.

A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.

Answer 7

I'd use XML with XSLT to transform (style) the data.

It makes sense semantically here, but you also have the conversations in a suitable format for archiving (i.e. XML) - I assume you will have some sort of log or 'history'.