Open Source im professionellen Einsatz
Linux-Magazin 03/2012
© Patricia Hofmeester, 123RF

© Patricia Hofmeester, 123RF

Semantisches HTML mit Mikroformaten und Mikrodaten

Datenhäppchen

Viele Webseiten präsentieren Informationen zwar augenfällig formatiert, aber nicht sinnvoll strukturiert. Wer seine HTML-Dokumente dagegen mit Mikroformaten und Mikrodaten anrichtet, macht Adressen, Termine und vieles mehr zum Appetithappen für Suchmaschinen und andere Software.

1239

HTML ist eine seitenbezogene Auszeichnungssprache. Mit ihr lassen sich Textbestandteile als Überschrift, Textabschnitt, Hyperlink oder Ähnliches definieren. Die Bedeutung der Daten bleibt jedoch im Unklaren: Beschreibt der Text eine Person, Organisation, ein Produkt oder eine Veranstaltung? Mikroformate [1] und deren Nachfahren, die Mikrodaten [2] aus HTML 5, sorgen für mehr Klarheit, indem sie Visitenkarten, Produktbeschreibungen, Angebote sowie Veranstaltungsdaten maschinenlesbar ausweisen.

Mikroformate

Dieser Artikel beschreibt wichtige Mikroformate wie Hcard, Hcal, Hproduct, Hreview und Geo am Beispiel einer Homepage. Daneben gibt er eine Einführung in Mikrodaten, zeigt deren Einsatz im World Wide Web und wie sich diese Daten mit Open-Source-Tools verarbeiten lassen.

Listing 1

HTML-5-Dokument mit Visitenkarte

01 <!DOCTYPE html>
02 <html lang="es">
03 <head></head>
04 <body>
05 <h1>Pedro Miguel Díaz - el Arte Guitarra Flamenca</h1>
06 <div>
07 <img alt="" src="images/el-fumador.jpg"/>
08 <a href="http://el-fumador.info">Pedro Miguel Díaz</a> - el Fumador<br/>
09 Flamenco Artist<br/>
10 C/ Peral 43<br/>
11 E-41002 Sevilla<br/>
12 España<br/>
13 pedro@fumador.info<br/>
14 +34 954 88 24 37
15 </div>
16 </body>
17 </html>

Was finden die Programme in der Regel vor? Listing 1 zeigt einen Auszug aus dem HTML-Quellcode der Webseite in Abbildung 1 – ein HTML-5-Dokument mit einer Visitenkarte. Der Textbaustein Überschrift ist mit dem Element »h1« ausgezeichnet. Den Text der Visitenkarte umgibt das Container-Element »div« , und »<br/>« bewirkt einen Zeilenumbruch.

Abbildung 1: Ein HTML-Dokument mit Adresse, Konzertterminen und anderen wichtigen Angaben zu einem Musiker – Hoster nennen so etwas auch Web-Visitenkarte.

Ein Mensch kann darin zwar eine Visitenkarte mit Eigenschaften wie Name, Titel und Adresse erkennen, ein Programm kann das nicht. Dafür sind zusätzliche Markierungen erforderlich. Mikroformate benutzen zu diesem Zweck vorwiegend das Class-Attribut aus dem Vokabular von HTML (Listing 2).

Listing 2

Vistenkarte mit Hcard auszeichnen

01 <!DOCTYPE html>
02 <html>
03 <head><link rel="profile" href="http://microformats.org/profile/hcard"/></head>
04 <body>
05  <h1>Pedro Miguel Díaz - el Arte Guitarra Flamenca</h1>
06  <div id="me" class="vcard">
07   <img alt="" class="photo" src="images/el-fumador.jpg"/>
08   <a class="url fn" href="http://el-fumador.info">Pedro Miguel Díaz</a>
09   - el Fumador<br/>
10   Flamenco Artist
11   <div class="adr">
12    Home
13    C/ Peral 43<br/>
14    E-41002
15    Sevilla<br/>
16    España
17   </div>
18   <br/>
19   <div class="tel">
20    Home
21    +34 954 88 24 37
22   </div>
23  </div>
24 </body>
25 </html>

Fast jede Eigenschaft ist hier von dem Element »span« umgeben und durch das universelle Class-Attribut beschrieben. So bezeichnet »class="vcard"« in Zeile 6 das Objekt Visitenkarte. Die Angabe »class="fn url"« weist den Inhalt des Hyperlinks, Pedro Miguel Díaz, als Namen (»fn« , full name) und die URL im »href« -Attribut als zugehörige Homepage (»url« ) aus.

Das Adress-Objekt »class="adr"« in Zeile 11 setzt sich aus mehreren Eigenschaften zusammen. Es enthält Typ (»type« ), Straße (»street-address« ), Postleitzahl (»postal-code« ), Ort (»locality« ) und Land (»country« ) der Adresse. Die Auszeichnung der Visitenkarte folgt dem Mikroformat Hcard [3], das die Vcard-Spezifikation [4] mit den Mitteln von HTML umsetzt. Vcard speichert pro Textzeile ein Schlüssel-Wert-Paar und zusätzliche Optionen. Das Mikroformat Hcard portiert dieses Vokabular auf HTML, indem es die Schlüssel auf Werte des Attributs Class sowie die Werte in andere Attribute desselben Elements oder in den nachfolgenden Textknoten überträgt.

Zeit, Ort und Bewertung

Neben Visitenkarten gibt es weitere Mikroformate für verschiedene Anwendungen. So lassen sich Veranstaltungen mittels Hcalendar, Ortsangaben mit Geo, Produkte mit Hproduct sowie Rezensionen mit Hreview und Hreview-aggregate markieren. Einen Überblick über Mikroformate gibt das Wiki des Projekts Microformats.org [5].

Listing 3 verwendet Hcalendar, das sich von Icalendar [6] ableitet. Ein Termin wird durch das Attribut-Wert-Paar »class="vevent"« ausgedrückt. Beschreibung (»summary« ) und Beginn (»dtstart« ) müssen pflichtgemäß vorhanden sein. Die Angabe des Ortes (»location« ) hingegen ist optional. Dabei gilt folgende Regel für alle Mikroformate: Soll ein Datum auch in maschinenlesbarem Format angegeben werden, so steht es im »title« -Attribut des Elements »abbr« (Zeile 3).

Listing 3

Event mit Hcalendar auszeichnen

01 <div class="vevent">
02  <h3 class="summary">Feria de Abril</h3>
03  <abbr class="dtstart" title="2012-03-23T21:00:00Z">el 23 de marzo de 2012, 21:00</abbr>
04  en Sevilla
05  <div class="geo">
06   <abbr class="latitude" title="37.3844">37° 38&#8242; N</abbr>
07   <abbr class="longitude" title="-5.9888">5° 98&#8242; W</abbr>
08  </div>
09 </div>

Neben Grammatikregeln zeichnen sich Mikroformate auch durch ihre Wiederverwendbarkeit aus. Listing 3 benutzt für die Ortsangabe der Veranstaltung das Mikroformat Geo. Es enthält eine Eigenschaft für den Breitengrad (»latitude« ) und eine für den Längengrad (»longitude« ). Auch in diesem Fall steht die maschinenlesbare Variante im Titel-Attribut des Abbr-Elements.

Ein weiteres Beispiel für die Wiederverwendbarkeit von Mikroformaten gibt Listing 4. Zeile 1 zeichnet die Zusammenfassung einer Produktbesprechung mit dem Mikroformat Hreview-aggregate aus. Die erforderliche Angabe des Produkts als »item« geschieht mittels Hproduct, »rating« beschreibt die Gesamtnote und »votes« nennt die Anzahl der Rezensionen.

Listing 4

Produkt mit Hproduct auszeichnen

01 <li class="hreview-aggregate">
02  
03   
04    <a class="fn url" href="www.reseller.com?isbn=9-874-444-333-85-1">El Arte Flamenco</a>
05    33.90€
06    
07     ISBN
08     9-874-444-333-85-1
09    
10   
11  
12  <abbr class="rating" title="4.9"><sup>&#x2606;&#x2606;&#x2606;&#x2606;&#x2606;</sup></abbr>
13  200
14 </li>

Neben Class verwenden Mikroformate in Hyperlinks noch das Attribut »rel« , das die Beziehung zur Zielressource ausdrückt, etwa in folgendem Code:

<a rel="met friend colleague" href="http://esoleares.es">Estrella Soleares - la Pinta</a>

Er verweist auf die Homepage von Estrella Soleares. Die Liste im Rel-Attribut weist Estrella als Freundin und Kollegin aus, die der Linkgeber auch persönlich getroffen hat (»met« ). Eine Übersicht über die Werte für das Rel-Attribut findet sich im Microformats-Wiki unter [7]. HTML 5 möchte verständlicher sein als seine Vorgänger, weshalb es eine Reihe von semantischen (bedeutungstragenden) Elementen enthält. Das Element »time« dient der Auszeichnung von Datum und Uhrzeit, das Element »meter« zur Angabe von Messwerten.

Um die Verständlichkeit für Programme zu erhöhen, kultiviert HTML 5 die Mikroformate in der Form so genannter Mikrodaten [8]. Dazu definiert HTML 5 einen Satz von Attributen: »itemscope« , »itemtype« , »itemprop« und »itemref« . Diese übernehmen nicht nur die Aufgaben des Class-Attributs in Mikroformaten, sondern gehen noch darüber hinaus.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 6 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Kostenloses Lesefutter: Datenbanken, Embedded, Energiesparen und Plotten

    Mit Erscheinen der aktuellen Ausgabe 02/13 rückt das Linux-Magazin 04/12 in den kostenlosen Bereich, denn auf Linux-Magazin Online sind alle Ausgaben zum Nulltarif zu lesen, die älter als 10 Monate sind.

  • Perl-Snapshot

    Mikroformate zeichnen HTML-Seiten mit allgemein anerkannten Tags aus, zum Beispiel Verbindungen zu sozialen Netzwerken oder Geokoordinaten. Das erlaubt automatischen Auswertern, sie zu sammeln und grafisch aufzubereiten. Nützlich ist das zum Beispiel bei Geodaten zur Routenplanung.

  • W3C holt Feedback zu HTML 5 ein

    Das World Wide Web Consortium (W3C) steht vor der Verabschiedung der Spezifikation für HTML 5 und verwandte Technologien. In dieser Phase ist die Öffentlichkeit zum Kommentieren eingeladen.

  • Verkaufstalent

    In traditionellen Wirtschaftsbereichen wie dem Einzelhandel hat Linux ein großes Potenzial. Der Erfolg der Handelskette Globus beim Einsatz von Debian GNU/Linux auf Kassensystemen lässt für künftige Projekte Optimismus aufkommen.

  • Perl-Snapshot Linux-Magazin 2012/10

    Perlmeister Michael Schilli hat seinen Snapshot verfilmt.

comments powered by Disqus

Ausgabe 06/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.