2. Hi!
• I’m a web designer for Pitney Bowes
Business Insight
• I love web standards, semantic markup
and CSS, accessibility, usability and
microformats
• I write about web design (and other
topics) at A Blog Not Limited
• I just wrote Microformats Made Simple
Microformats: Web Semantics & More
3. Today, you’ll learn:
• What are microformats
• Benefits of microformats
• How to enrich your content with some common
microformats
• Where you can see microformats in action
• Lots of resources to help you publish
microformats
Microformats: Web Semantics & More
6. Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.
Microformats: Web Semantics & More
8. Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
9. Smart
content
Building blocks that
enable users to own,
control, move and share
their data on the web.
Microformats: Web Semantics & More
10. Smart
content
Building blocks that
enable users to own,
control, move and share Markup, with
their data on the web. more meaning
Microformats: Web Semantics & More
12. Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.
Microformats: Web Semantics & More
13. Microformats are sets of HTML
attributes and values that are applied to
common web content - people, events,
blog posts, reviews, tags - to provide
more meaning.
Content published with microformats can
be extracted by software and indexed,
downloaded, searched for, saved, cross-
referenced or combined.
Microformats: Web Semantics & More
15. XFN & Identity consolidation
Assigned to links to sites that represent you online:
Microformats: Web Semantics & More
16. XFN & Identity consolidation
Assigned to links to sites that represent you online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>
Microformats: Web Semantics & More
33. The basics
• Use existing standards: (X)HTML
• Emphasize semantics (POSH)
• Intentionally simple
• Address a specific “problem”
• Humans first, machines second
Microformats: Web Semantics & More
34. The benefits
• Semantics
• User experience enhancements
• More meaningful search results
• Encourages consistency and standards
• Minimal development effort
• No need for software or special technologies
• Enables sharing and re-use of your web content
Microformats: Web Semantics & More
35. Who benefits?
• Managers
• Developers
• Designers
• Content Authors
• Users
Microformats: Web Semantics & More
37. EVERYONE BENEFITS
*BLATANT PLUG WARNING*
Check out Microformats Role Play for more on how microformats benefit different people
Microformats: Web Semantics & More
39. Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>
Microformats: Web Semantics & More
40. Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content
<a href="/tags/microformats" rel="tag">
microformats</a>
Indicates the link destination (href) is to a page that
tells what the current page - or part of the current
page - is about.
Microformats: Web Semantics & More
46. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
Microformats: Web Semantics & More
47. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
• H2VX Contacts Conversion Service
Microformats: Web Semantics & More
48. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
• H2VX Contacts Conversion Service
• Operator Plug-in for Firefox
Microformats: Web Semantics & More
49. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
• H2VX Contacts Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
Microformats: Web Semantics & More
50. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
• H2VX Contacts Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
Microformats: Web Semantics & More
51. hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.
• H2VX Contacts Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
• Technorati's Contacts Feeds Service
Microformats: Web Semantics & More
60. Worth noting
• Markup doesn't matter, but it should be POSH
Microformats: Web Semantics & More
61. Worth noting
• Markup doesn't matter, but it should be POSH
• Sometimes you need to add non-semantic
elements such as <span> and <div>
Microformats: Web Semantics & More
62. Worth noting
• Markup doesn't matter, but it should be POSH
• Sometimes you need to add non-semantic
elements such as <span> and <div>
• Attribute values are case-sensitive
Microformats: Web Semantics & More
63. Worth noting
• Markup doesn't matter, but it should be POSH
• Sometimes you need to add non-semantic
elements such as <span> and <div>
• Attribute values are case-sensitive
• Root properties cannot be combined with
sub-properties
Microformats: Web Semantics & More
64. Worth noting
• Markup doesn't matter, but it should be POSH
• Sometimes you need to add non-semantic
elements such as <span> and <div>
• Attribute values are case-sensitive
• Root properties cannot be combined with
sub-properties
• You don't need additional class values for
styling, but you can use them
Microformats: Web Semantics & More
66. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
Microformats: Web Semantics & More
67. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
• Operator Plug-in for Firefox
Microformats: Web Semantics & More
68. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
Microformats: Web Semantics & More
69. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
Microformats: Web Semantics & More
70. hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars
• H2VX Events Conversion Service
• Operator Plug-in for Firefox
• Tails Export Plug-in for Firefox
• Oomph Microformats Toolkit
• Technorati's Events Feeds Service
Microformats: Web Semantics & More
73. 1 Content
STEP
009 a t DOE ,
Inter Lab 2 a imed elopers
k shop ite dev
a y wor , webs a nage
rs
A 4-d asters r s&m
w ebm p develope es.
we b ap et resourc 09
of in tern 9, 20
e r 16-1
o vemb tional
• N khaven Na
Broo atory
• abor
L
Microformats: Web Semantics & More
74. 2 POSHify
STEP
Microformats: Web Semantics & More
75. 2 POSHify
STEP
<h1><a href=”http://www.bnl.gov/
interlab09/”>InterLab 2009</a></h1>
<p>A 4-day workshop aimed at DOE webmasters,
website developers, web app developers & managers
of internet resources.</p>
<ul>
<li>November 16-19, 2009</li>
<li><a href=”http://www.bnl.gov/”>Brookhaven
National Laboratory</a></li>
</ul>
Microformats: Web Semantics & More
76. 3 Add hCalendar
STEP
Microformats: Web Semantics & More
77. 3 Add hCalendar
STEP
<div class="vevent">
<h1><a href=”http://www.bnl.gov/interlab09/”
class="summary url">InterLab 2009</a></h1>
<p class="description">A 4-day workshop aimed at
DOE webmasters, website developers, web app
developers & managers of internet resources.</p>
<ul>
<li><span class="dtstart"><span class=”value-
title” title=”2009-11-16”> </span>November
16</span>-<span class="dtend"><span
class=”value-title” title=”2009-11-19”> </
span>19, 2009</span></li>
<li class="location"><a href=”http://
www.bnl.gov/”>Brookhaven National
Laboratory</a></li>
</ul>
</div> Microformats: Web Semantics & More
81. hCalendar with hCard
<div class=”vevent”>
...
<li class=”location vcard”>
<a href=”http://www.bnl.gov/” class=”fn org
url”>Brookhaven National Laboratory</a>
<ul class=”adr”>
<li class=”post-office-box”>P.O. Box 5000</li>
<li><span class=”locality”>Upton</span>, <abbr
title=”New York” class=”region”>NY</abbr>
<span class=”postal-code”>11973</span></li>
</ul>
</li>
...
</div>
Microformats: Web Semantics & More
82. Microformats you can use now
• hCalendar: event information
• hCard: contact information
• rel-license: license links
• rel-nofollow: restricting increased page rank for links
• rel-tag: tag links
• VoteLinks: for, against and abstain links
• XFN: distributed social networks
• XOXO: outline content Microformats: Web Semantics & More
83. And even more drafts
• hAtom: syndicated • hProduct: consumer
content products
• hAudio: audio content • hRecipe: food and
beverage recipes
• hListing: open,
distributed listings • hResume: Résumés
and C.V.s
• hMedia: video, images
and audio media • hReview: reviews
• hNews: journalistic • xFolk: bookmarks
news
Microformats: Web Semantics & More
85. 6,137,400,000
Yahoo! SearchMonkey results as of 12/17/09
Microformats: Web Semantics & More
86. 60,600,000 - hReview
1,660,000,000 - hCard
2,090,000,000 - rel-tag
807,000,000 - hAtom
6,137,400,000
Yahoo! SearchMonkey results as of 12/17/09
452,000,000 - XFN
108,000,000 - hResume
148,000,000 - geo
768,000,000 - adr
44,100,000 - hCalendar
Microformats: Web Semantics & More
87. Microformats in the wild
• XFN: Twitter Flickr HuffDuffer Digg LinkedIn Plaxo
Technorati Last.fm Google Social Graph API Ident
Engine
• rel-license: Creative Commons Yahoo! CC Search
Google "Usage Rights" search
• hCard: Google Rich Snippets Google Maps Yahoo! Local
Google Profiles Twitter Last.fm
• hCalendar: Yahoo! Upcoming MapQuest Local
Facebook, Last.fm Eventful
• hResume: LinkedIn SimplyHired
Microformats: Web Semantics & More
91. My new book!
Available for sale on Amazon
Microformats: Web Semantics & More
92. My new book!
Available for sale on Amazon
Want a preview? Check out
Rough Cuts excerpts
*BLATANT PLUGS NOT OVER YET*
Microformats: Web Semantics & More
93. My blog tutorials
Getting Semantic With Microformats:
• rel-home, rel-tag, rel-license
• XFN
• hCard
• hCalendar
• hAtom
• hResume
• Themes & Issues
• Value class pattern Microformats: Web Semantics & More
94. Great stuff from other folks
• Microformats Wiki
• A good resource once you understand the basics
• Microformats: Empowering Your Markup for Web 2.0 by
John Allsopp
• microformatique
• Follow @microformats
• Send questions to @microformateers
Microformats: Web Semantics & More
95. Authoring tools
• hCard Creator
• hCalendar Creator
• hReview Creator
• Optimus Microformats Transformer also offers a
validator
• Jeffrey Zeldman's Web Standards Advisor
Dreamweaver plug-in
Microformats: Web Semantics & More
96. Questions? Comments?
• emily@ablognotlimited.com
• @emilylewis
• Introduce yourself and let’s talk!
Microformats: Web Semantics & More