Mikroformate sind Standards, die verwendet werden, um Semantik und strukturierte Daten in HTML einzubetten, und bieten eine API, die von sozialen Webanwendungen, Suchmaschinen, Aggregatoren und anderen Tools genutzt werden kann. Diese minimalen Muster von HTML werden verwendet, um Entitäten zu markieren, die von grundlegenden bis zu domänenspezifischen Informationen reichen, wie z.B. Personen, Organisationen, Veranstaltungen und Orte.

• Um ein Mikroformat-Objekt zu erstellen, werdenh-* Klassennamen im class-Attribut verwendet.
• Um eine Eigenschaft zu einem Objekt hinzuzufügen, werden die Klassennamenp-*,u-*,dt-*,e-* auf einem der Nachkommen des Objekts verwendet.

Mikroformate nutzen unterstützende Vokabeln, um Objekte zu beschreiben und Namens-Wert-Paare, um ihren Eigenschaften Werte zuzuweisen. Die Eigenschaften werden in Klassenattributen getragen, die zu jedem HTML-Element hinzugefügt werden können, während die Datenwerte den Inhalt von HTML-Elementen und semantische Attribute wiederverwenden.

Microformats2 (manchmal mf2 genannt) ist ein Update der Mikroformate, das eine Methode zur Annotation von HTML-Struktursyntax und Vokabeln bereitstellt als frühere Ansätze der Verwendung von RDFa und Microdata. Diese früheren Ansätze erfordern das Erlernen neuer Attribute.

Es gibtOpen-Source-Parsing-Bibliotheken für die meisten Sprachen für Microformats2.

Wie Mikroformate funktionieren

Ein Autor einer Webseite kann Mikroformate zu ihrem HTML hinzufügen. Zum Beispiel, wenn sie sich selbst identifizieren wollten, könnten sie eineh-card verwenden wie:

HTML-Beispiel

<a href="https://alice.example.com">Alice Blogger</a>

Wenn ein Parser auf diese Daten stößt, wird er wissen, dass diese Seite eine "card" enthält, die eine Person oder Organisation namensAlice Blogger mit einer URL vonhttps://alice.example.com/ beschreibt. Der Parser macht diese Daten über APIs verfügbar, die für verschiedene Anwendungen genutzt werden können. Zum Beispiel könnte eine Anwendung eine Seite nach einer h-card scannen, um sie als Profilinformation für jemanden zu verwenden, der sich bei einem Dienst angemeldet hat.

Wie in diesem Beispiel erfordern einige Markup-Muster nur einen einzigen Mikroformat-Wurzelklassennamen, den Parser verwenden, um einige generische Eigenschaften wiename,url,photo zu finden.

Anwendungsfälle für Mikroformate

Mikroformate haben zahlreiche Anwendungsfälle. Erstens verwendet derWebmention-Standard Mikroformate, um eine Möglichkeit bereitzustellen, wie Nachrichten und Kommentare von einer Seite zur anderen gesendet werden können. Die Webmention-Spezifikation definiert spezifische Attribute, die Seiten veröffentlichen und konsumieren können, um eine reiche, interoperable Art des Veröffentlichens von Nachrichten und Kommentaren zu schaffen. Mikroformate können auch mit Webmentions verwendet werden, um das Senden sozialer Reaktionen wie Likes, Reposts und Bookmarks von einer Seite zur anderen zu ermöglichen.

Mikroformate ermöglichen auch eine einfache Syndizierung über verschiedene Seiten. Ein Aggregator könnte eine Seite mit veröffentlichten Mikroformaten parsen, um nach Informationen wie einem Posttitel, einem Postinhalt und dem Autor eines Posts zu suchen. Dieser Aggregator könnte dann die gesammelten semantischen Informationen nutzen, um ein Ergebnis auf ihrer Seite darzustellen. Beispielsweise könnten Nachrichten-Aggregatoren und Community-Beitrags-Boards Einreichungen erleichtern und Mikroformate nutzen, um relevante Inhalte von einer Seite zu extrahieren. Weiterhin könnte eine Webseite Mikroformate verwenden, um gestaltete Anfragen an Dritte zu senden, um Inhalte zu veröffentlichen, wie zum Beispiel soziale Netzwerke.

Alle großen Suchmaschinen unterstützen das Lesen und Interpretieren von Mikroformaten. Suchmaschinen profitieren stark vom direkten Zugriff auf diese strukturierten Daten, da sie ihnen ermöglicht, die Informationen auf Webseiten zu verstehen. Mit diesen Informationen können Suchmaschinen den Nutzern relevantere Ergebnisse liefern. Einige Suchmaschinen könnten spezielle Snippets wie z.B. Sternebewertungen auf einer Suchergebnisseite basierend auf den bereitgestellten Daten in Mikroformaten rendern.

Neben der maschinenlesbaren Form sind Mikroformate so gestaltet, dass sie leicht von Menschen gelesen werden können. Dieser Ansatz erleichtert es Menschen, Mikroformat-Daten zu verstehen und zu pflegen.

Mikroformate-Präfixe

Alle Mikroformate bestehen aus einem Wurzel- und einer Sammlung von Eigenschaften. Eigenschaften sind alle optional und potenziell mehrwertig - Anwendungen, die einen einzelnen Wert benötigen, können die erste Instanz einer Eigenschaft verwenden. Hierarchische Daten werden mit verschachtelten Mikroformaten dargestellt, typischerweise als Eigenschaftswerte selbst.

Alle Mikroformat-Klassennamen verwenden Präfixe. Präfixe sindsyntaxunabhängig von Vokabeln, die separat entwickelt werden.

• "h-*" für Wurzelklassennamen, z.B. "h-card", "h-entry", "h-feed" und viele mehr. Diese obersten Wurzelklassen zeigen normalerweise einen Typ und das zu erwartende Vokabular von Eigenschaften an. Zum Beispiel:

  • h-card beschreibt eine Person oder Organisation
  • h-entry beschreibt episodische oder datierte Online-Inhalte wie einen Blogpost
  • h-feed beschreibt einen Strom oder Feed von Beiträgen
  • Sie finden viele weitereVokabeln im Microformats2-Wiki.

• "p-*" für einfache (Text-)Eigenschaften, z.B. "p-name", "p-summary"

  • Generisches Parsing von einfachem Text, generell Textelemente. Bei bestimmten HTML-Elementen zuerst spezielle Attribute verwenden, z.B. img/alt, abbr/title.

• "u-*" für URL-Eigenschaften, z.B. "u-url", "u-photo", "u-logo"

  • Spezielle Parsing: Elementattribute a/href, img/src, object/data etc. Attribute über Elementinhalte.

• "dt-*" für Datetime-Eigenschaften, z.B. "dt-start", "dt-end", "dt-bday"

  • Spezielle Parsing: time-Element-Datetime-Attribut,Value-Class-Pattern und separate Datums-Zeitwert-Parsing für bessere Lesbarkeit.

• "e-*" für Elementbaum-Eigenschaften, bei denen die gesamte enthaltene Elementhierarchie der Wert ist, z.B. "e-content". Das "e-" Präfix kann auch mnemotechnisch als "Elementbaum", "eingebettetes Markup" oder "eingekapseltes Markup" erinnert werden.

Einige Beispiele für Mikroformate

h-card

Dash-card Mikroformat repräsentiert eine Person oder Organisation.

Der Wert jeder Eigenschaft wird in HTML mithilfe des Klassenattributs definiert, welches jedes Element tragen kann.

Beispiel h-card

<p>  <img src="https://example.org/photo.png" alt="" />  <a href="https://example.org">Joe Bloggs</a>  <a href="mailto:jbloggs@example.com">jbloggs@example.com</a>,  <span>17 Austerstræti</span>  <span>Reykjavík</span>  <span>Iceland</span></p>

Verschachteltes h-card Beispiel

<div>  <a href="https://blog.lizardwrangler.com/">    Mitchell Baker  </a>  (<a href="https://mozilla.org/">Mozilla Foundation</a>)</div>

Geparstes JSON:

{  "items": [    {      "type": ["h-card"],      "properties": {        "name": ["Mitchell Baker"],        "url": ["https://blog.lizardwrangler.com/"],        "org": [          {            "value": "Mozilla Foundation",            "type": ["h-card"],            "properties": {              "name": ["Mozilla Foundation"],              "url": ["https://mozilla.org/"]            }          }        ]      }    }  ]}

In diesem Beispiel ist eine h-card sowohl für eine Person als auch die Organisation, die sie repräsentiert, angegeben. Die Zugehörigkeit der Person zur verlinkten Organisation wird mit der Eigenschaft p-org angegeben.

Hinweis: Die verschachtelte h-card hat implizite 'name' und 'url' Eigenschaften, genau wie jede andere Wurzelklassennamen-nur h-card auf einem<a href>.

h-entry

Dash-entry Mikroformat repräsentiert episodische oder datumsvermerkte Inhalte im Web. h-entry wird oft mit Inhalten verwendet, die syndiziert werden sollen, z.B. Blogposts und kurze Notizen.

Beispiel h-entry als Blogpost:

<article>  <h1>Microformats are amazing</h1>  <p>    Published by    <a href="https://example.com">W. Developer</a> on    <time datetime="2013-06-13 12:00:00">      13<sup>th</sup> June 2013    </time>  </p>  <p>In which I extoll the virtues of using microformats.</p>  <div>    <p>Blah blah blah</p>  </div></article>

Eigenschaften

Geparstes Antwort-h-entry-Beispiel

<div>  <p>    <span>      <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">        <img                   alt="Greg McVerry"          src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" />      </a>      <a               href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">        Greg McVerry      </a>    </span>    Replied to    <a           href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats">      a post on <strong>developer.mozilla.org</strong>    </a>    :  </p>  <p>    Hey thanks for making this microformats resource  </p>  <p>    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">      Greg McVerry    </a>    published this    <a           href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource">      <time datetime="2019-05-31T14:19:09+0000">        31 May 2019      </time>    </a>  </p></div>

{  "items": [    {      "type": ["h-entry"],      "properties": {        "in-reply-to": [          "https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Microformats"        ],        "name": ["Hey thanks for making this microformats resource"],        "url": [          "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"        ],        "published": ["2019-05-31T14:19:09+0000"],        "content": [          {            "html": "Hey thanks for making this microformats resource",            "value": "Hey thanks for making this microformats resource",            "lang": "en"          }        ],        "author": [          {            "type": ["h-card"],            "properties": {              "name": ["Greg McVerry"],              "photo": [                "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"              ],              "url": [                "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"              ]            },            "lang": "en",            "value": "Greg McVerry"          }        ]      },      "lang": "en"    }  ]}

h-feed

Dash-feed ist ein Stream oder Feed vonh-entry-Beiträgen, wie vollständige Beiträge auf einer Startseite oder Archivseiten, oder Zusammenfassungen oder andere kurze Listen von Beiträgen.

Beispiel h-feed

<div>  <h1>Microformats Blogs</h1>  <article>    <h2>Microformats are amazing</h2>    <p>      Published by      <a href="https://example.com">W. Developer</a> on      <time datetime="2013-06-13 12:00:00">        13<sup>th</sup> June 2013      </time>    </p>    <p>      In which I extoll the virtues of using microformats.    </p>    <div><p>Blah blah blah</p></div>  </article></div>

Eigenschaften

Kinder

h-event

Dash-event ist für Veranstaltungen im Web. h-event wird oft sowohl mit Veranstaltungsliste als auch mit individuellen Veranstaltungsseiten verwendet.

<div>  <h1>Microformats Meetup</h1>  <p>    From    <time datetime="2013-06-30 12:00">      30<sup>th</sup> June 2013, 12:00    </time>    to <time datetime="2013-06-30 18:00">18:00</time> at    <span>Some bar in SF</span>  </p>  <p>    Get together and discuss all things microformats-related.  </p></div>

Eigenschaften

Beispiel eines geparsten h-events

<div>  <h2>IndieWeb Summit</h2>  <time datetime="2019-06-29T09:00:00-07:00">    June 29, 2019 at 9:00am (-0700)  </time>  <br />through  <time datetime="2019-06-30T18:00:00-07:00">    June 30, 2019 at 6:00pm (-0700)  </time>  <br />  <div>    <div>      <span>Mozilla</span>    </div>    <div>      <span>1120 NW Couch St</span>,      <span>Portland</span>,      <span>Oregon</span>,      <span>US</span>    </div>    <data value="45.52345"></data>    <data value="-122.682677"></data>  </div>  <div>Come join us</div>  <div>    <span>      <a href="https://aaronparecki.com">Aaron Parecki</a>    </span>    Published this    <a href="https://aaronparecki.com/2019/06/29/1/">event </a>on    <time datetime="2019-05-25T18:00:00-07:00">      May 5th, 2019    </time>  </div></div>

{  "items": [    {      "type": ["h-event"],      "properties": {        "name": ["IndieWeb Summit"],        "url": ["https://aaronparecki.com/2019/06/29/1/"],        "author": [          {            "type": ["h-card"],            "properties": {              "name": ["Aaron Parecki"],              "url": ["https://aaronparecki.com"]            },            "lang": "en",            "value": "Aaron Parecki"          }        ],        "start": ["2019-06-29T09:00:00-07:00"],        "end": ["2019-06-30T18:00:00-07:00"],        "published": ["2019-05-25T18:00:00-07:00"],        "content": [          {            "html": "Come join us",            "value": "Come join us",            "lang": "en"          }        ],        "location": [          {            "type": ["h-card"],            "properties": {              "name": ["Mozilla"],              "p-street-address": ["1120 NW Couch St"],              "locality": ["Portland"],              "region": ["Oregon"],              "country": ["US"],              "latitude": ["45.52345"],              "longitude": ["-122.682677"]            },            "lang": "en",            "value": "Mozilla"          }        ]      },      "lang": "en"    }  ]}

Beispiele für das Mikroformatrel-Eigenschaft

Es gibt einige Mikroformate, die auf eine Seite durch die Verwendung einer speziellenrel= Eigenschaft angewendet werden. Diese Mikroformate beschreiben eine Beziehung zwischen einem aktuellen und einem verlinkten Dokument. Für eine vollständige Liste dieser, sehen Sie sich dierel-Eigenschaft im Microformats-Wiki an.

rel=author

Dieses Attribut gibt an, dass das verlinkte Dokument den Autor der aktuellen Seite darstellt.

<a rel="author" href="https://jamesg.blog">James Gallagher</a>

rel=license

Dieses Attribut gibt an, dass das verlinkte Dokument die Lizenz enthält, unter der die aktuelle Seite veröffentlicht wird.

<a rel="license" href="https://mit-license.org/">MIT License</a>

rel=nofollow

Dieses Attribut gibt an, dass das verlinkte Dokument von Suchmaschinen-Ranking-Algorithmen, die sich möglicherweise von der aktuellen Seite ableiten, kein Gewicht erhalten sollte. Dies ist nützlich, um zu verhindern, dass Link-Graph-Algorithmen einer Seite mehr Gewicht geben, als sie sonst nach dem Erkennen eines Links zu einem Dokument bekommen würde.

<a rel="nofollow" href="https://jamesg.blog">James Gallagher</a>

Browser-Kompatibilität

Unterstützt in allen Browsern, die das class-Attribut und deren DOM API unterstützen.

Siehe auch

• Klassische Attribute
• Mikroformat bei Wikipedia
• Offizielle Mikroformate Website
• Suchmaschinenunterstützung auf der offiziellen Mikroformate-Website
• Mikroformate bei IndieWebCamp