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.
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: email@example.com</dd> </dl>
- John Smith
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.
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
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?
Subscribe / follow
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost