Session for In Control Orlando, covering the basics and benefits of microformats, as well as examples and exercises to help publish microformats (XFN, hCard and hCalendar). Also includes a discussion about POSH, HTML5 and ARIA roles.

1. Microforma
Emily Lewis
In Control February 22, 2011
Some rights
reserved.

2. Microforma
or: How I Learned to Write
Emily Lewis
In Control February 22, 2011
Some rights
reserved.

3. http://bit.ly/fj0BPW
http://microformatsmadesimple.com/resources.php

4. Today will be awesome!
You’re gonna
• 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

5. But wait! There’s more!
You’ll also learn
• Semantic markup!
• Machines!
• HTML5 microdata!
• ARIA Landmark Roles!

6. But wait! There’s more!
You’ll also learn
• Semantic markup!
• Machines!
• HTML5 microdata!
• ARIA Landmark Roles!
SEMA
NTIC
FREAK

7. Freelance Web Designer
http://emilylewisdesign.com
Author, Microformats Made Simple
http://microformatsmadesimple.com
Email: emily@emilylewisdesign.com
Blog: http://ablognotlimited.com
Twitter: @emilylewis

8. I’m an
organizer

10. I like order

11. I like order
Especially in my HTML

12. MIX Online: Web Standards: Where
<3 at first sight the ROI Is
Web standards
• Guidelines and best practices
• More efficient
• Great for team-based development
• Structured content
• Semantic markup

13. MIX Online: Web Standards: Where
<3 at first sight the ROI Is
Web standards
• Guidelines and best practices
• More efficient
• Great for team-based development
• Structured content
GATE
• Semantic markup
WAY

14. Just say yes!
Now, I’m hooked

15. Just say yes!
Now, I’m hooked
• Plain Old Semantic Markup (POSH)

16. Just say yes!
Now, I’m hooked
• Plain Old Semantic Markup (POSH)
• Semantic CSS

17. Just say yes!
Now, I’m hooked
• Plain Old Semantic Markup (POSH)
• Semantic CSS
• Microformats

18. Just say yes!
Now, I’m hooked
• Plain Old Semantic Markup (POSH)
• Semantic CSS
• Microformats
• HTML5’s new structural elements

19. Just say yes!
Now, I’m hooked
• Plain Old Semantic Markup (POSH)
• Semantic CSS
• Microformats
• HTML5’s new structural elements
• ARIA roles

20. What are
microformats?

21. Microformats Wiki: What Are
Microformats

22. Microformats Wiki: What Are
Microformats
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing
and widely adopted standards.

23. Microformats Wiki: What Are
Microformats
Microformats enable the
publishing and sharing of
higher fidelity information on
the web.
Designed for humans first and machines
second, microformats are a set of simple,
open data formats built upon existing
and widely adopted standards.

24. Microformats Wiki: What Are
Microformats
Smart
content

25. Microformats Wiki: What Are
Microformats
Smart
content
Building blocks that
enable users to own,
control, move and
share their data on the
web.

26. Microformats Wiki: What Are
Microformats
Smart
content
Building blocks that
enable users to own,
control, move and Markup, with
share their data on the more
web. meaning

27. huh?

28. Microformats are sets of
HTML attributes and
values that are applied to
common web content to
describe that content and
give it more meaning.

29. <a href="/tags/css/">CSS</a>

30. Microformats Wiki: rel-tag
<a href="/tags/css/" rel="tag">CSS</a>

31. Formal
microformats
• 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

32. And even more
• hAtom: syndicated • hProduct:
content consumer
• hAudio: audio products
content • hRecipe: food and
• hListing: open, beverage recipes
distributed listings
• hResume:
• hMedia: video, Résumés and C.V.s
images and audio
media • hReview: reviews
• hNews: journalistic • xFolk: bookmarks
news

33. Formal vs. Draft
Formal microformats are those
that are stable and unlikely to
change.
Draft microformats are relatively
far along in the specification
process, but haven’t been formally
completed. They are subject to

34. The Basics
Use existing
• (X)HTML
• rel
• class
• rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
principles

35. The Basics
Use existing
• HTML5
• rel
• class
• rev
• vCard: hCard
• iCalendar: hCalendar
• Atom: hAtom
• Other microformats and naming
principles

36. The Basics
It’s all about
• Core purpose is to add meaning
• Publish with POSH

37. “Self
describing”
- Chris Mills

38. So icky
Not POSH
<table>
<tr>
<td><a href="/">Home</a></td>
<td><a href="/products/">Products</a></td>
<td><a href="/services/">Services</a></td>
<td><a href="/about/">About</a></td>
</tr>
</table>
Also not POSH
<div>
<p><a href="/">Home</a></p>
<p><a href="/products/">Products</a></p>
<p><a href="/services/">Services</a></p>
<p><a href="/about/">About</a></p>
</div>

39. So pretty
POSH
<ul id="nav">
<li><a href="/">Home</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/about/">About</a></li>
</ul>

40. The Basics
Address a specific
• Common, real-world web content
• People
• Organizations
• Events
• Blog posts
• Reviews
• Tags

41. The Basics
Intentionally
• Easy to learn and use
• Based on current human behavior on the
web
• Aimed at 80% of use-cases; the most
common

42. The Basics
Humans 1st,
• Human-readable content
• From a user’s perspective, web content
published with microformats is
indistinguishable from that published without.
• “Invisible” metadata for machine
readability

43. Not
http://www.flickr.com/photos/sebke/3567653086/in/photostream/

44. Machines!
• Search engines
• Browsers
• Assistive technologies
• User agents
• Applications

45. Why?

46. The Benefits
Machine
Humans Understand

47. The Benefits
Machine
Humans Understand
Please join us on Sunday,
February 20 for the In
Control welcome happy
hour at the Embassy
Suites bar.

48. The Benefits
Machine
Humans Understand Machines Don’t
Please join us on Sunday, Blahblah blahbliby blah
February 20 for the In blahblahblibity blah
Control welcome happy blah blahblah
hour at the Embassy
Suites bar. blahblahblibity blah

49. The Benefits
Machine
• Content published with microformats is
parsable. It can be extracted and indexed,
downloaded, searched for, saved, cross-
referenced and combined.
• Web site becomes an API, enabling
sharing and re-use of content.

50. The Benefits
Enhanced user
• Download to address book
• Download to calendar
• More meaningful search results
• Findability

51. Google Rich
Snippets:

52. The Benefits
Minimal
investment
•Easy to learn
• Easy to implement
• No need for special software
• No need to learn new technologies

53. The Benefits
Encourages
standards
•Web standards
• Valid, semantic markup
• Workflows and processes for development
teams
• Consistent markup
• Standard naming conventions for styling

54. 6,137,400,00
0 + published
Yahoo! SearchMonkey results as of 12/17/09

55. Peer pressure
6,137,400,000+
• 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 37Signals Google
Maps Yahoo! Local Google Profiles Twitter Last.fm
MySpace
• hCalendar: Yahoo! Upcoming MapQuest Local
Facebook Last.fm Eventful

56. Peer pressure
6,137,400,000+
• hResume: LinkedIn SimplyHired Stack Overflow
• hReview: Google Rich Snippets Yelp Yahoo!
Local Technorati New York Times Travel Cork’d
• hListing: Every Car Listed RealEstate.com
dealtagger
• hRecipe: Food Network Williams Sonoma Recipes
Microformats Wiki: Examples in the
Wild

57. Get your
laptops ready!
http://bit.ly/fj0BPW

58. Elemental
microformats
•Single attribute-value pair
• Often used as building blocks for other
microformats

59. Elementals
rel-tag
Describes the relationship of links containing
tags (keywords) to your content:
<a href="/tags/css/" rel="tag">css</a>
The rel="tag" attribute-value pair indicates the
link destination (href) is to a page that tells
what the current page - or part of the current

60. Elementals
What can you do
with rel-tag?
• Context-specific search
• Technorati's Tags
• Operator Add-on for Firefox

61. Operator Add-
on:

62. Elementals
rel-me
Assigned to links to sites that represent you
online:
<a href="http://ablognotlimited.com" rel="me">
A Blog Not Limited</a>

63. blog

64. blog
portfoli
o

65. blog
portfoli
o

66. blog
portfoli
o

67. blog
portfoli
o

68. blog
portfoli
o

69. blog
portfoli
o

70. blog
portfoli
o

71. blog
portfolio

72. Elementals
What can you do
with consolidation
• Identity rel-me?
• Ident Engine
• Huffduffer

73. Ident Engine:
Identity
consolidation

74. Elementals
XFN
meis just one of the values for the XFN
microformat
XFN is used to describe social relationships
among people

75. Elementals
XFN
Relationship XFN rel Values
Friendship (one value) contact acquaintance friend
Professional (one or both colleague co-worker
values)
Family (one value) kin spouse child parent sibling
Romantic (any or all values) muse crush date sweetheart
Physical met
Geographic (one value) neighbor co-resident
Identity me

76. Elementals
XFN
For links to other people’s identities online,
you can apply XFN to indicate your social
relationship with that person:
<a href="http://www.christopherschmitt.com/"
rel="met friend colleague muse">
Christopher Schmitt</a>

77. Still with me?

78. Compound
microformats
•Several attribute-value pairs (properties and
sub-properties)
• Utilize other microformats as building blocks

79. Compounds
hCard
Adds semantics to contact information for
people, places and organizations/
companies.
Contact information published with hCard
can be transformed into an electronic
business card.
• H2VX Contacts Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit

80. Michromeform
ats:
Electronic

81. Compounds
hCard in 3 easy
steps
1. Identify content
2. POSHify
3. Add hCard

82. 1
Start with Content
STEP
Emily Lewis
Emily Lewis Design, LLC
Albuquerque, NM 87106
emily@emilylewisdesign.com

83. 2
POSHify
STEP
<dl>
<dt>Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com">Emily
Lewis Design, LLC</a></dd>
<dd>Albuquerque, <abbr title="New Mexico">NM</
abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

84. 3
Add hCard
STEP
Add the root vcard to the element containing all of the
contact information. Then, add the relevant hCard
properties and sub-properties via the class attribute
Web Content hCard class Values
Name (first and last) fn
Web site url
Address adr
City locality
State region
ZIP postal-code
Email email

85. 3
Add hCard
STEP
<dl class="vcard">
<dt>Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com">Emily
Lewis Design, LLC</a></dd>
<dd>Albuquerque, <abbr title="New Mexico">NM</
abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

86. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com">Emily
Lewis Design, LLC</a></dd>
<dd>Albuquerque, <abbr title="New Mexico">NM</
abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

87. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd>Albuquerque, <abbr title="New Mexico">NM</
abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

88. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd class="adr">Albuquerque, <abbr title="New
Mexico">NM</abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

89. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd class="adr"><span
class="locality">Albuquerque</span>, <abbr title="New
Mexico">NM</abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

90. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd class="adr"><span
class="locality">Albuquerque</span>, <abbr title="New
Mexico" class="region">NM</abbr> 87106</dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

91. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd class="adr"><span
class="locality">Albuquerque</span>, <abbr title="New
Mexico" class="region">NM</abbr> <span class="postal-
code">87106</span></dd>
<dd><a href="mailto:emily@emilylewisdesign.com">
emily@emilylewisdesign.com</a></dd>
</dl>

92. 3
Add hCard
STEP
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url">Emily Lewis Design, LLC</a></dd>
<dd class="adr"><span
class="locality">Albuquerque</span>, <abbr title="New
Mexico" class="region">NM</abbr> <span class="postal-
code">87106</span></dd>
<dd><a href="mailto:emily@emilylewisdesign.com"
class="email">emily@emilylewisdesign.com</a></dd>
</dl>

93. A Closer Look
Non-semantic
elements
<dd class="adr">
<span class="locality">Albuquerque</span>,
<abbr title="New Mexico" class="region">NM</abbr>
<span class="postal-code">87106</span>
</dd>

94. A Closer Look
Don’t forget
validation!
•W3C Markup Validation Service
• Optimus Microformats Transformer

95. Also worth
• Markup doesn't matter, but it should be
POSH
• 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

96. Compounds
hCalendar
Adds semantics to event information.
Event information published with hCalendar
can be extracted and imported into users'
calendars
• H2VX Events Conversion Service
• Operator Add-on for Firefox
• Tails Export Add-on for Firefox
• Oomph Microformats Toolkit
• Michromeformats extension for Chrome

97. H2VX:
Electronic calendar

98. Compounds
hCalendar in 3
easy steps
1. Identify content
2. POSHify
3. Add hCalendar

99. 1
Start with Content
STEP
011 b rating d
SX SWi 2 c e cele n behin
n feren passio
ay co ty and
A 5-d eativi media
r
the c olest new
the coologies
techn , 2011
11-15 enter
• March ention
C
n Conv
• Austi

100. 2
POSHify
STEP
<h1><a href="http://sxsw.com/interactive">SXSWi
2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>

101. 3
Add hCalendar
STEP
Add the root vevent to the element containing all of
the contact information. Then, add the relevant
hCalendar properties and sub-properties via the class
Web Content hCalendar class Values
Event name summary
Web site url
Description description
Type of event category
Start date dtstart
End date dtend
Location location

102. 3
Add hCalendar
STEP
<div class="vevent">
<h1><a href="http://sxsw.com/interactive">SXSWi
2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

103. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive">SXSWi 2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

104. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p>A 5-day conference celebrating the creativity
and passion behind the coolest new media
technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

105. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day conference
celebrating the creativity and passion behind
the coolest new media technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

106. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li>March 11-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

107. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</
span>-15, 2011</li>
<li>Austin Convention Center</li>
</ul>
</div>

108. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</span>-
<span class="dtend"><span class="value-title"
title="2011-03-15"> </span>15, 2011</span></li>
<li>Austin Convention Center</li>
</ul>
</div>

109. 3
Add hCalendar
STEP
<div class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
<p class="description">A 5-day <span
class="category">conference</span> celebrating
the creativity and passion behind the coolest
new media technologies.</p>
<ul>
<li><span class="dtstart"><span class="value-
title" title="2011-03-11"> </span>March 11</span>-
<span class="dtend"><span class="value-title"
title="2011-03-15"> </span>15, 2011</span></li>
<li class="location">Austin Convention
Center</li>
</ul>

110. Microformats Wiki: Value Class
A Closer Look Pattern
Value class
pattern
Offers authors several options for marking
up date-time information:
<span class="dtstart"><span class="value-title"
title="2011-03-11"> </span>March 11</span>
• Machine-readable date information is the
title attribute value
• Screen-readers won’t read the title value
• No tooltip

111. Combining
microformats

112. For e
morven
sema e
Combining
n
powe tic
r!
microformats

113. Combining Microformats
hCard with rel-me
<dl class="vcard">
<dt class="fn">Emily Lewis</dt>
<dd><a href="http://emilylewisdesign.com"
class="url" rel="me">Emily Lewis Design, LLC</a></dd>
<dd class="adr"><span
class="locality">Albuquerque</span>, <abbr title="New
Mexico" class="region">NM</abbr> <span class="postal-
code">87106</span></dd>
<dd><a href="mailto:emily@emilylewisdesign.com"
class="email">
emily@emilylewisdesign.com</a></dd>
</dl>

114. Combining Microformats
hCalendar with
hCard
<div class="vevent">
...
<li class="location vcard"><a href="http://
www.austinconventioncenter.com" class="fn org
url">Austin Convention Center</a>
<ul class="adr">
<li class="street-address">500 East Cesar
Chavez Street</li>
<li><span class="locality">Austin</span>,
<abbr title="Texas" class="region">TX</abbr> <span
class="postal-code">78701</span></li>
</ul>
</li>

115. The Slippery
Semantic

116. HTML5
New structural
• <section>
• <header>
• <footer>
• <nav>
• <aside>
• <article>

117. HTML5
New structural
<section class="vevent">
<h1 class="summary"><a href="http://sxsw.com/
interactive" class="url">SXSWi 2011</a></h1>
...
</section>

118. Microformats

119. RDFa
Microformats

120. RDFa
Microformats
micr
odat
a

121. Fight!
Fight!
Fight!
http://www.flickr.com/photos/sebke/3567653086/in/
photostream/

122. HTML5
Microdata
<dl>
<dt><a href="http://ablognotlimited.com">Emily
Lewis</a></dt>
<dd>Albuquerque, <abbr title="New Mexico">NM</abbr>
87106</dd>
</dl>

123. HTML5
Microdata
<dl itemscope itemtype="http://data-vocabulary.org/
Person">
<dt itemprop="name"><a href="http://
ablognotlimited.com" itemprop="url">Emily Lewis</a></
dt>
<dd itemprop="address" itemscope itemtype="http://
data-vocabulary.org/Address"><span
itemprop="locality">Albuquerque</span>, <abbr
title="New Mexico" itemprop="region">NM</abbr> <span
itemprop="postal-code">87106</span></dd>
</dl>

124. Two Stones, One Bird
Microdata &
<dl class="vcard" itemscope itemtype="http://data-
vocabulary.org/Person">
<dt class="fn" itemprop="name"><a href="http://
ablognotlimited.com" class="url" itemprop="url">Emily
Lewis</a></dt>
<dd class="adr" itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address"><span
class="locality" itemprop="locality">Albuquerque</
span>, <abbr title="New Mexico" class="region"
itemprop="region">NM</abbr> <span class="postal-code"
itemprop="postal-code">87106</span></dd>
</dl>

125. ARIA Roles

126. ARIA
• Set of guidelines from WAI for accessible,
rich internet applications
• Includes Document Landmark Roles to
indicate document structure and aid
navigation

127. Paciello Group: Using WAI ARIA Landmark
ARIA Roles
Document
• role="banner"
• role="navigation" not needed on <nav>
• role="main"
• role="search"
• role="article"
• role="complementary" not needed on <aside>
• role="contentinfo" not needed on <footer>

128. ARIA
Adding roles -
<div id="header" role="banner">
<h1><a href="/">The Law Office of Jimbob Smith</a></h1>
<a href="/"><img src="logo.png" alt="Jimbob Legal"/></a>
</div>
<ul role="navigation">
<li><a href="/News/">News</a></li>
<li><a href="/Services/">Services</a></li>
<li><a href="/Resources/">Resources</a></li>
<li><a href="/About/">About</a></li>
</ul>

129. ARIA
Adding roles -
<header role="banner">
<a href="/">
<h1>The Law Office of Jimbob Smith</h1>
<img src="logo.png" alt="Jimbob Legal" />
</a>
</header>
<nav>
<ul>
<li><a href="/News/">News</a></li>
<li><a href="/Services/">Services</a></li>
<li><a href="/Resources/">Resources</a></li>
<li><a href="/About/">About</a></li>
</ul>
</nav>

130. Semantics
FTW!

131. Resources
One stop shop
http://bit.ly/fj0BPW
http://microformatsmadesimple.com/resources.php
• All resources and demo links from this deck
• Authoring tools
• Further reading

132. Questions?

133. Thanks!