Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microformats I: What & Why


Published on

Internal training class held in October 2010. Updated post-presentation with additional details for those unable to attend.

Published in: Technology
  • Be the first to comment

Microformats I: What & Why

  1. 1. MicroformatsHow to add meaning to HTML with:●Microformats,● Microdata,● & RDFa
  2. 2. Part I What are these things?Why would you use them? What do they look like?
  3. 3. What are microformats?● “A set of [...] data formats...”● “An approach to semantic markup which seeks [...] to convey metadata.”● “Simple conventions used [...] to describe a specific type of information...”
  4. 4. What is microdata?● “Allows machine-readable data to be embedded in HTML documents...”● “A simple way to embed semantic markup into HTML documents...”● “A way to label content to describe a specific type of information...”
  5. 5. What is RDFa?● “A [way] to augment visual data with machine- readable hints.”● “[Embeds] rich metadata within web documents.”● “A way to label content to describe a specific type of information...”
  6. 6. Sound similar? They are!They all have common goals:● Semantics - Meaning. Ex: "This is the name of a person."● Metadata - Data about data. Ex: "This is the author of this article."● Machine Readability - Tell the machine what "adlfladkldbcdefg" means to the humans.
  7. 7. How are they different?Individual strengths and weaknesses. But theyre all tryingto solve the same problem.● Different approaches,● Different "specifications,"*● Different "vocabularies,"**● Different "syntaxes."**** All words used loosely.** "Native" vocabs closely related to each.*** The biggest difference.
  8. 8. How are they different?● Microformats: Uses existing HTML4 tags & attributes. Easiest to pick up.● Microdata: New in HTML5. Uses new HTML5 attributes.● RDFa: Adds RDF to XHTML using new attributes. The most complex! (Remember: <tag attribute="value"></tag>)
  9. 9. What are they used for?● Add Meaning to website content ○ How does a machine know that "Blah Blah" is the name of a person? ○ Currently? Context + vast amounts of data to analyze. ○ Microformats allow us to specify "this is a persons name" in our HTML code.
  10. 10. What are they used for?● Describe Relationships in website content ○ We can also use these techniques to describe relationships... ○ Especially between meaningful pieces of website content! ○ For example, we can indicate that a person is affiliated with a particular company.
  11. 11. Why would you want that?● Enable Parsing by... ○ Google (Rich Snippets, Zeitgeist) ○ Yahoo! (Pipes, SearchMonkey) ○ & other miscellaneous ■ aggregators, ■ apps, ■ browser plugins, ■ or your own custom code!
  12. 12. Why would you want that?● By enabling parsing, you enable sharing!● Sharing increases your potential traffic!● Effectively sharing increases your reach!
  13. 13. Why would you want that?● Find-Ability: Better understanding of contents meaning = potentially more targeted traffic.● User Experience: Parsed content can be downloaded and imported into software (ex: contact info or events)!● Workflow Efficiency: Help establish internal standards for class naming and markup patterns. (Emily Lewis,
  14. 14. Who should be interested?Lots of ways & reasons to use microformats et al.They are of especial interest regarding:● Search Engine Optimization● Social Networking● Front End Web Development
  15. 15. Example: Google Rich Snippets People & Orgs Reviews Events
  16. 16. What are common uses?● People & Organizations● Places / Locations● Events● Listings / Products● Dozens More! Custom Formats!
  17. 17. Who uses them?● hCard (Person): Yahoo! Local, Google Rich Snippets, Google Maps, Google Profiles, BrightKite, Twitter,, 37Signals’ Basecamp, Telnic, Gravatar● hCalendar (Event): Facebook, Yahoo! Upcoming, Eventful, Google Rich Snippets, MapQuest Local● hResume (Resume): LinkedIn, SimplyHired, Xing● XFN (Relationships): Twitter, Flickr, Digg, Technorati, Ident Engine, Plaxo, Google Social Graph, (cite: Emily Lewis,
  18. 18. Who uses them?In the real estate industry:●●●●●●
  19. 19. Questions?Who has the authority over these? / Where do the formats come from?Microformats - www.microformats.orgAn independent effort on the part of various web designers & webdevelopers. Its open to input from anyone! They identify common needs -- ie:the need to mark up contact information -- and collaborate to work upformats. Theres a core volunteer group in control (they make decisions basedon an ideology you can read about on the site), but its basically a populistmovement.Microdata - of the HTML5 specification worked on by the WHATWG and W3C. TheW3C is the biggest "standards authority" of the net. There was a big argumentover how to add more semantic markup to HTML. Should they create a millionnew tags or make it extensible like XHTML? Should microformats becomepart of the HTML5 spec? Or RDFa? So WHATWG came up with their ownnew alternative, microdata.RDFa - & RDFa are W3C specifications.
  20. 20. Questions?If there are different vocabularies, where do they come from? Can onevocabulary be used with all the specifications?There are certainly some overlapping vocabularies.The same groups who worked on specifications for microformats, microdata,and RDFa have often also created custom vocabularies to use with theirspecifications.But a vocabulary can also be created by a completely separate group. Or anindividual. Some vocabularies youll come across can be used as amicroformat, microdata, or RDFa (no matter which they were intended for).So how do you choose? Basically, you want to choose the vocabulary thatworks for your situation. One which is understood by whatever searchengine/web application/software that you are hoping to enable.The two "best" places for vocabularies (ones that are easy to learn andunderstood on the web) are and
  21. 21. How to spot a microformat.<div class="vcard">    <h1 class="n fn">        <span class="given-name">Rachael</span>        <span class="family-name">Moore</span>    </h1>    <div class="org">        <span class="organization-name"></span>        <span class="organization-unit">Operations</span>        <span class="title">Web Developer</span>    </div>    <div class="adr">        <span class="street-address">280 John Knox Rd.</span>        <span class="locality">Tallahassee</span>,        <span class="region">Florida</span>         <span class="postal-code">32303</span>    </div></div>
  22. 22. How to spot a microformat.● Uses regular old HTML4 (or new HTML5 tags).● Uses the @class, @rel, @title, @href and other long- established attributes.● @class names or @rel attribute values come from the formats specified at● Microformats have been established the longest and have the widest support.
  23. 23. How to spot microdata.<div itemscope itemtype="">    <h1 itemprop="name">Rachael L. Moore</h1>    <div itemprop="affiliation" itemscope      itemtype="">        <span itemprop="name"></span>        <span itemprop="title">Web Developer</span>    </div>    <div itemprop="address" itemscope      itemtype="">        <span itemprop="street-address">280 John Knox Rd.</span>        <span itemprop="locality">Tallahassee</span>,        <span itemprop="region">Florida</span>         <span itemprop="postal-code">32303</span>    </div></div>
  24. 24. How to spot microdata.● Uses regular old HTML4 or new HTML5 tags.● Uses the new @itemscope, @itemtype, and @itemprop attributes.● Can use @itemtype values and @itemprop names from anywhere! is a good choice because of Googles support, though.● Microdata will be part of HTML5, so its likely it will become the most widely used (but who knows).
  25. 25. How to spot RDFa.<div xmlns:v="" typeof="v:Person">    <h1 property="v:name">Rachael L. Moore</h1>    <div>        <div property="v:affiliation">            <div typeof="v:Organization">                <span property="v:name"></span>            </div>        </div>        <span property="v:title">Web Developer</span>    </div>    <div rel="v:address">        <div typeof="v:Address">            <span property="v:street-address">280 John Knox</span>            <span property="v:locality">Tallahassee</span>,            <span property="v:region">Florida</span>             <span property="v:postal-code">32303</span>        </div>    </div>
  26. 26. How to spot RDFa.● Probably uses XHTML.● Declares a namespace using @xmlns, uses namespaces throughout.● Uses the custom @typof, @property, & @content attributes; also uses @rel, @href, <link>, & <meta>.● Again, can use a vocabulary from anywhere. Vocabs designed by RDF proponents also exist.
  27. 27. How to spot RDFa.● RDFa has the strongest theoretical foundation. Its also the most complicated. It has the ability to express more complicated statements of meaning and more complicated relationships.● ...But it looks like its probably going to remain the least popular of the options.