Der kleine @font-face Jedi

Wusstet ihr eigentlich das der Netscape 4 im Jahre 1994 schon eine Unterstützung für Webfonts hatte .. auch der IE4 hatte (zugegebenermaßen) seine eigene Implementation .. auch im CSS2 Standard waren Webfonts vorgesehen .. in CSS3 werden sie nun prinzipiell unterstützt ..

Doof nur das die Unterstützung in den verschiedenen Browsern leicht SCHEISSE ist. Ein Grund wieso Webfonts ungern eingesetzt werden.

Wie Wo Was?

Grundsätzlich gibt es 4 Font Formate … da wäre EOT (Embedded Open Type) welches der Internet Explorer unterstützt. Dann wäre da WOFF (Web Open Font Format ) welches Chrome, Firefox und Opera unterstützen. TTF (True Type Font) wonach Safari und Android lechzen .. und zu guter letzt noch SVG (Scalable Vector Grafik) .. mehr oder weniger ein Fallback für moderne Browser .. und die Wahl von iOS vor Version 4.2.

Der Nachteil wenn man nun alle 4 Fonts anbieten will? 4 einzelne Requests werden abgesetzt und die Dateigrößen sind auch nicht zu verachten.

Je nachdem wie viele Zeichen der Font unterstützt liegt man bei Dateigrößen von 30 – 400 KB. Wenn man also nur 2 Schriftarten einbindet und diese je 4 mal bereithält kann man schnell bei 1 MB download nur für Fonts liegen ..

Ungeachtet der ganzen Limits hat Jake Archibald auf der Fronteers 2011 aber einen Weg vorgestellt wie man Fonts quasi bulletproof bis hinunter zum IE6 einbinden kann.

Best Practice @font-face

Ich habe das @font-face Beispiel aus seiner Präsentation mal nachgebaut: Hier das HTML, und hier das CSS File.

Hier der zentrale Code Schnipsel …


@font-face {
   font-family: 'blue-serif';
     src: url('kreon.eot'); /* IE9 compatibility mode */
     src: url('kreon.eot#') format('embedded-opentype'), /* IE6-8 # -> IE9 Format */
          url('kreon.woff') format('woff'), /* Firefox, Chrome, Opera */
          url('kreon.ttf') format('truetype'), /* Safari, Android, iOS */
          url('kreon.svg#blue-serif') format('svg');  /* iOS < 4.2 */
}

Warum 2 Sourcen, wieso ein Hash hinter dem zweiten EOT .. und warum genau die Reihenfolge könnt ihr Jakes Präsentation entnehmen.

Fronteers 2011

Long Time – No See .. ich komme hier gerade wenig zum bloggen .. aber das ändert sich sicher auch mal wieder. Anfang des Monats hat mich mein Arbeitgeber .. die 1&1 Internet AG nach Amsterdam auf die Fronteers geschickt .. und ich finde dazu kann ich auch was erzählen.

Die Fronteers ist die Konferenz in Europa die am meisten Stil hat 🙂 sie richtet sich ausdrücklich an Webdeveloper .. und so saß ich zwei Tage im Tuschinski Theater in Amsterdam und habe mich beeindrucken lassen. Referenten waren unter anderem John Resig (LeadDev jQuery) Bruce Lawson (Opera Web Evangelist), Tab Atkins (Google Web Standards Hacker), Christian Heilmann (Mozilla Developer Evangelist), Lea Verou (CSS3 Guru) ..

Folgende Vorträge gab es an den zwei Tagen:

  • Aral Balkan – The Future is Native
  • Derek Featherstone – Accessibility for the Modern Web
  • Lea Verou – CSS3 Secrets: 10 things you might not know about CSS3
  • Bruce Lawson – HTML5 Semantics: you too can be a bedwetting antfucker
  • Stephen Hay – Go with the flow
  • Tab Atkins – The Future of CSS – Current Experiments and Near-Future Reality
  • Leslie Jensen-Inman – Passion. Purpose. Promise. Pursuit.
  • Alex Russell – Web Components and Model Driven Views
  • Divya Manian – The New Developer Workflow
  • Robert Nyman – HTML5 Forms – KISS time
  • Seb Lee-Delisle – CreativeJS – beauty in the browser
  • John Resig – jQuery and the Open Source Process
  • Jake Archibald – In your @font-face
  • Christian Heilmann – The prestige of being a web developer

Ich werde nun nicht jeden Vortrag im einzelnen eingehen (keine Angst) .. aber ich picke mir mal ein paar heraus die ich am besten fand:

Die Eröffnung:

Aral Balkan hat gleich als erster Speaker die Messlatte ziemlich hoch gelegt. In seinem Vortrag The Future is Native ging es grundlegend erst mal um Web vs. Native .. ihr kennt die Diskussionen sicher .. viele Webentwickler würden am liebsten alle nativen Applikationen los werden und alles mit Webapplikationen abbilden.

Allerdings haben beide Konzepte ihre Vor- und Nachteile:

  • Nativ ist näher am Betriebssystem, kann lokal installiert werden, funktioniert auch ohne Netzzugang etc.
  • Web braucht keine manuellen Updates, funktioniert OS übergreifend, ist immer unter einer URL zu finden ..

Google und diverse weitere Firmen verfolgen dieses Konzept auch konsequent .. der Streit entbehrt allerdings jeder Grundlage und darauf wollte Aral Balkan
hinaus. Es geht weniger darum welche Technologie man einsetzt sondern darum dem User eine einfache, funktionierende und selbsterklärende Applikation für sein Problem
zu liefern. Er illustrierte das sehr Anschaulich an den Fahrkartenautomaten in Norwegen die keine Bedienungsfehler zulassen vs. Fahrkartenautomaten in Schweden die mit Features so überfrachtet sind, daß jeder einzelne nochmal eine Hilfe Taste hat um sich mit einer Hotline verbinden zu lassen.

Sein abschließendes Plädoyer: Don’t compete on features, compete on user experience.

Die Tech Talks:

  • Bruce Lawson ging auf die Semantik der HTML5 Tags ein, was ist neu, was fällt im Vergleich zu HTML4 oder XHTML weg, welche Elemente sind mit Vorsicht zu genießen, wie strukturiert man die neuen Elemente, Einsatz von H Tags innerhalb usw. Sein Fazit: The Golden Rule: There is no Golden Rule und Haarspalter kann sowieso keiner leiden 🙂
  • Das Thema von Stephen Hay war das Layout und der Flow. Im Vergleich zu Print hat es das Web immer noch sehr schwer exotische Layouts darzustellen. Ein klassisches Multi-Colum (wie bei einer Zeitung) kann man nur mit sehr viel Aufwand umsetzen. Er zeigte hier diverse Lösungsansätze mit Flexbox, CSS-Exclusions und Grid Layouts.
  • Tab Atkins zeigte uns was zukünftig mit CSS geplant (needs Webkit) ist und woran er in der CSS Spec arbeitet. Dabei freu ich mich besonders auf Elemente wie VW und VH die einen die Höhe und Breite des Viewports ermitteln lassen. Mit calc() soll man zukünftig in CSS rechnen können, mit cycle() über verschachtelte Elemente iterieren. In CSS4 plant man neue Selectoren und Pseudoelemente z.B. :any-link und :local-link. Außerdem natürlich die lange erwarteten CSS Variablen -> @variable $farbe #fff / Benutzung: color: $farbe;
  • Robert Nyman hat sich HTML5 Forumlare vorgenommen. Neue Attribute, neue Elemente, alles eine schöne neue Welt .. aber mit unterschiedlichen Interpretationen der verschiedenen Browser, das Styling per CSS funktioniert auch nicht übergreifend. Fazit: HTML5 Formulare in all ihrer Pracht, in allen modernen Browsern zu nutzen kann zu akuten Schmerzen führen.
  • Jake Archibald zeigte dann die Anwendung von Custom Fonts und wo die Tücken liegen wenn man diese auch in alten Browsern einbinden will. Der Vortrag war alles in allem ein Best Practice Workshop für die Anwendung von Font-Face.

Der Beste:

Seb Lee-Delisle zeigte mit CreativeJS ziemlich eindrucksvoll was mit ein bischen JavaScript im Browser möglich ist. Dabei ging es in erster Linie um optische Effekte und JS Programmierung für Spiele. Den Source Code seines Particle Beispiels findet man auf Github.

Der zweite Teil war dann ein Experiment:

Alle Smartphones und Tablets im Saal konnten sich lokal auf einen Server verbinden. Dann wurden Farbfolgen abgespielt und Seb versuchte dadurch die Positionen der
Geräte herauszubekommen .. aber seht es euch selbst an:

Der Abschluss:

Chris Heilmann rief uns am Ende allen nochmal ins Gedächtnis was es heißt ein Webdeveloper zu sein. Wir neigen dazu immer alles neu machen zu wollen und den eigenen Code für das Maß aller Dinge zu halten .. aus seiner Sicht ein ungenügender Ansatz .. seine Forderung an uns:

  • Reuse and improve – benutzt bekannte Techniken und entwickelt sie weiter
  • Learn from others – schaut euch an wie andere ihre Probleme lösen
  • Be inventive – denkt außerhalb von Grenzen wie ihr etwas erledigen könnt
  • Be gorgeous – gebt euer Bestes zu geben und macht es so schön wie möglich
  • Code = Poetry – nur dann können andere daraus lernen
  • Be open / Don’t be out for blood – hört auf zu trollen und zu bashen denn das würgt Innovationen ab
  • Join the band and collaborate – sucht euch Leute mit ähnlichen Ideen zum Zusammenarbeiten
  • Be your own teacher – bringt euch Neues selbst bei weil es der beste Weg ist um zu lernen
  • Fill the blanks – schaut wo es nochwas zu tun gibt uns setzt euch dran
  • Use what you heard – lasst euch nicht nur von Konferenzen inspirieren sondern setzt das Gehörte ein
  • Repeat the message – Überzeugt eure Vorgesetzten vom Einsatz neuer Technologien
  • Collect good stories – Erzählt eure Geschichten

Meta Tags und Suchmaschinenoptimierung

An zwei Stellen bin ich in dieser Woche über das Thema Meta Tags in Zusammenhang mit Suchmaschinenoptimierung gestolpert .. dann kann ich auch gleich mal nen Artikel dazu schreiben 🙂

Ich hoffe jedem Leser ist klar was Meta Tags sind, falls nicht empfehle ich hier die Lektüre von SelfHTML.

Zu beachten ist grundsätzlich, daß ihr für jedes einzelne Dokument eurer Website spezifische Meta Angaben macht. Dies ist ein klassischer Fehler in der Suchmaschinenoptimierung .. einfach die SEO relevanten Meta Tags identisch auf jeder Seite zu verwenden.

Unverzichtbare Meta Tags?

Die gibt es .. und das sind auf jeden Fall die Meta Content Type, der Title Tag und die Meta Description.

Der Content Type definiert den Zeichensatz der Seite .. also z.b.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

Wenn man diese Angabe weg lässt kann der Browser ggf. Probleme mit der Darstellung der Seite haben.

Der Title Tag hat zwar kein Meta davor stehen .. zählt aber zu den Meta Tags. Maximal 70 Zeichen soll er umfassen und die Seite beschreiben. Die wichtigsten Keywords sollten hier in einem lesbaren Satz verpackt erscheinen.

Die Description ist aus SEO Sicht fast wichtiger. Hier schreibt man mit maximal 160 Zeichen eine Beschreibung der Seite hinein. Dieser Text wird dann auf den Suchergebnissseiten angezeigt und soll den Suchenden natürlich zum Klick animieren .. hier gilt es kurz und prägnant für die eigene Seite zu werben.
Laut Google beeinflusst die Meta Description das Ranking allerdings nicht.

Und die Robots Meta Angaben?

Die kann man im Grunde in die Tonne kloppen wenn ihr möchtet das eure Seite uneingeschränkt indiziert wird. Ein Meta Tag wie meta name=“robots” content=“index, follow” ist einfach nicht notwenig. Eure Seite wird auch ohne diese Angabe indiziert. Sinn macht die Robots Angabe nur wenn ihr Dinge von der Indizierung auschließen wollt.

Gültige Robots Attribute für den Google Bot wären dann:

  • NOINDEX – verhindert die Aufnahme der Seite in den Index
  • NOFOLLOW – verhindtert das der Bot den Links auf der Seite folgt
  • NOARCHIVE – verhindert das eine Kopie der Seite bei Google gecached wird
  • NOSNIPPET – verhindet das eine Beschreibung unte den SERPs erscheint, ebenso das Caching
  • NOODP – verhindert das die Beschreibung aus dem Open Directory Project in den SERPs benutzt wird
  • NONE – wie “NOINDEX, NOFOLLOW

Aber die Keyword Meta Angabe brauche ich?

Nein. Diese spielen für Suchmaschinenoptimierung aktuell keine Rolle mehr. Die Chance das sich das ändert ist gering. Der Einfluss auf das Ranking ist nicht messbar. Sollten die Keywords automatisch generiert werden muss man sie aber auch nicht zwangsweise entfernen.

Und der Rest?

  • Language – macht nur Sinn wenn man mehere Sprachen auf der Website verwendet
  • Geo – werden von Google derzeit nicht beachtet, aber von Bing
  • Source – Testphase, für Newsportale gedacht
  • Refresh – immer Serverseitige 301 Redirects verwenden anstatt das hier
  • Site verification – besser per DNS oder externer Datei verfizieren
  • Author – steht in der Regel im Text oder auf der Seite (Impressum)
  • Revisit after – kein Bot beachtet das
  • Expiration – Seiten sollte man löschen wenn sie überflüssig sind
  • Date – in der XML Sitemap pflegen
  • Copyright – steht auf nahezu jeder Seite, muss man nicht doppelt pflegen
  • Abstract – nicht SEO relevant, wer nutzt das?
  • Distribution – Zugangskontrolle zum Dokument? Wieso? Ist doch öffentlich!
  • Generator – CMS der Seite .. nutzlos
  • Cache Control – über die HTTP Header Information machen
  • Resource Type – spielt für SEO auch keine Rolle

Suchmaschinenoptimierung und HTML5

HTML5 soll zwar erst 2014 vom W3C endgültig verabschiedet werden .. allerdings implementieren Chrome, Safari und Firefox in ihren aktuellsten Versionen schon nahezu den gesamten Sprachraum von HTML5.

In wie weit Suchmaschinen schon explizit HTML5 Tags erfassen oder nicht bleibt abzuwarten. Einige Dinge lassen sich trotzdem schon dazu sagen:

Semanatik durch neue Tags

HTML5 ist wesentlich semantischer als seine Vorgänger. Durch viele neue Tags wie kann man Bereiche die derzeit oft nur schwer zu erkennen sind kategorisieren:

  • HEADER .. Kopf, Logo etc.
  • ARTICLE .. Hauptinhalt
  • ASIDE .. Sidebar
  • SECTION .. dedizierter Bereich
  • FOOTER .. Impressum etc.
  • NAV .. Navigation
  • DETAILS .. weitere Informatione

ARTICLE könnte zum wichtigsten Element für einen Crawler werden da hier der Hauptinhalt der Seite erwartet wird. In NAV erwartet der Crawler Links zu sämtlichen Hauptseiten einer Website. FOOTER spielt dann für die Indizierung weniger eine Rolle da hier nur rechtliche Informationen, Impressum und Kontaktdaten zu erwarten sind. DETAILS enthält weiterführende Informationen zum Artikel etc.

Semantik durch neue rel Attribute

Mit HTML5 kommen auch jede Menge neuer REL Attribute auf uns zu:

  • alternate .. alternative Version wie z.b. eine Druckansicht
  • author .. Link zum Autoren
  • bookmark .. Permalink
  • external .. externer Link
  • help .. Hilfeseite
  • license .. Lizenzbestimmungen
  • next .. zur nächsten Seite des Artikels
  • nofollow .. Crawler soll nicht folgen
  • noreferrer .. kein Referer senden
  • prefetch .. Browser soll schon mal das nächste Dokument cachen
  • prev .. zur vorhergehenden Seite des Artikels
  • search .. Link zur Suche
  • sidebar .. gute Frage
  • tag .. Keyword für das Dokument

Bei richtigem Einsatz könnten diese Attribute für Google sehr wertvoll sein bei der Indizierung und Bewertung einer Website. PREFETCH könnte auf die nächste Seite im Flow hindeuten. ALTERNATE ein Indiz für bewussten doppelten Inhalt. BOOKMARK ist der Permalink wenn es sich um ne dynamische Seite handelt usw.

Was macht Google?

Aus Crawler Sicht ist Google HTML5, bzw. semantische Auszeichnung vollkommen egal. Man wird kein besseres Ranking erzielen wenn man HTML5 semantisch korrekt einsetzt. Google will die besten Informationen zu einer Suchanfrage bieten. Ob die Seite da in völlig invalidem HTML 3.2 daher kommt juckt Google nicht .. solange die Seite zugänglich ist und Inhalt bietet wird sie auch ranken.

Trotzdem ist HTML5 gut für Suchmaschinen. Der CONTENT Bereich in einer Website ist meist durch ein DIV mit der ID oder KLASSE “content” definiert 🙂 .. ja .. schön wäre es. Im Grunde macht das doch jeder Webentwickler wie er möchte und Google kann sich nicht darauf verlassen.

Durch die verbesserte Semantik erhöht sich aber die Zugänglichkeit für den Crawler. Suchmaschinen müssen nicht erst durch irgendwelche Algorithmen erraten wo sich der Hauptinhalt befindet und können so Zeit beim crawlen sparen. Und bei den Millionen von Seiten die Google jeden Tag neu crawlt ..

Und nun?

HTML5 wird in den nächsten Jahren und vielleicht auch in Zukunft nicht wirklich wichtig für Suchmaschinenoptimierung sein, vor allem weil sich Google neutral verhalten wird und alle HTML Versionen weiter gleich behandeln wird.

Trotzdem sollte man neue Seiten schon so anlegen das man ggf. das Skelet relativ einfach gegen HTML5 Elemente austauschen kann. Dies erreicht man indem man einfach seinen DIVs die ID oder Klassennamen der HTML5 Elemente gibt.

Google könnte HTML5 aber auch fördern indem in ein paar Jahren Seiten die strikt auf HTML5 umgestellt haben einen kleinen Bonus im Ranking bekommen .. was aber sehr unwahrscheinlich ist. Eher kann ich mir vorstellen das HTML5 Seiten auf Wunsch öfter Besuch vom Crawler bekommen und damit schneller im Index landen .. aber das ist reine Spekulation.

Target Blank im Strict Mode

Wenn man seine Webseiten im HTML Strict Mode schreibt erlaubt das W3C keine Verwendung von target=”_blank” was bedeutet ich kann nicht wie gewohnt einen Link in einem neuen Fenster öffnen.

Ich habe dafür einen kleinen Workaround in JavaScript geschrieben der ohne eine Java Script Bibliothek wie jQuery auskommt.

Das Script funktioniert in allen gängigen Browsern bis hinunter zum IE6.

Ihr müsst nur den Links die in einem neuen Fenster öffnen sollen ein rel Attribut mit wem Wert external mitgeben .. also einfach rel=“external”.

Hier das Target Blank Script:

var targetBlank = {
    setListener: function() {
      var links = document.getElementsByTagName(“a”);
      for (var i = 0; i < links.length; i++) {    
        var rel = links[i].getAttribute(“rel”);
        if (rel==‘external’) {    
          var blank = document.createAttribute(“target”);
          blank.nodeValue = “_blank”;
          links[i].setAttributeNode(blank);
        }  
      }
    },

init: function() { this.setListener(); }, addEvent: function(obj, type, fn) { if (obj.addEventListener) obj.addEventListener(type, fn, false); else if (obj.attachEvent) { obj[“e”+type+fn] = fn; obj[type+fn] = function() {obj[“e”+type+fn]( window.event );} obj.attachEvent(“on”+type, obj[type+fn]); } } }; targetBlank.addEvent(window, ‘load’, function(){ targetBlank.init(); });

Folgendes passiert:

  • in der Funktion addEvent wird geschaut mit welchem Browser wir es zu tun haben
  • der IE verwendet die attachEvent Methode, alle anderen Browser addEventListener
  • die Funktion setListener schaut wieviele a Tags sich im DOM befinden
  • für jedes a Tag wird dann das rel Attribut abgefragt
  • wenn es da ist gibt es den Wert von rel zurück wenn nicht null
  • dann erzeugt das Script für jedes rel=“external” ein target=“blank” und schreibt es in den DOM

Das wars auch schon .. wir haben den Strict Mode damit umgangen .. das Dokument validiert und wir können trotzdem Links in neuen Fenstern öffnen.

Neue Elemente in HTML5 – Teil 2

Es folgt eine Übersicht von Elementen die neu mit HTML 5 eingeführt werden inklusive einer kurzen Erklärung:

Weitere neue Elemente

VIDEO
erlaubt die Einbindung von Videos direkt in HTML ohne Flash, geplante Formate (die aber nicht von allen Browsern unterstützt werden sind OGG Theora, H.264 und WebM (VP8).

AUDIO
erlaubt die Einbindung von Audio direkt in HTML ohne Flash, geplante Formate (die aber nicht von allen Browsern unterstützt werden sind OGG Vorbis, MP3 und WAV.

EMBED
definiert einen Bereich für eingebundenen Inhalt aus fremden Quellen oder auch Plugins

MARK
dieses Element wird wie ein BOLD oder ITALIC benutzt um Text zu markieren

PROGRESS
dient dazu um einen Download Fortschritt darzustellen dazu kann ein Maximalwert und ein Valuewert (Fortschritt) angegeben werden

METER
Maßeinheit um den Füllstand/Restwert einer bekannten Maximalgröße anzugeben (freier Speicher, Anzahl Teilnehmer)

TIME
Element um Zeitangaben zu markieren oder wesentlich exaktere Zeitangaben zusätzlich mit anzugeben

RUBY, RT, RP
dient dazu hinweise zur Aussprache von Sprachen wie Chinesisch oder Japanisch mit auszugeben

CANVAS
dient dazu um im Browser zu rendern und zu zeichnen in Verbindung mit JavaScript .. dieses Element wird wohl über kurz oder lang Flash ersetzen

COMMAND
definiert einen Button der gleichzeitig nur eine Erweiterung des MENU Elements sein kann er dient als Anker für weitere Elemente der Website die ggf. auf den Wert zurückgreifen

DETAILS
definiert ein Element das auf und zugeklappt werden kann um weitere Informationen dazustellen

DATALIST
dient dazu um für INPUT Elemente eine Autovervollständigung zu ermöglichen

KEYGEN
dient dazu zwei Schlüssel zu generieren .. einer wird an den Server übertragen ein anderer lokal gespeichert

OUTPUT
dient z.b. Scripten als Ausgabebereich von Berechnungen oder Kalkulationen

Collapsing Margins

Design ist fertig .. ihr entfernt 1-2 Hilfslinien die ihr zum ausrichten benutzt habt und plötzlich stimmen Abstände nicht mehr die ihr mit margin-bottom bzw. margin-top gestaltet habt. Eine Hintergrundgrafik ist verschoben oder einer der oberen bzw. untere Abstände ist verrutscht.

Ihr habt 2 DIV Boxen und möchtet diese mit margin-bottom bzw. margin-top ausrichten. Unter ganz bestimmten Umständen werden die Angaben der Elemente zusammengefasst.

  • Das äußere DIV hat kein oberen und unteren Rahmen
  • Das äußere DIV besitzt kein vertikales padding
  • Das äußere DIV verfügt ober- und unterhalb über keinen Inhalt

Auch wenn es nervt .. es ist ein Feature von HTML. Es ist dazu gedacht in einfach gegliederten Texten Abstände nicht unkontrollierbar wachsen zu lassen.

Wie kann man das also verhindern?

Es gibt einige Möglichkeiten:

  • benutzt padding statt margin
  • probiert einen border zu setzen wenn möglich
  • erzeugt eine clearance zwischen den Elementen
  • Elemente mit overflow, float (left/right), position (absolute/fixed), display (inline-block) kolabieren nicht .. beachtet dabei das ihr einen BFC (block formating content) erzeugt der ggf. noch andere Auswirkungen hat

Neue Elemente in HTML5 – Teil 1

Es folgt eine Übersicht von Elementen die neu mit HTML 5 eingeführt werden inklusive einer kurzen Erklärung:

Elemente zur Strukturierung

SECTION
definiert einen eigenen Bereich innerhalb des Dokuments. Es sollte aber nicht zu Styling Zwecken verwendet werden (hier tut es das DIV) und ebenfalls nicht wenn ein anderes Element wie ARTICLE, ASIDE oder NAV besser passt. In der überarbeiteten Spec des W3C wird empfohlen viel mehr das ARTICLE Element zu verwenden.

ARTICLE
beschreibt einen unabhängigen Teil eines Dokuments wie einen einzelnen Blogeintrag, einen Beitrag in einem Forum etc.

ASIDE
beschreibt einen Seitenbereich der nicht zum eigentlichen Hauptinhalt der Seite gehört .. also eine klassische Sidebar wie sie in vielen Blogs und Webseiten vorkommt.

HGROUP
beschreibt den Header eines Bereichs .. das W3C sieht vor hierm HEADLINE Elemente zu gruppieren

HEADER
soll die “Kopfelemente” eines Dokuments strukturieren und kann auch Navigationselemente beeinhalten

FOOTER
beschreibt zusätzliche Informationen seines übergeordneten Elements wie z.b. wer es geschrieben hat, Copyright Infos und weiterführende Links.

NAV
beschreibt einen Bereich mit Links die der Navigation dienen. Vornehmlich ist damit die Hauptnavigation gemeint.

FIGURE
beschreibt Bereiche des Dokuments die eingebettet sind. Also z.B. Bilder, Videos, Quelltext und Zitate. Mit FIGCAPTION wird hier auch gleich noch ein Element für den beschreibenden Text neu eingeführt.

Welche Browser unterstützen HTML5?

Welche Browser heute schon HTML 5 unterstützen hängt in erster Linie von der verwendeten Layout Engine ab. Im Jahr 2010 spielen 4 Rendering Engines eine maßgebliche Rolle. Da wären Trident (Internet Explorer), Gecko (Firefox), WebKit (Safari und Chrome) und Presto (Opera) .. weitere Engines die allerdings heute keine Rolle mehr spielen sind Tasman (Internet Explorer auf dem Mac) und KHTML (KDE).

Zuerst muss man (leider) sagen das derzeit keine der genannten Engines HTML5 vollständig unterstützt.

Opera ist mit seiner Presto Engine allerdings am weitesten vorangeschritten hier werden die meisten Formular Elemente und Attribute unterstützt. Danach folgt die WebKit Engine die mit riesigen Schritten aufholt. Seitdem Google mit dem Chrome Browser am Markt ist und ebenfalls WebKit weiterentwickelt werden hier mit fast jedem neuen Release weitere HTML 5 funktionen integriert.

Wenn man den Blick nur auf neue HTML Elemente legt (z.b. SECTION, NAV oder ARTICLE) ist der WebKit mit der Implementierung am weitesten vorangeschritten.

Die Gecko Enginge unterstützt zwar die meisten neuen HTML 5 APIs (Programmierschnittstellen) aber leider aktuell nur sehr wenige der neuen Elemente und Attribute.

Die Trident Engine im aktuellsten Internet Explorer 8 hinkt allen anderen weit hinterher. Nahezu kein Element das mit HTML 5 neu eingeführt wird kann im IE8 interpretiert werden.

Wenn man also HTML 5 Websites ausprobieren möchte bzw. selbst mit dem neuen Webstandard experimentieren möchte sollte man sich die aktuellsten Versionen von Chrome, Safari bzw. Opera auf seinem System installieren.

Wann es einen umfangreichen HTML 5 Support im Internet Explorer geben wird steht derzeit noch in den Sternen. Microsoft argumentiert damit das HTML 5 immer noch im Entwurfsstadium ist und noch nicht offiziell vom W3C verabschiedet wurde.

Allerdings soll der neue Standard Ende 2010 als offizielle Empfehlung vom W3C verabschiedet werden .. ob es dazu kommt ist allerdings noch abzuwarten.

Trotzdem beginnen mittlerweile schon einige große Webseiten ihr Angebot ebenfalls in HTML 5 anzubieten. Einer der Pioniere ist hier sicherlich YouTube. Der Grund ist wohl, daß die meisten Videos die man im Web ansehen kann ein installiertes Flash voraussetzen. Flash ist allerdings sehr ressourcenintensiv, kein offener Standard und in letzter Zeit immer wieder Grund für Sicherheitslücken. In HTML 5 ist es nun aber möglich Videos nativ (per VIDEO Tag) einzubinden wie man das schon seit langer Zeit mit Bildern durch den IMG Tag tut.

Hier findet ihr die YouTube HTML 5 Testseite

HTML5

Derzeit gibt es grundsätzlich 2 Sprachen mit denen man seine Webseiten schreiben kann. Da wäre zuerst HTML 4.01 und daneben XHTML 1.0 und XHTML 1.1.

Konfusion?

XHTML 1.0 ist quasi das selbe wie HTML 4.01 allerdings in XML geschrieben d.h. man benötigt grundsätzlich abschließende Tags, man schreibt immer klein und es muss immerdie Namensraum-Angabe für XHTML enthalten sein. (Um nur einige Dinge zu nennen). HTML ist in SGML verfasst.

XHTML 1.1 ist wesentlich strikter als sein Vorgänger. Viele Dinge die in XHTML 1.0 noch erlaubt waren sind es in 1.1 nicht mehr. Problem bei XHTML 1.1 ist/war das viele alte Browser es nicht sauber darstellen könnnen.

Im Zweifelsfall hat der Webdesigner seinen Quelltext dann in XHTML 1.0 verfasst (wenn es auf maximale Kompatibilität und möglichst geringe Kosten ankam).

Aber nun soll alles besser werden: HTML 5

HTML 5 soll die vorhandenen Spezifikationen (HTML 4.01, XHTML 1.0) ersetzen. Man wird HTML 5 in XML, SGML und als DOM-Abbildung schreiben können.
Desshalb sieht der HTML 5 Entwurf auch 3 drei Sprachformen vor: HTML 5, XHTML 5 und DOM 5.

Wie gewohnt wird es jede Menge neuer Elemente geben und auch viele alte werden wegfallen. Ein großer Vorteil soll sein das man Mediendateien (Audio/Video) nativ in den Browser einbinden kann und keine Flashplugins oder ähnliches mehr notwendig ist.

Vieles wird sich aber auch gar nicht verändern.

Ab wann kann man HTML 5 schreiben?

Grundsätzlich kann man sofort damit beginnen. Viele Browser (oder Engines) unterstützen HTML 5 teilweise obwohl es noch nicht komplett verabschiedet ist.

Am weitesten ist dabei Opera. Aber selbst Microsoft strengt sich derzeit an HTML 5 in seinen IE 8 reinzuprügeln.

Für den Produktiveinsatz eignet sich HTML 5 allerdings noch nicht und es wird wohl noch Jahre dauern bis die Mehrheit der installierten Browser HTML 5 vollständig unterstützen.

HTML 5 ist allerdings im Hinblick auf Kompatibilität mit bereits vorhandenen Browsern entstanden und viele Dinge die HTML 5 nativ kann werden heute durch Javascript quasi ersetzt.
Hier findet ihr einen Validator für HTML 5

HTML 5 Quellen

Wenn euch diese Thema weiter interessiert findet ihr hier zwei Dokumente des W3C die sich zum einen direkt mit HTML 5 und zum anderen mit dem Unterschied zu HTML 4 beschäftigen. Beide Dokumente sind die sog. letzten Versionen der Working Drafts also quasi die Vorstufe zur Norm.