Microformats Semantics Questions

StackOverflow https://stackoverflow.com/questions/4661895

  •  10-10-2019
  •  | 
  •  

Question

I'm trying to get into adding microformats to my site, but I'm still confused about a couple of things.

  1. Do microformats always have to be within an hcard or vcard element?

  2. Can I have multiple hcards on one page?

  3. Can I have non-microformat content inside an hcard tag?

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

Assuming everything has to be wrapped in an hcard element, would this be the correct way to mark up my code for the hotline callout?

<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 using the class "hotline" ok? Can I put both "tel" and "hotline" in the same class attribute? Is it ok that that extra 24/7 text is inside the hcard element? What about the letters/numbers part at the end?

Was it helpful?

Solution

  1. No.
  2. Yes.
  3. 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:

  1. The root class is vcard, not hcard.
  2. The "tel" needs a value. (It can also have a "type", which defaults to "voice".)
  3. Use <abbr> to indicate the machine-readable value. ("415.441.KIDS (5437)" isn't quite a phone number; it's a description of a phone number.)

Is using the class "hotline" ok?

Yes.

Can I put both "tel" and "hotline" in the same class attribute?

Yes.

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

Yes.

What about the letters/numbers part at the end?

No (see above).

OTHER TIPS

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 a 1:1 representation of vCard (RFC2426) 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 arbitrary XML.

Therefore you can have many hcards in a page, each representing one people, company, etc. E.g. in your company's site, one for each office or for people in the organisation

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top