Microformats

Microformats maken gebruik van CSS-classes die betekenis toe kennen aan gegevens. Zo kun je bijvoorbeeld adresgegevens en evenementen (met datum-plaats e.d.) en recenties publiceren die bezoekers makkelijk kunnen kopiëren naar hun adresbestand of agenda.

Advertisements

Microformats maken gebruik van CSS-classes die betekenis toe kennen aan gegevens. Zo kun je bijvoorbeeld adresgegevens en evenementen (met datum-plaats e.d.) en recenties publiceren die bezoekers makkelijk kunnen kopiëren naar hun adresbestand of agenda.

Definitie:
Volgens de WikipediaEen microformat is een webgebaseerd gegevensformaat dat ernaar streeft metadata aan de inhoud van bestaande webpagina’s toe te voegen. Een microformat gebruikt daarvoor de bestaande klassen en attributen van HTML en XHTML. Het doel hiervan is om informatie die oorspronkelijk voor eindgebruikers bedoeld is (zoals contactinformatie of geografische informatie) geschikt te maken voor automatische interpretatie door software.

Bijkomend groot voordeel: de zoekmachines lezen mee, tenminste dat is het plan. Google heeft de eerste stappen in deze richting gezet, al heet het daar Rich Snippets.

Firefox heeft een speciale add-on Tails Export voor het tonen en exporteren van Microformats.

Voorbeeld van een toepassing:

<div id=”hcard-Rian-Rietveld”>
<a href=”http://www.rrwd.nl”>Rian Rietveld</a>
<div>RRWD</div>
<a href=”mailto:info@rrwd.nl”>info@rrwd.nl</a>
<div>
<div>Saal van Zwanenbergweg 11</div>
<span>Tilburg</span>
,
<span>Nood-Brabant</span>
,
<span>5026 RM</span>
<span>Nederland</span>
</div>
<div>+31 13 57013 76</div>
<p style=”font-size:smaller;”>This <a href=”http://microformats.org/wiki/hcard”>hCard</a&gt; created with the <a href=”http://microformats.org/code/hcard/creator”>hCard creator</a>.</p>
</div>

hCard:

<div id=”hcard-Rian-Rietveld” class=”vcard”>
<a class=”url fn” href=”http://www.rrwd.nl”>Rian Rietveld</a>
<div class=”org”>RRWD</div>
<a class=”email” href=”mailto:info@rrwd.nl”>info@rrwd.nl</a>
<div class=”adr”>
<div class=”street-address”>Saal van Zwanenbergweg 11</div>
<span class=”locality”>Tilburg</span>,
<span class=”region”>Noord-Brabant</span>,
<span class=”postal-code”>5026 RM</span>
<span class=”country-name”>Nederland</span>
</div>
<div class=”tel”>+31 13 57013 76</div>
</div>

hCalender:

<div id=”hcalendar-Festival-Mundial” class=”vevent”>
<a href=”http://www.festivalmundial.nl/&#8221; class=”url”>
<abbr title=”2009-06-20T13:0000″ class=”dtstart”>June 20th 1pm</abbr>,
<abbr title=”2009-06-21T21:30″ class=”dtend”> 9:30pm 2009</abbr> :
<span class=”summary”>Festival Mundial</span> at <span class=”location”>Leijpark, Tilburg</span></a>
<div class=”description”>Festival Mundial, 20 en 21 juni 2009, Leijpark Tilburg. Festival Mundial staat al jaren bekend om de mix van muziek, culturen, sfeer en inhoud. De 22e editie op 20 en 21 juni zit vol vernieuwende verrassingen en is een verfrissende combinatie van modern en traditioneel. Enkele artiesten die het podium beklimmen zijn Sabrina Starke, Ziggi, La Excelencia en Fna&amp;iuml;re.</div>
<div class=”tags”>Tags: <a href=”http://eventful.com/events/tags/festival&#8221; rel=”tag”>festival</a>
<a href=”http://eventful.com/events/tags/wereldmuziek&#8221; rel=”tag”> wereldmuziek</a>
<a href=”http://eventful.com/events/tags/tilburg&#8221; rel=”tag”> tilburg</a>
</div>

Bronnen en gerelateerde links:

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s