CODEWITHSUNDEEP
htmlsemantic-markup
Ross
Ross

Reputation: 47007

Semantic HTML for messages

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?

Upvotes: 3

Views: 1647

Answers (8)

LuAmbros
LuAmbros

Reputation: 181

As @bobince said, the id="2009-03-10T12:04:01+00:00" is invalid.

You should change this:

<span class="timestamp" id="2009-03-10T12:04:01+00:00">
    12:04
</span>

To this:

<time class="timestamp" datetime="2009-03-10T12:04:01+00:00">
    12:04
</time>

You can get more information about the time tag at HTML5 Doctor and W3C:

The time tag on HTML5 offers a new element for unambiguously encoding dates and times for machines while still displaying them in a human-readable way.

The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

...

I agree with the ordered list (ol) solution posted by @Robotsu, except by the time tag I just posted and the incorrect address inside cite tag!

Upvotes: 0

CJM
CJM

Reputation: 12016

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'.

Upvotes: 0

Ms2ger
Ms2ger

Reputation: 15983

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.

Upvotes: 3

allclaws
allclaws

Reputation: 5705

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.

Upvotes: 0

Gavin
Gavin

Reputation: 593

<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.

Upvotes: 1

Henrik Paul
Henrik Paul

Reputation: 67723

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.

Upvotes: 5

cherouvim
cherouvim

Reputation: 31903

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>

Upvotes: 0

bobince
bobince

Reputation: 536409

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).

Upvotes: 3

Related Questions