Microformats
Semantic markup
| Narrative | h1–h6, p, strong, em |
|---|---|
| Quotes | blockquote, q |
| Data | table, caption, tfoot, thead, tbody, tr, th, td |
| Lists | ul, ol, li, dl, dt, dd |
State the problem
I want to publish and share information on the web with higher fidelity.
Solutions
- RDFa — Semantic Web
- microformats — semantic web
Semantic Web
When looking at a possible formulation of a universal Web of semantic assertions, the principle of minimalist design requires that it be based on a common model of great generality. Only when the common model is general can any prospective application be mapped onto the model. The general model is the Resource Description Framework.
—Semantic Web Road map, Tim Berners-Lee, 1998
RDFa
- Infinitely extensible.
- Requires namespaces.
- Non-native attributes:
property,about,typeof, etc.
<div xmlns:dc="http://purl.org/dc/elements/1.1/">
<h1 property="dc:title">HTML5 for Web Designers</h1>
<h2 property="dc:creator">Jeremy Keith</h2>
</div>
semantic web
Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns.
Design differences
RDFa specifies only a syntax and relies on independent specification of terms (often called vocabularies or taxonomies) by others.
— RDFa in XHTML: Syntax and Processing
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.
Microformats
- Limited by design.
- Community-managed vocabularies.
- Native attributes:
rel,class,title, etc.
Design principles
Humans first, machines second
— authors above parsers.- Invisible data rots.
Process
- Solve real-world problems.
- Document existing usage.
- Reuse existing vocabularies.
Building blocks
- Semantic markup.
- The
relattribute. - The
classattribute. - The
abbrpattern. - The value-class pattern.
The rel attribute
The
relattribute specifies the relationship of the linked document with the current document.
<link rel="stylesheet" href="styles.css" />The linked document is a stylesheet for the current document.
rel-license
This content is released under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
Creative Commons attribution license
</a>The linked document is a license for the current document.
rel-tag
<a rel="tag" href="http://en.wikipedia.org/wiki/cat">
feline
</a>The linked document is a tag for the current document.
XFN
<a rel="friend met colleague" href="http://adactio.com">
Jeremy Keith
</a>The person represented by the linked document has met—and is a friend and colleague of—the person represented by the current document.
friend, acquaintance, contact, met, co-worker, colleague, co-resident, neighbour, child, parent, sibling, spouse, kin, muse, crush, date, sweetheart, me
rel="me"
<a rel="me" href="http://adactio.com">
Jeremy Keith
</a>The person represented by the linked document is also the person represented by the current document.
Flickr, Twitter, Last.fm, Digg, Delicious and more.
Site connectivity: Google Social Graph API
The class attribute
…assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The
classattribute has several roles in HTML:
- As a style sheet selector (when an author wishes to assign style information to a set of elements).
- For general purpose processing by user agents.
hCard
vCard properties → class namesvcard |
class="vcard" |
|
|---|---|---|
n | Name | class="n" |
fn | Formatted Name | class="fn" |
email | Email address | class="email" |
tel | Telephone number | class="tel" |
url | URL | class="url" |
n values
<li class="vcard">
<span class="n fn">
<span class="given-name">Jeremy</span>
<span class="family-name">Keith</span>
</span>
</li>
additional-namehonorific-prefixhonorific-suffix
fn optimisation
<li class="vcard">
<span class="fn">Jeremy Keith</span>
</li>
fn nickname optimisation
<li class="vcard">
<span class="fn nickname">adactio</span>
</li>
fn org optimisation
<li class="vcard">
<span class="fn org">Clearleft Ltd.</span>
</li>
The url property
<span class="url">http://adactio.com</span>
<a class="url" href="http://adactio.com">
my website
</a>
Multiple class names
<li class="vcard">
<a class="fn url" href="http://adactio.com">
Jeremy Keith
</a>
</li>
The photo property
<span class="photo">http://example.com/pic.jpg</span>
<img class="photo" src="http://example.com/pic.jpg" alt="Jeremy Keith" />
Multiple class names
<li class="vcard">
<a class="url" href="http://adactio.com">
<img class="photo fn" src="http://example.com/pic.jpg" alt="Jeremy Keith" />
</a>
</li>
hCard + XFN
<li class="vcard">
<a rel="me" class="fn url" href="http://adactio.com">
<img class="photo fn" src="http://example.com/pic.jpg" alt="Jeremy Keith" />
</a>
</li>
Ident Engine JavaScript library.
The value-class pattern
<span class="tel">+44 7792 069292</span>
<span class="tel">
<span class="type">cell</span>
<span class="value">+44 7792 069292</span>
</span>
home, work, fax, cell, etc.
The abbr pattern
<span class="tel">
<abbr class="type" title="cell">mobile</abbr>
<span class="value">+44 7792 069292</span>
</span>
<abbr class="fn" title="Jeremy Keith">
Jeremy
</abbr>
adr
| post-office-box | |
| street-address | 28 Kensington Street |
| extended-address | Suite 6 |
| locality | Brighton |
| region | East Sussex |
| postal-code | BN1 4AJ |
| country-name | UK |
hCalendar
iCalendar properties → class namesvevent |
class="vevent" |
|
|---|---|---|
summary | Summary | class="summary" |
dtstart | Start date | class="dtstart" |
dtend | End date | class="dtend" |
description | Description | class="description" |
location | Location | class="location" |
url | URL | class="url" |
Date
YYYY-MM-DD
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<span class="dtstart">
2010-06-19
</span>
</p>
Datetime
YYYY-MM-DDTmm:hh:ssZ
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<span class="dtstart">
2010-06-19T11:00
</span>
</p>
Date + the abbr pattern
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<abbr class="dtstart" title="2010-06-19">
Saturday, June 19th
</abbr>
</p>
Datetime + the value-class pattern
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<span class="dtstart">
<abbr class="value" title="2010-06-19">
Saturday, June 19th
</abbr> at
<span class="value">11:00</span>am
</span>
</p>
The value-title pattern
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<span class="dtstart">
<span class="value-title" title="2010-06-19T11:00">
Saturday, June 19th at 11am
</span>
</span>
</p>
The value-title pattern
<p class="vevent">
<a class="summary url" href="http://sciencehackday.com">
Science Hack Day</a>
begins
<span class="dtstart">
<span class="value-title" title="2010-06-19T11:00">
</span>
Saturday, June 19th at 11am
</span>
</p>
hAtom
Atom properties → class namesfeed |
class="hfeed" |
|
|---|---|---|
entry | Entry | class="hentry" |
title | Entry title | class="entry-title" |
summary | Entry summary | class="entry-summary" |
content | Entry content | class="entry-content" |
published | Publication date | class="published" |
author | Author | class="author vcard" |
link | Permalink | rel="bookmark" |
category | Category | rel="tag" |
General usage
| XFN | user profiles, buddy lists, blogrolls |
|---|---|
| hCard | business details, user profiles, buddy lists, blogrolls, about pages |
| adr | business details, directions |
| hCalendar | conferences, concerts, meetings, itineraries |
| hAtom | blog posts, news, activity streams |
Specific usage
| hReview | reviews |
|---|---|
| hResume | resumés |
| hRecipe | recipes |
| hAudio | audio recordings |
Resources
- H2VX — hCard and hCalendar conversion.
- Operator Firefox plugin.
- Microformats bookmarklet.
Get involved
- Specs: microformats.org/wiki
- Mailing lists: microformats.org/discuss
- IRC channel: irc://irc.freenode.org/microformats