• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Whenever you search in PBworks, Dokkio Sidebar (from the makers of PBworks) will run the same search in your Drive, Dropbox, OneDrive, Gmail, and Slack. Now you can find what you're looking for wherever it lives. Try Dokkio Sidebar for free.



Page history last edited by PBworks 15 years, 8 months ago

Notes from Microformats Session


Topics to Cover


AUDIO: MF-barcamp_08_26_2006.ogg





  • Read/parse/write microformats
  • What kinds of data can be represented?


Developers / Practical Issues

  • Events in blog posts, etc.
  • HTML is hard to parse
  • Why use HTML instead of "XML"
  • When not to use microformats


What's New

  • What's new in microformats
  • Process? Contributions?
  • Where is microformats heading? What's the vision?
  • Progress on Microformats zen garden?
  • Current developments / media types


Session Notes


Why were they created?

  • HTML is widely understood
  • HTML is universal to read and port
  • There's room to build on top of HTML
  • Can embed rich, structured data into a web page that's both human & machine readable
  • Use accepted solutions (like vCard) to create Microformats that work for the web (hCard)
  • It's better to have accurate, visible data than arbitrary invisible data
  • BetaThetaPi EDUCamp October 19th 2007

How to Use Microformats

  • Example: using hCard
  • Example: marking up blogrolls using hCard and XFN
  • One important reason to use HTML is the ability to add multiple classnames (as opposed to XML)<a href="http://www.agtile.com">countertops</a>
  • You can use rel="me" to aggregate different parts of your identity (see also XFN Identity Consolidation
  • You can use document fragments (http://www.yourname.com/contacts.html#friends) to specify specific contacts or sets of your contacts



  • There are many libraries to parse HTML
  • Every microformat has a root elements, you can pull classnames out of the root elements. See hCard parsing for example.
  • There are some special cases (check for URL in HREF first).


Why use HTML

  • Part of the culture of information as things on the web
  • Every single piece of content you create has the potential to be shared on the Web
  • Ex: chat transcripts wrapped in < pre > because there's no standard chat format (who's saying what, etc.) Using HTML would be an instant way of sharing.
  • Ex: iCalendar support via using hCalendar translation to .ics stream -- it's less work to just do it via HTML and Microformats than to do .ics support directly


Markup up Events

  • Ex: go to barcamp.org and check out the Subscribe to hCalendar link, view the source<a href="http://www.svt.pl">pozycjonowanie</a>
  • See the hCalendar creator


When Not to Use Microformats

  • When there isn't an established standard, or wide range of existing behavior
  • If you're doing something very specific or esoteric
  • In those cases, mark up as semantically as you can to build up an existing repository



  • By simply using punctuation, using @ signs, etc., you can embed semantics in very short content.


Microformats Zen Garden

  • All microformats use the same class names, so:
  • If people create stylesheets to make Microformts pretty, they can be reused.



(more notes...)


Barcamp Stanford


Tantek Celik


  • Microformats = HTML, slightly extended


  • Anyone who knows HTML can learn Microformats in under an hour!


Things people want to learn about today:


What's new?

  • Events in blogpostings
  • Read/parse/write
  • What kinds of data can be represented?
  • HTML it hard to parse
  • Why use HTML instead of "XML"?
  • Community process? Contributions?
  • So many standards to choose from...
  • When NOT to use microformats?
  • Picoformats
  • Microformats "Zen garden"
  • Media/audio/video
  • When is it heading? Vision?
  • Why were they created?


Example of microformat markup:


<div class="vcard">

<div class="fn">Tantek Celik<div>

<a class="url" href="http://tantek.com">My site</a>

<a class="email" href="mailto:asdf@example.com">My email</a>