Microformats: Web Semantics & More

Microformats:
Web Semantics & More
Emily Lewis

InterLab 2009 November 18

Some rights reserved.

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

Today, you’ll learn:
• What are microformats
• Beneﬁts 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


What are microformats?


Designed for humans ﬁrst and machines
second, microformats are a set of simple,
open data formats built upon existing and
widely adopted standards.


Microformats enable the
publishing and sharing of higher
ﬁdelity information on the web.


Building blocks that
enable users to own,
control, move and share
their data on the web.


Smart
content
control, move and share
their data on the web.


Smart
content
control, move and share Markup, with
their data on the web. more meaning


Huh?


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 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.

rel="me"


XFN & Identity consolidation
Assigned to links to sites that represent you online:


XFN & Identity consolidation
Assigned to links to sites that represent you online:

<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>


blog


blog

portfolio


IdentEngine:
Identity consolidation in
action


Let’s talk fundamentals


The basics
• Use existing standards: (X)HTML
• Emphasize semantics (POSH)
• Intentionally simple
• Address a speciﬁc “problem”
• Humans ﬁrst, machines second


The beneﬁts
• 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


Who beneﬁts?
• Managers
• Developers
• Designers
• Content Authors
• Users


EVERYONE BENEFITS


EVERYONE BENEFITS
*BLATANT PLUG WARNING*

Check out Microformats Role Play for more on how microformats beneﬁt different people


Another elemental: rel-tag
Describes the relationship of links to keywords
(tags) for your content


<a href="/tags/microformats" rel="tag">
microformats</a>


<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.


Why?


Why?
Semantics FTW!


Why?
Semantics FTW!

Context-speciﬁc searching:
• Technorati's Tags
• Operator Plug-in for Firefox


Operator Plug-in:
Contextual search in
action


Moving into compounds


hCard
Contact information - person, place, organization/
company - published with hCard can be transformed
into an electronic business card.


hCard
• H2VX Contacts Conversion Service


hCard


hCard
• Tails Export Plug-in for Firefox


hCard
• Oomph Microformats Toolkit


hCard
• Technorati's Contacts Feeds Service


Oomph:
Electronic business card
action


Publish hCard in
3 easy steps


1 Content
STEP

Emily Lewis
A Blog Not Limited
Albuquerque, NM 87106
emily@ablognotlimited.com


2 POSHify
STEP


2 POSHify
STEP

<dl>
   <dt>Emily Lewis</dt>
      <dd>
         <ul>
            <li><a href="http://
www.ablognotlimited.com">
A Blog Not Limited</a></li>
            <li>Albuquerque, <abbr title="New
Mexico">NM</abbr> 87106</li>
            <li><a
href="mailto:emily@ablognotlimited.com">
emily@ablognotlimited.com</a></li>
         </ul>
      </dd>
</dl>


3 Add hCard
STEP


3 Add hCard
STEP

<dl class="vcard">
   <dt class="fn">Emily Lewis</dt>
      <dd>
         <ul>
            <li><a href="http://
www.ablognotlimited.com" class="url">
A Blog Not Limited</a></li>
            <li class="adr"><span
class="locality">Albuquerque</span>, <abbr
title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span></li>
            <li><a
href="mailto:emily@ablognotlimited.com"
class="email">emily@ablognotlimited.com</a></li>
         </ul>
      </dd>
</dl> Microformats: Web Semantics & More

Worth noting


Worth noting
• Markup doesn't matter, but it should be POSH


Worth noting
• Sometimes you need to add non-semantic
elements such as <span> and <div>


Worth noting
• Attribute values are case-sensitive


Worth noting
• Root properties cannot be combined with
sub-properties


Worth noting
• Root properties cannot be combined with
sub-properties
• You don't need additional class values for
styling, but you can use them


hCalendar
Event information published with hCalendar can be
extracted and imported into users' calendars


hCalendar
• H2VX Events Conversion Service


hCalendar


hCalendar
• Technorati's Events Feeds Service


H2VX:
Electronic calendar
in action


Publish hCalendar in
3 easy steps


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


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>


3 Add hCalendar
STEP


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

Combining microformats


For
mo even
sem re
powantic
er!

Combining microformats


hCalendar with hCard


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 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

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

6,137,400,000


6,137,400,000
Yahoo! SearchMonkey results as of 12/17/09


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 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 Proﬁles Twitter Last.fm

• hCalendar: Yahoo! Upcoming MapQuest Local
Facebook, Last.fm Eventful

• hResume: LinkedIn SimplyHired

Getting started


Getting started
*BLATANT PLUG WARNING*


My new book!


My new book!
Available for sale on Amazon


My new book!
Available for sale on Amazon

Want a preview? Check out
Rough Cuts excerpts

*BLATANT PLUGS NOT OVER YET*


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

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


Authoring tools
• hCard Creator
• hCalendar Creator
• hReview Creator
• Optimus Microformats Transformer also offers a
validator
• Jeffrey Zeldman's Web Standards Advisor
Dreamweaver plug-in


Questions? Comments?
• emily@ablognotlimited.com
• @emilylewis
• Introduce yourself and let’s talk!


Thanks!


Microformats: Web Semantics & More

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Microformats: Web Semantics & More

Similar to Microformats: Web Semantics & More (20)

More from Emily Lewis

More from Emily Lewis (13)

Recently uploaded

Recently uploaded (20)

Microformats: Web Semantics & More