Pondering semantics

I’ve been following Dan Cederholm’s SimpleQuiz series since the beginning, and find it a great way to figure out the most semantical way to mark up something. Every now and then I have to mark up something that I’m not quite sure what the best way to do so is. Sometimes a visit to the collection of SimpleQuizzes will help me make a decision. But not always.

That’s why I thougt I’d post a couple of such questions here. I’ve come across some things that I feel don’t belong in a plain old paragraph or unordered list, and I’m hoping I can get some input as to what the best markup to use in each case is. The first two cases are somewhat similar in that they both include contact information.

Contact info

A number of job titles, each followed by the name, phone number and e-mail address of the person holding that position. For now I’m using a definition list:

<dl>
    <dt>Janitor</dt>
    <dd>John Smith<br />
    Phone: 111-111-111<br />
    E-mail: john.smith@domain.com</dd>
</dl>
Janitor
John Smith
Phone: 111-111-111
E-mail: john.smith@domain.com

According to the W3C, a definition list is probably what should be used here. I haven’t found any examples of this though, so I’m not feeling 100% sure about it. And then there’s the issue of separating the name from the phone number and e-mail address. In the above example I just used the dreaded <br />-element to put them on separate lines, but that may not be the best way since I’ll be stuck with those line breaks and will have to remove them if I change my mind and want to put everything on one line.

Addresses

When putting a company’s address and phone number in a page footer or header, I’m tempted to use the <address>-element:

<address>
    Address: 111 Main Street, Some City<br />
    Phone: 111-111-111
</address>
Address: 111 Main Street, Some City
Phone: 111-111-111

However, the W3C recommendation says that The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form., and I don’t think that is the case here. And the line break is there again.

I guess it’s not exactly the end of the world if contact info and addresses aren’t perfectly semantically marked up, but I’d still like to use the best available way. So, anyone up for suggesting better ways of marking up these kinds of information?

Posted on March 22, 2004 in (X)HTML

Comments

  1. For the first one, definition lists seem right, but it may be more correct to use separate dd tags for each element, since each adds its own information to the definition term, Janitor. And, then if you decide to display everything on one line, you can style it with CSS.

    For the second one, I’d use an inline list of some sort, to tie the information together semantically. Past that, I’m stumped! ;-)

  2. I like the address as you have it. We have to face the facts that HTML is not XML, we can not ascribe perfect semantic meaning to everything. To obsess over such things is a waste of time. Putting the phone and address in a list is a possibility, but I think it would add very little useful information while inflating the HTML and CSS needlessly. While using BRs to separate paragraphs is an obvious abuse, using them to separate address lines strikes me as the obvious purpose of such a tag. Why beat ourselves over the head with some pedantic concept of semantic purity when the answer is simple, obvious, and makes sense?

  3. March 24, 2004 by Roger (Author comment)

    Sharif: multiple dd tags do seem appropriate for the contact info. For the address, I agree with Gabe that using a list won’t really add anything. Maybe a simple line break is the way to go. After all, if I change my mind and want to keep it all on one line I’ll need to add something (most probably a comma) to separate the address from the phone number, which means I’ll have to edit the HTML anyway.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.