Microformat hCard

Beispielwebsite: Rechts unten blinkt das Microformate-Icon im Browser auf.

 

Firefox bietet hier den Export der Kontaktdaten zu Microsoft Outlook (oder anderen Adressmanagern) an.

 

Die Kontaktdaten wurden von Microsoft Outlook übernommen.

 

Wie bereits erwähnt wird das hCard-Format zur Darstellung von Kontaktinformationen verwendet. Bei der Implementierung unterscheidet sich das hCard-Format allerdings nur geringfügig von anderen Mikroformaten.

hCard-Einleitung

Mikroformate werden zunächst in einem beliebigen HTML-Block- oder Inlineelement eingeleitet. In den Beispielen soll dazu das HTML-Element <div> genutzt werden. Die Einleitung des Microformates erfolgt über das class-Attribut dieses HTML-Elementes:

<div class="[Name des Microformates]">...</div>

Um dem Browser mitzuteilen, welches Mikroformat hier definiert wird, muss die Styleklasse den Name des Microformates erhalten. Der entsprechende Wert für die hCard-Kontaktinformationen ist "vcard":

<div class="vcard">...</div>

Müssen dem HTML-Element weitere Styleklassen zugewiesen werden, können auch mehrere Styleklassen angegeben werden. An welcher Stelle der Name des Microformates auftaucht ist dabei irrelevant:

<div class="vcard adresse wichtig">...</div>

hCard-Detailinformationen

Innerhalb des so definierten HTML-Microformate-Elementes müssen weitere HTML-Elemente (bspw. <span> oder <p>) zur Identifizierung detaillierter Kontaktinformationen definiert werden. Folgende Optionen stehen dabei zur Verfügung:

• "fn" für den Vornamen und den Nachnamen
• "org" für die Firma (Organisation)
• "email" für die E-Mail Adresse
• "street-address" für die Straße und Hausnummer
• "locality" für die Stadt
• "region" für das Bundesland
• "postal-code" für die Postleitzahl
• "country-name" für das Land
• "tel" für die Telefonnummer
• "url" für Ihre Internetseite

Strukturierung der Adress- und Telefoninformationen

Zur Unterscheidung der Adress- von weiteren Kontaktangaben, können die Angaben street-address, locality, region, postal-code und country-name in einen gesonderten HTML-Element, welches die Styleklasse "adr" besitzt, strukturiert werden. Zusätzlich können Telefonangaben wie "dom", "home", "postal" oder "parcel" innerhalb eines HTML-Elementes mit der Styleklasse "tel" strukturiert werden.

hCard-Beispiel

Eine fertige Kontaktinformationsseite im Mikroformat könnte also z.B. so aussehen:

<div class="vcard"> <span class="fn">Rainer Zufall</span> <a class="email" href="mailto:rainer.zufall@email.de">rainer.zufall@email.de</a> <div class="adr"> <div class="street-address">Musterstraße 28</div> <span class="locality">Leipzig</span>, <span class="region">Sachsen</span>, <span class="postal-code">04275</span> <span class="country-name">Deutschland</span> </div> <div class="tel"> <div class="home">03415522102</div> </div> </div>

Testen Sie hier die beschriebene VIO.Matrix-Funktion.
Nutzen Sie den Button um den eingegebenen Code zu prüfen.
Über können Sie den Ausgangszustand wiederherstellen.

 

Zeichen:

 

PUBLISH

Über diesen Button, können Sie Ihren, im oberen Fenster, eingebenen Code auf Richtigkeit überprüfen und den entsprechenden (X)HTML Code ausgeben lassen.

Code überprüfen

 

 

 

Weiter zur Seite 5