Topic: hCard

The hCard format is Semantic HTML created through the Micoformats process, and based on the vCard format, with additions and modifications made based on user feedback.

Like with all Semantic HTML, including Microformats, hCards are used to make things easier for machines to understand what you are writing about in HTML. With hCards, it makes contact info easier to understand, for machines.

Example

Say we wanted to create an e-mail signature like...

  --
  Joe Blow, B.Sc.

     e-mail: joe@blow.dom
      phone: 604-555-5555
       blog: http://blow.dom/
        

Then we could mark this up with an hCard as follows...

  <address class="vcard">
  --
  <span class="fn n"><span class="given-name">Joe</span> <span class="family-name">Blow</span>, <span class="honorific-suffix">B.Sc.</span></span>

     e-mail: <span class="email">joe@blow.dom</span>
      phone: <span class="tel">604-555-5555</span>
       blog: <span class="url">http://blow.dom/</span>
  </address>
    

Here is another example, that cleverly compacts alot of hCard semantics into a tight space...

  <a class="vcard fn n url" href="http://blow.dom/">Joe Blow</a>
    

hCard Class Names

• adr
  • type
  • post-office-box
  • street-address
  • extended-address
  • region
  • locality
  • postal-code
  • country-name
• agent
• bday
• class
• category
• email
  • type
  • value
• fn
• geo
  • latitude
  • longitude
• key
• label
• logo
• mailer
• n
  • honorific-prefix
  • given-name
  • additional-name
  • family-name
  • honorific-suffix
• nickname
• note
• org
  • organization-name
  • organization-unit
• photo
• rev
• role
• sort-string
• sound
• title
• tel
  • type
  • value
• tz
• uid
• url

See Also

HTML address Element
rel-author
rev-made