Microformats are little chunks of HTML that conform to some specific rules that software (e.g. the "Operator" extension to Firefox) understands and can automatically do stuff with. Instead of inventing new markup elements, it uses certain existing HTML attributes, namely "class", "rel" and "rev".
Note that while not often used, an HTML element may have more than one class. This is done by listing the classes in the class attribute seperated by spaces.
CSS tip: to match contents of any attribute in a CSS rule, use the selector [attribute~="value"] after the element name (e.g. link[rel~="foo"]).
See http://www.microformats.org for more info.
This page provides some small examples of different microformats, for reference.
Contact information about a person.
<div class="vcard"> <div class="fn">Joe Doe</div> <div class="org">The Example Company</div> <div class="tel">604-555-1234</div> <a class="url" href="http://example.com/">http://example.com/</a> </div>
Other hCard classes are: bday, email, honorific-prefix, honorific-suffix, logo, note, nickname, photo, post-office-box.
http://microformats.org/wiki/xfn
Show social relationships between people.
<a href="http://interreality.org/~reed" rel="friend met">Reed</a>
Where possible rel tags include (see http://gmpg.org/xfn/11): friend, met, sweetheart, date, acquaintance, crush, co-worker, contact, colleague, co-resident, neighbor, child, parent, sibling, spouse, kin, muse, me.
Mark geographic coordinates etc.
<div class="geo">Belvide is at:
<span class="latitude">52.686</span>
<span class="longitude">-2.193</span>
</div>
or:
Belvide is at: <span class="geo">52.686; -2.193</span>
or:
Belvide: <abbr class="geo" title="52.696;-2.193">grid ref SJ870099</abbr>
geo may also be used inside another format such as hCard.
http://microformats.org/wiki/hcalendar-cheatsheet
Dates and events
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
Optionally, a set of events can be wrapped in an element with the "vcalendar" class.
Link to a copyright license.
<a rel="license" href="http://creativecommons.org/licenses/by/2.0">cc by 2.0</a>
Link to a URI that represents a tag keyword for the current page.
<a rel="tag" href="http://technorati.com/tag/tech">tech</a>
Express that the current page is an endorsement or support of someone or something else represented by the linked-to URI.
<a rev="vote-for" href="http://cheese.com">I like cheese</a>, but <a rev="vote-against" href="http://spiders.com>I don't like spiders</a>.
http://microformats.org/wiki/hreview
Say what you think about something.
<div class="hreview">
<span><span class="rating">5</span> out of 5 stars</span>
<h4 class="summary">Crepes on Cole is awesome</h4>
<span class="reviewer vcard">Reviewer:
<span class="fn">Tantek</span> -
<abbr class="dtreviewed" title="20050418T2300-0700">April 18, 2005</abbr>
</span>
<div class="description item vcard">
<p>
<span class="fn org">Crepes on Cole</span> is one of the best little
creperies in <span class="adr"><span class="locality">San Francisco</span></span>.
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I've had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi.
</p>
</div>
<p>Visit date: <span>April 2005</span></p>
<p>Food eaten: <span>Florentine crepe</span></p>
</div>
Use the "tag" relation within a "rating" element to talk about different aspects. Use the "photo" class when linking to a photo of the thing. Note the use of the hCard classes to identify the reviewer and the thing reviewed.
http://www.w3.org/TR/html401/types.html#type-links
alternate (e.g. alternate format or language, can use media attribute to specify a different medium), next, previous, contents, start, index, help, stylesheet, glossary, copyright, chapter, section, subsection, appendix, bookmark. (often used with the <link> element.)