Compound Microformats

This demo shows how compound microformats can be used to progressively enhance HTML with semantic meaning.

Icons are used to mark the start of each microformat. Hover over each example to display its source code.

Some CSS3 selectors are used, which display only in modern browsers.

Comments, questions, suggestions?

Legend

  1. geo 51.498, -0.179
  2. geo shorthand (proposed) Imperial College, London, UK
  3. geo + adr Imperial College London UK (51.498, -0.179)
  4. adr + geo Imperial College London UK ( 51.498, -0.179 )
  5. hCard + adr + geo Imperial College London UK ( 51.498, -0.179 )
  6. hCalendar + rel-tag + hCard + adr + geo (February 16 - 17) Imperial College London UK ( 51.498, -0.179 )
  7. hAtom + hCalendar + rel-bookmark + rel-tag + hCard + adr + geo
    I
    am now at (February 16 - 17) Imperial College London UK ( 51.498, -0.179 )
  8. hReview + hAtom + hCalendar + rel-bookmark + rel-tag + hCard + adr + geo
    I
    am now at the wonderful SemanticCampLondon (February 16 - 17) Imperial College London UK ( 51.498, -0.179 )

Parse This Page

Resources

Credits

License