CSS & HTML-Tutorials auf nicogutmann.de

Lupe raus: Mikroformate

Montag, 19. Oktober 2009, um 14:40 Uhr in HTML-Tutorials.

Der neue Star am HTML-Himmel gibt es schon seit einiger Zeit, hat es aber bislang nicht auf die großen Bühnen der Welt geschafft – zu unrecht. Mikroformate sind vor allem für Maschinen interessant, die sich durch das Markup robben, auf der Suche nach semantischen Auszeichnungen, um den Inhalt zu verstehen. Dafür gibt es natürlich sehr viele HTML-Tags, die den Inhalt gut beschreiben, leider gibt es mehr inhaltliche Varianzen, als es HTML-Tags gibt. HTML 5 wird dem in einiger Zeit ein weiteres Stück entgegen wirken, doch dies noch lange nicht vollständig.

Sinn und Zweck

Aus diesem Grunde wurden Mikroformate entwickelt, damit Maschinen (Robots, Software-Programme oder auch das IPhone) die Inhalte besser “verstehen” können und für sich nutzen können. Damit kann man nicht nur Suchmaschinen-Robots beeinflussen, sondern auch Inhalte in andere Programme speichern, wie z.B. Kontaktdaten in Outlook reinkopieren oder eine Telefonnumer mit dem IPhone direkt anrufen lassen.
Es gibt noch einiges mehr, was man damit anstellen kann, ich gehe in meinem Artikel jedoch nur kurz darauf ein, denn es ist ein riesiges, aber sehr spannendes Thema (Mehr dazu in der Linksammlung).
Da mehrere Programme und Software mit diesen Mikroformaten arbeiten wollen, gibt es inoffizielle Spezifikationen und Namen, die verwendet werden können. Diese Liste wird ständig fortgeführt und haben, da Mikroformate auch international einheitlich sein sollen, englische Namen (microformats).

hCard (vCard)

Es gibt, wie bereits oben geschrieben, unterschiedliche Gebiete Mikroformate zu verwenden. Für einzelne Personen ist die Visitenkarte das Hauptkommunikationsmittel, um seine Kontaktdaten an den Mann zu bringen. Diese gibt es nun nicht nur als gedruckte Version auf Papier, sondern, dank der Mikroformate, auch im Web – hCards (HTML-Cards) oder vCards (Visit Card).
Dabei ist die Einbindung in das HTML-Markup ziemlich einfach; Wir arbeiten einfach mit Klassen und geben den Begriffen smoit auch für Maschinen eine Bedeutung. Maschinen können mit einer Adresse wenig anfangen und alleine durch den address-Tag wissen sie überhaupt, dass es sich um eine Adresse handelt. Doch können Sie nicht denken und somit erkennen Sie auch nicht, was in diesem Address-Tag steht:

<address>
Nico Gutmann<br />
Mustertraße 12<br />
12345 Musterstadt
Tel.: 01234 / 56789
Email: max@nicogutmann.de
</address>

Die Maschinen erkennen nun, dass es sich um eine Adresse handelt, abernicht um was für eine Adresse und sie erkennen nicht den Inhalt der Adresse. Wo ist der Name, was ist die Straße und der Ort? Es wird nicht definiert.
Hier kommen die Mikroformate ins Spiel. Durch Sie können wir nun den Maschinen erklären was wir genau meinen, in dem wir ihnen eine Klasse zuweisen:

<address class="vcard">
<span class="fn">Nico Gutmann</span><br />
<span class="street-address">Mustertraße 12</span><br />
<span class="postal-code">12345</span> <span class="locality">Musterstadt</span>
Tel.: <span class="tel">01234 / 56789</span><br />
Email: <span class="email">max@nicogutmann.de</span>
</address>


vcard, fn, street-address, zip-code und locality sind feste Namen für Mikroformate und definieren die Adresse nun sehr konkreter, wodurch nun auch z.B. Outlook diese einzelnen Felder als solche erkennt. Eine Liste von allen Namen findest du auf www.mikroformate.de.