Manch einer nennt Microformats und RDFa die stille Revolution bzgl. semantic web.

Aber was ist am besten? RDFa oder microformats? Wer sich mit der Implementation des semantischen Webs beschäftigt, und z.B. die Umsetzungsempfehlungen aus den Google Webmaster Richtlinien liest, merkt schnell das es verschiedene Wege zur Umsetzung gibt. Aber was ist der besser Weg?

Die Antwort ist nicht so einfach.

Microformats

Gegründet wurde die ursprüngliche Bewegung unter dem Namen microformats.org und der zugehörigen Website im Juni 2005. Die Gründer waren Dan Cederholm und Tantex Çelik. Letzterer ist bei vielen Webentwicklern für seine teilweise hochkomplexen Internet-Explorer-Hacks bekannt, die mit den diversen Kommentarmöglichkeiten spielen. Tantek Çelik hat allerdings auch für Microsoft und Technorati gearbeitet.

Das Besondere an den Microformats von microformats.org ist, dass sie keine neuen Technologien und Standards benötigen. Sie verwenden vollständig die Funktionalität von XHTML. Während die Microformats also quasi jederzeit eingeführt werden konnten, schlug sich das eigentliche semantische Web mit komplexeren Problemen herum. Schon seit vielen Jahren gab es Bemühungen, Bedeutung in Tag-basierte Sprachen zu mischen.

Microformats (oder zu deutsch “Mikroformate”) verwenden bekannte HTML Attribute wie “class” und Hierarchien, um Auszeichnungen aus einer fest definierten Auswahl vor zu nehmen.

Vorteile

• Einfach
• Führt keine neuen HTML-Attribute ein, gültiges HTML4.

Nachteile

• Nur eine fest definierte Auswahl an Formaten, nicht erweiterbar.
• Keine definierte API zur Extraktion der Daten.
• Keine definierte Internationalisierungs-Unterstützung.
• Die Verwendung von “class” kann zu Konflikten mit CSS-Definitionen führen.

Microformats Beispiel

<p class="vcard">
<a class="fn email" href="mailto:mail@fly2mars-media.de">Vorname Name</a> arbeitet als
<span class="role">SEO-Berater</span> für
<span class="org">Fly2Mars-Media.de</a>.
</p>

RDF

RDFa erweitert den HTML-Standard um RDF-Daten in (X)HTML-Dokumente einzubetten.

Der vielleicht wichtigste Ansatz ist RDF, das Ressource Description Framework. Dabei handelt es sich nicht um einen Standard, sondern um eine ganze Standard- Familie. Verwaltet wird sie – wie HTML und XHTML – vom W3C. RDF bietet im Grunde eine Beschreibung von Objekten.

Ursprünglich hauptsächlich für Metadaten gedacht, wurde der Ansatz bald auf alle Arten von Daten ausgeweitet. Da RDF selbst allerdings recht umfangreich ist und nicht direkt mit Websites interagiert, hat das W3C den Microformats-Gedanken aufgegriffen und mit RDFa eine einfache RDF-Variante für die Integration in XHTML geschaffen.

Vorteile

• Maximale Flexibilität, umfangreich erweiterbar, um eigene Vokabularien zu definieren.
• Erlaubt Mashups verschiedener Vokabularien.
• Prefixe erlauben kompakteren Code da URLs nicht immer voll ausgeschrieben werden müssen.
• Erlaubt die beliebige Verkettung von Elementen.
• RDFa Dom API

Nachteile

• Hohe Komplexität.
• Auf XML und XHTML ausgerichtet, wenn auch mittlerweile in HTML5 einbettbar.
• Führt 8 neue HTML-Attribute ein.

RDF Beispiel

<p xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<a href="mailto:mail@fly2mars-media.de" rel="v:url" property="v:name">Vorname Name</a> arbeitet als
<span property="v:role">SEO-Berater</span> für
<span property="v:affiliation">Fly2Mars-Media</span>.
</p>

Microdata

Microdata ist eine Erweiterung für HTML5, um semantische Annotationen einzubetten.

Vorteile

• Kompromiss zwischen Flexibilität+Erweiterbarkeit und moderater Komplexität.
• Näher am HTML5-Standard, z.B. mit Unterstützung des HTML5 time Elements.
• Nativer JSON-Export
• Microdata DOM API
• Bevorzugtes Format der Suchmaschinen-Riesen Google,  Microsoft und Yahoo! (siehe auch Schema.org).

Nachteile

• Erlaubt keine mehrfachen Eigenschaften für Elemente, wie z.B. Email und Name in einem einzigen Link-Element.
• Führt 5 neue HTML-Attribute ein.

Mikrodata Beispiel

<p itemscope itemtype="http://schema.org/Person">
<a itemprop="email" href="mailto:mail@fly2mars-media.de">
<span itemprop="name">Vorname Name</span>
</a> arbeitet als <span itemprop="jobTitle">SEO-Berater</span> für <span>fly2mars-media.de</a>.
</p>

Fazit

RDF wird gut von Google erkannt, bietet mehr Möglichkeiten als Microformats. Validiert werden können die Seiten mit dem Rich Snippets Testing Tool von Google. Google empfiehlt Mikrodata, wohl auch weil mehr HTML5.

Deshalb verwende ich jetzt RDF und Mikrodata.

Google unterstützt Rich Snippets in der Anzeige der Suchergebnisse (SERPs). Neben Microformats und RDFa wird auch Microdata unterstützt, letzteres ist dabei das bevorzugtes Format und von Google empfohlen. Auf  Schema.org befindet sich eine gute Dokumentation, diese sollte befolgt werden.

Eure Erfahrungen & Ergänzungen?

Her damit, aktuell spannendes Thema, neben Bewertungen, Autoren-Infos, Kontaktdaten, etc. lässt sich vieles damit so auszeichnen das die Daten richtig von den Suchmaschinen (oder anderen Maschinen lesbaren Geräten) richtig erkannt und verarbeitet werden können. Web 3.0 kann kommen! 🙂

Ein paar Tipps zur Nutzung verschiedener HTML5 & CSS3 Techniken findet ihr unter folgendem Link:

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using

Google hat eine Seite Namens HTML5Rocks ins Netz gestellt. Dort befinden sich Präsentationen und Tutorials rund um das Thema HTML5, mit vielen Beispielen welche ausgiebigen Gebrauch von neuen HTML5-Funktionen machen.

Mit HTML5 werden viele neue Technologien eingeführt. Auf der Projekt-Seite HTML5Rocks möchte Google diese erläutern und Entwickler so dazu bringen, schneller Gebrauch von den neuen Möglichkeiten zu machen, die bereits heute in einigen Browsern (z.B. Safari, Firefox) zur Verfügung stehen.

Derzeit stehen neun Tutorials rund um HTML5-Techniken zur Verfügung. Sie erklären beispielsweise, wie eine Applikation offlinefähig gemacht wird, wie der Aufenthaltsort eines Nutzers ermittelt wird oder Dateien von der lokalen Festplatte des Nutzers gelesen werden. Zudem gibt es Tipps, wie sich Webapplikationen mit HTML5 schneller machen lassen, Nachrichten auf den Desktop des Nutzers geschickt werden oder wie Chromes Entwicklerwerkzeuge verwendet werden.

Google bietet ebenfalls eine Playground genannte Sandbox an, in der neue APIs und CSS-Eigenschaften von Browsern ausprobiert werden können.

Könnt ihr ganz einfach auf der Webseite html5test.com

Hier eine Liste der kompletten HTML 5 Tags.

• 4* Diese Elemente sind definiert unter 4+
• 5* Diese Elemente sind in HTML 5 definiert
  

Tag	Description	4	5
<comment>	Defines a comment	4	5
<DOCTYPE>	Defines the document type	4	5
<a>	Defines a hyperlink	4	5
<abbr>	Defines an abbreviation	4	5
<acronym>	Not supported. Defines an acronym	4
<address>	Defines an address element	4	5
<applet>	Not supported. Defines an applet	4
<area>	Defines an area inside an image map	4	5
<article>	Defines an article		5
<aside>	Defines content aside from the page content		5
<audio>	Defines sound content		5
<b>	Defines bold text	4	5
<base>	Defines a base URL for all the links in a page	4	5
<basefont>	Not supported. Use CSS instead	4
<bdo>	Defines the direction of text display	4	5
<big>	Not supported. Defines big text	4
<blockquote>	Defines a long quotation	4	5
<body>	Defines the body element	4	5
<br>	Inserts a single line break	4	5
<button>	Defines a push button	4	5
<canvas>	Defines graphics		5
<caption>	Defines a table caption	4	5
<center>	Not supported. Defines centered text	4
<cite>	Defines a citation	4	5
<code>	Defines computer code text	4	5
<col>	Defines attributes for table columns	4	5
<colgroup>	Defines groups of table columns	4	5
<command>	Defines a command button		5
<datagrid>	Defines data in a tree-list		5
<datalist>	Defines a dropdown list		5
<datatemplate>	Defines a data template		5
<dd>	Defines a definition description	4	5
<del>	Defines deleted text	4	5
<details>	Defines details of an element		5
<dialog>	Defines a dialog (conversation)		5
<dir>	Not supported. Defines a directory list	4
<div>	Defines a section in a document	4	5
<dfn>	Defines a definition term	4	5
<dl>	Defines a definition list	4	5
<dt>	Defines a definition term	4	5
<em>	Defines emphasized text	4	5
<embed>	Defines external interactive content or plugin		5
<eventsource>	Defines a target for events sent by a server		5
<fieldset>	Defines a fieldset	4	5
<figure>	Defines a group of media content, and their caption		5
<font>	Deprecated. Defines text font, size, and color	4
<footer>	Defines a footer for a section or page		5
<form>	Defines a form	4	5
<frame>	Not supported. Defines a sub window (a frame)	4
<frameset>	Not supported. Defines a set of frames	4
<h1> to <h6>	Defines header 1 to header 6	4	5
<head>	Defines information about the document	4	5
<header>	Defines a header for a section or page		5
<hr>	Defines a horizontal rule	4	5
<html>	Defines an html document	4	5
<i>	Defines italic text	4	5
<iframe>	Defines an inline sub window (frame)	4	5
<img>	Defines an image	4	5
<input>	Defines an input field	4	5
<ins>	Defines inserted text	4	5
<isindex>	Not supported. Defines a single-line input field	4
<kbd>	Defines keyboard text	4	5
<label>	Defines a label for a form control	4	5
<legend>	Defines a title in a fieldset	4	5
<li>	Defines a list item	4	5
<link>	Defines a resource reference	4	5
<mark>	Defines marked text		5
<map>	Defines an image map	4	5
<menu>	Defines a menu list	4	5
<meta>	Defines meta information	4	5
<meter>	Defines measurement within a predefined range		5
<nav>	Defines navigation links		5
<nest>	Defines a nestingpoint in a datatemplate		5
<noframes>	Not supported. Defines a noframe section	4
<noscript>	Defines a noscript section	4	5
<object>	Defines an embedded object	4	5
<ol>	Defines an ordered list	4	5
<optgroup>	Defines an option group	4	5
<option>	Defines an option in a drop-down list	4	5
<output>	Defines some types of output		5
<p>	Defines a paragraph	4	5
<param>	Defines a parameter for an object	4	5
<pre>	Defines preformatted text	4	5
<progress>	Defines progress of a task of any kind		5
<q>	Defines a short quotation	4	5
<rule>	Defines the rules for updating a template		5
<s>	Not supported. Defines strikethrough text	4
<samp>	Defines sample computer code	4	5
<script>	Defines a script	4	5
<section>	Defines a section		5
<select>	Defines a selectable list	4	5
<small>	Defines small text	4	5
<source>	Defines media resources		5
<span>	Defines a section in a document	4	5
<strike>	Not supported. Defines strikethrough text	4
<strong>	Defines strong text	4	5
<style>	Defines a style definition	4	5
<sub>	Defines subscripted text	4	5
<sup>	Defines superscripted text	4	5
<table>	Defines a table	4	5
<tbody>	Defines a table body	4	5
<td>	Defines a table cell	4	5
<textarea>	Defines a text area	4	5
<tfoot>	Defines a table footer	4	5
<th>	Defines a table header	4	5
<thead>	Defines a table header	4	5
<time>	Defines a date/time		5
<title>	Defines the document title	4	5
<tr>	Defines a table row	4	5
<tt>	Not supported. Defines teletype text	4
<u>	Not supported. Defines underlined text	4
<ul>	Defines an unordered list	4	5
<var>	Defines a variable	4	5
<video>	Defines a video		5
<xmp>	Not supported. Defines preformatted text	4

Bestimmt für den ein oder anderen Einsteiger nützlich, deshalb wollen wir euch die Links nicht vorenthalten.

jQuery Tutorial für Anfänger

22 Handy HTML5 & CSS3 Tools, Resources And Guides