Microformat semantics issues

Question

I'm trying to add microformats to my file, but I'm still confused for several reasons.

• Should microformats always be inside the hcard or vcard element?

• Can i use multiple hcards on one page?

• Can I have microformat content inside the hcard tag?

I am working on a site and I have an address in two places on the main page, as well as a callout for the hotline. So I'm just trying to figure out how to place microformats.

Assuming everything should be wrapped in an hcard element, would this be the right way to tag my code for a hotline?

<p class="hcard">Call us 24 hours a day, 7 days a week at <span class="tel hotline">415.441.KIDS (5437)</span></p> 

Is the hotline class normal? Can I put both tel and hotline in the same class attribute? Is it normal that extra text 24/7 is inside the hcard element? What about the letter / number part at the end?

Answer 1

• No.
• Yes.
• Yes.

Your example should look like this:

 <p class="vcard">Call us 24 hours a day, 7 days a week at <span class="tel hotline"><abbr title="415.441.5437" class="value">415.441.KIDS (5437)</abbr></span></p> 

Changes:

• The root class is vcard, not hcard.
• "tel" needs meaning. (It may also have a “type”, the default is “voice.”)
• Use <abbr> to specify a machine-readable value. ("415.441.KIDS (5437)" is not exactly a phone number, this is a description of a phone number.)

Uses the hotline class ok?

Yes.

Is it possible to put both "tel" and "hotline" in the same class attribute?

Yes.

Is it good that the extra 24/7 text is inside the hcard element?

Yes.

What about the letter / number part at the end?

No (see above).

Answer 2

I think you are confused. hcard is one specific microformat (among others):

hCard is a simple, open, distributed format for representing people, companies, organizations and places using the vCard (RFC2426) 1: 1 properties and values ​​in semantic HTML or XHTML. hCard is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and custom XML.

Therefore, you can have many hcards on the page, each of which represents one person, company, etc. For instance. on your company website, one for each office or for people in the organization.