Microformats

Semantic markup

Narrativeh1h6, p, strong, em
Quotesblockquote, q
Datatable, caption, tfoot, thead, tbody, tr, th, td
Listsul, ol, li, dl, dt, dd

State the problem

I want to publish and share information on the web with higher fidelity.

Solutions

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

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

microformats.org

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

Microformats

Design principles

Process

Building blocks

The rel attribute

The rel attribute 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 class attribute 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 names
vcard class="vcard"
nNameclass="n"
fnFormatted Nameclass="fn"
emailEmail addressclass="email"
telTelephone numberclass="tel"
urlURLclass="url"

n values

<li class="vcard">
<span class="n fn">
<span class="given-name">Jeremy</span>
<span class="family-name">Keith</span>
</span>
</li>

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>

or

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

or

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

or

<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-address28 Kensington Street
extended-addressSuite 6
localityBrighton
regionEast Sussex
postal-codeBN1 4AJ
country-nameUK

hCalendar

iCalendar properties → class names
vevent class="vevent"
summarySummaryclass="summary"
dtstartStart dateclass="dtstart"
dtendEnd dateclass="dtend"
descriptionDescriptionclass="description"
locationLocationclass="location"
urlURLclass="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 names
feed class="hfeed"
entryEntryclass="hentry"
titleEntry titleclass="entry-title"
summaryEntry summaryclass="entry-summary"
contentEntry contentclass="entry-content"
publishedPublication dateclass="published"
authorAuthorclass="author vcard"
linkPermalinkrel="bookmark"
categoryCategoryrel="tag"

General usage

XFNuser profiles, buddy lists, blogrolls
hCardbusiness details, user profiles, buddy lists, blogrolls, about pages
adrbusiness details, directions
hCalendarconferences, concerts, meetings, itineraries
hAtomblog posts, news, activity streams

Specific usage

hReviewreviews
hResumeresumés
hReciperecipes
hAudioaudio recordings

Resources

Get involved