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

1. Microformats
How to add meaning to HTML with:
●Microformats,
● Microdata,
● & RDFa

2. Part I
What are these things?
Why would you use them?
What do they look like?

3. What are microformats?
● microformats.org: “A set of [...] data formats...”
● wikipedia.org: “An approach to semantic markup which
seeks [...] to convey metadata.”
● google.com: “Simple conventions used [...] to describe a
specific type of information...”

4. What is microdata?
● w3.org: “Allows machine-readable data to be embedded
in HTML documents...”
● wikipedia.org: “A simple way to embed semantic markup
into HTML documents...”
● google.com: “A way to label content to describe a
specific type of information...”

5. What is RDFa?
● w3.org: “A [way] to augment visual data with machine-
readable hints.”
● wikipedia.org: “[Embeds] rich metadata within web
documents.”
● google.com: “A way to label content to describe a
specific type of information...”

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. How are they different?
Individual strengths and weaknesses. But they're all trying
to 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. 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. 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 person's
name" in our HTML code.

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. 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. Why would you want that?
● By enabling parsing, you enable sharing!
● Sharing increases your potential traffic!
● Effectively sharing increases your reach!

13. Why would you want that?
● Find-Ability: Better understanding of content's
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, http://msdn.microsoft.com/en-us/scriptjunkie/ff979268.aspx)

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. Example: Google Rich Snippets
People &
Orgs
Reviews
Events

16. What are common uses?
● People & Organizations
● Places / Locations
● Events
● Listings / Products
● Dozens More! Custom Formats!

17. Who uses them?
● hCard (Person): Yahoo! Local, Google Rich Snippets,
Google Maps, Google Profiles, BrightKite, Twitter,
Last.fm, 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, Last.fm
(cite: Emily Lewis, http://msdn.microsoft.com/en-us/scriptjunkie/ff979268.aspx)

18. Who uses them?
In the real estate industry:
● realestate.com
● forrent.com
● number1expert.com
● zillow.com
● realestate.tampabay.com
● neighborcity.com

19. Questions?
Who has the authority over these? / Where do the formats come from?
Microformats - www.microformats.org
An independent effort on the part of various web designers & web
developers. It's open to input from anyone! They identify common needs -- ie:
the need to mark up contact information -- and collaborate to work up
formats. There's a core volunteer group in control (they make decisions based
on an ideology you can read about on the site), but it's basically a populist
movement.
Microdata - www.w3.org/TR/html5/
Part of the HTML5 specification worked on by the WHATWG and W3C. The
W3C is the biggest "standards authority" of the 'net. There was a big argument
over how to add more semantic markup to HTML. Should they create a million
new tags or make it extensible like XHTML? Should microformats become
part of the HTML5 spec? Or RDFa? So WHATWG came up with their own
new alternative, microdata.
RDFa - www.w3.org/TR/xhtml-rdfa-primer/
RDF & RDFa are W3C specifications.

20. Questions?
If there are different vocabularies, where do they come from? Can one
vocabulary 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 their
specifications.
But a vocabulary can also be created by a completely separate group. Or an
individual. Some vocabularies you'll come across can be used as a
microformat, microdata, or RDFa (no matter which they were intended for).
So how do you choose? Basically, you want to choose the vocabulary that
works for your situation. One which is understood by whatever search
engine/web application/software that you are hoping to enable.
The two "best" places for vocabularies (ones that are easy to learn and
understood on the web) are microformats.org and data-vocabulary.org.

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">Homes.com</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. 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.org.
● Microformats have been established the longest and
have the widest support.

23. How to spot microdata.
<div itemscope itemtype="http://www.data-vocabulary.org/Person/">
<h1 itemprop="name">Rachael L. Moore</h1>
<div itemprop="affiliation" itemscope
itemtype="http://www.data-vocabulary.org/Organization/">
<span itemprop="name">Homes.com</span>
<span itemprop="title">Web Developer</span>
</div>
<div itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address/">
<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. 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! data-vocabulary.org is a good choice
because of Google's support, though.
● Microdata will be part of HTML5, so it's likely it will
become the most widely used (but who knows).

25. How to spot RDFa.
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<h1 property="v:name">Rachael L. Moore</h1>
<div>
<div property="v:affiliation">
<div typeof="v:Organization">
<span property="v:name">Homes.com</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. 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. How to spot RDFa.
● RDFa has the strongest theoretical foundation. It's also
the most complicated. It has the ability to express more
complicated statements of meaning and more
complicated relationships.
● ...But it looks like it's probably going to remain the least
popular of the options.