[microformats-discuss] encoding adr and tel types in hCard

[Mark Rickerby]

Hi all...

Am in the process of putting some contact pages online for a client,
and thought it would be a great idea to make them as vCard compatible
as possible. So far I haven't done anything with hCard beyond the most
basic personal contact information, and subsequently, have run into a
bit of confusion trying to encode business address and telephone
details without adding a whole lot of extra nested tags.

Basically, my approach was to focus on the visual display first and
foremost, and then once the visual design was complete, work
additional semantics into the HTML. I've been testing pages with the
XSL stylesheets from http://suda.co.uk/projects/X2V/ and it seems to
work fine - but trying to add the additional semantics of a "business"
has proved to be a little bit tricky.

Below is an abbreviated snippet of the markup I'm using:

    <h3>Visit:</h3>
    <div class="adr">
       <span class="street-address">Level 6, Press House, Willis St</span>,
       <span class="locality">Wellington</span>
    </div>

    <h3>Post:</h3>
    <div class="adr">
       <span class="postal">PO Box 27-290 Wellington</span>
    </div>

The way the street address is encoded here works absolutely fine, but
trying to add an additional layer of semantics to denote this as a
"business" contact is what I'm unsure about.

Firstly, is it wrong to use the "adr" element twice here? This postal
information isn't showing up at all from the X2V transform.

Ideally, I would like to add the "address types" to the base
containing element, which would alleviate the need to add an
additional <span> to denote this information...

eg:

  <div class="adr work">
      <span class="street">...</span>
      <span class="locality">...</span>
  </div>

rather than:

  <div class="adr">
     <span class="work">
       <span class="street">...</span>
       <span class="locality">...</span>
     </span>
  </div>

I'm not sure how sensible this idea is, but it may also relate to
encoding phone numbers. Currently X2V does great things if you encode
your phone numbers like:

  <div class="tel"><span class="fax">(+64) etc...</span></div>

This is cool, but I'm wondering if it is the best way. I would be
absolutely fine with this if I was adding separate icons to the layout
for different tel types, but very rarely would I ever need that much
specificity.

So does <div class="tel fax"></div>, etc make sense, or is it always
better to encode the specific types as a separate child elements?

In my case, the presentation *has* to drive the markup. The following
seems to be right...

  <div class="tel">
     <span class="fax">...</span>
     <span class="work">...</span>
     <span class="cell">...</span>
  </div>

... but this won't always be possible presentation wise, for example,
when the design needs to show phone numbers on separate lines (or
<gasp> uses a <table> to display the details). Which means lots of
separate < class="tel" > elements.

Hopefully this makes sense, sorry if it's confused, or I'm overly
repeating myself.

The examples on the wiki don't yet go into this level of detail. Once
I'm more clear on how addresses should be encoded, I'd be happy to add
some additional examples there.

Regards,
Mark