Mikrodaten bestehen jeweils aus Sets von Name-Wert-Paaren. Ein Set für Kontaktdaten kann beispielsweise aus Feldbezeichnern wie Vorname, Zuname, Straße, Postleitzahl und Ort bestehen. Dies sind die Namen. Die Werte sind die zugeordneten Daten, also etwa Anna, Lyse, Phantasiestraße 1, 10001, Musterstadt. In HTML5 wird ein Set als Item bezeichnet, und jedes Name-Wert-Paar darin als Property (Eigenschaft).
Zum Notieren von Mikrodaten stellt HTML5 eine Reihe von Attributen zur Verfügung. Diese Attribute können in beliebigen HTML-Elementen notiert werden, in denen es sinnvoll ist.
<article itemscope> <h3 itemprop="title"><time datetime="2009-01-27" itemprop="date">27.01.2009</time> +++ Radfahrer bei Unfall schwer verletzt</h3> <p itemprop="teaser">Wie die Polizei Dünnkirchen mitteilte, wurde am gestrigen Sonntag ein Radfahrer beim Versuch, von der Urkomstraße aus Norden kommend in die Babelstraße einzubiegen, von einem Kleinlaster erfasst und schwer verletzt.</p> <p><img itemprop="picture" src="/src/2009/01/27/a282.png" alt=""></p> <div itemprop="content"> <p>Der Radfahrer, ein 34jähriger Bahnangestellter, war auf dem Heimweg von ... usw.</p> </div> <hr> <p>Quelle: <span itemprop="source">qjourn-agentur</span></p> </article>
Mit dem Standalone-Attribut itemscope starten Sie ein Daten-Set bzw. ein Item. Notieren Sie dieses Attribut in einem übergeordneten Element, das den Container für andere Elemente darstellt, in denen die einzelnen Daten (Properties) des Items vorkommen. Im obigen Beispiel sollen Inhalte einer News-Meldung explizit als Mikrodaten ausgezeichnet werden. Das article-Element schließt im Beispiel die gesamte Meldung ein. Deshalb ist es im Beispiel der geeignete Ort für das itemscope-Attribut.
Namen von Bezeichnern (Properties) zeichnen Sie durch das Attribut itemprop aus. Der Wert, den Sie dem Attribut zuweisen, ist der Bezeichnername. Im obigen Beispiel gibt es Properties wie title (Titel), date (Datum), teaser (Anlesertext), picture (Bild), content (Nachrichteninhalt) und source (Bezugsquelle).
Die Werte, die diesen Properties zugeordnet sind, sind in den meisten Fällen die Inhalte der jeweiligen Elemente. Bei <span itemprop="source">qjourn-agentur</span> ist also source der Bezeichnername und qjourn-agentur der diesem Bezeichner zugeordnete Wert.
Bei <img itemprop="picture" src="/src/2009/01/27/a282.png" alt=""> gibt es keinen Elementinhalt. Wenn es in solchen Fällen eine irgendwie zugewiesene URL-Adresse gibt, wird diese zum zugewiesenen Wert der Property. Im Beispiel ist das also die referenzierte PNG-Grafik. Gleiches gilt, wenn ein itemprop-Attribut in HTML-Tags wie <video>, <audio>, <object>, <embed>, <iframe>, <a>, <area> oder <link> notiert wird. Bei <meta>-Tags wird einem darin notierten itemprop-Bezeichner der Wert des content-Attributs zugewiesen.
Im Fall des Elements time (siehe Beispiel) wird dem itemprop-Bezeichner nicht der Elementinhalt zugewiesen, sondern der Attributwert von datetime, da dieser präziser ist.
Items dürfen auch verschachtelt werden. Dazu ein Beispiel:
<div itemscope> <p><span itemprop="actor-name">Renée Kathleen Zellweger</span> (* <time datetime="1969-04-25" itemprop="actor-birthday">25. April 1969</time> in <span itemprop="actor-birthplace">Baytown, Texas</span>) ist eine US-amerikanische Schauspielerin und Oscar-Preisträgerin.</p> <h3>Filme</h3> <ul> <li itemscope> <span itemprop="film-title">Jerry Maguire – Spiel des Lebens</span> (<time datetime="1996" itemprop="film-year">1996</time>) </li> <li itemscope> <span itemprop="film-title">Bridget Jones – Schokolade zum Frühstück</span> (<time datetime="2001" itemprop="film-year">2001</time>) </li> <li itemscope> <span itemprop="film-title">Unterwegs nach Cold Mountain</span> (<time datetime="2003" itemprop="film-year">2003</time>) </li> </ul> </div>
In diesem Beispiel gibt es ein div-Element, das einen itemscope definiert. Der Inhalt des div-Elements besteht aus einem beschreibenden Textabsatz, einer Überschrift und einer ungeordneten Liste mit Filmen. Dabei enthält jedes li-Element selbst noch mal ein itemscope-Attribut. Das Daten-Set für Filmtitel ist also ein eigenes, untergeordnetes Item.
Im Geltungsbereich eines itemscope-Attributs sind im Gegensatz zu sonst <meta>-Tags mitten im Dokumentkörper erlaubt. Dadurch entsteht eine sehr praktische Möglichkeit, um semantische Informationen im Inhalt zu notieren, der jedoch nicht sichtbar ist. Ein Beispiel:
<section itemscope> <h1 itemprop="title">Grammatik: The verb 'to be'</h1> <meta itemprop="CEFR" content="B1"> <!-- <object>...</object> --> </section>
In diesem Beispiel wird ein meta-Element dazu verwendet, um einer Lernübung die Einstufung gemäß dem Gemeinsamen Europäischen Referenzrahmen für Sprachenlerninhalte (CEFR) zuzuordnen. Die Angabe erscheint nicht sichtbar im Browser, kann aber auslesender Software zusätzliche semantische Informationen anbieten. Bei dieser Verwendungsform hat das <meta>-Tag anstelle eines name- oder http-equiv-Attributs ein itemprop-Attribut. Der zugewiesene Wert wird wie gewohnt im content-Attribut notiert. Beachten Sie, dass ein <meta>-Tag laut HTML5 nur in Verbindung mit einem itemprop-Attribut im Dokumentkörper vorkommen darf. In älteren HTML-Versionen ist eine Verwendung außerhalb von <head>…</head> ganz ausgeschlossen.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.