Actos Lab

HTML5-Möglichkeiten für Webdesigner

13.12.2012 Auch wenn noch längst nicht jede neue Website auf HTML5 basiert, sollte sich jeder Webentwickler schon heute mit der Sprachen vertraut machen.

Was ist HTML5 überhaupt?

HTML5 Logo des W3C
Das HTML5 Logo des W3C

HTML5 ist die neuste Version der Hypertext Markup Language (HTML) und soll 2014 fertig gestellt werden. Aber auch jetzt unterstützen schon viele Browser die bereits definierten HTML5 Funktionen. Spätestens um eine iPhone/iPad-freundliche Website mit Flash-ähnlicher Funktionalität zu ermöglichen, kommt kein Entwickler mehr an HTML5 vorbei. Die Tatsache, dass sogar Google eine HTML5-Version von YouTube rausgebracht hat, macht klar, dass in Zukunft kein Webentwickler mehr ans HTML5 vorbeikommen wird.

Hinter HTML5 steckt keine große Idee, sondern eher viele kleine Ideen, die zusammen eine innovative und zukunftstaugliche Sprache für modernes Webdesign ergeben. Existierendes HTML4 MarkUp wird von HTML5 unterstützt und ein modernes HTML5-Eingabefeld wird (ohne die zusätzlichen HTML5-Features) als Standard-Eingabefeld in alten Browsern angezeigt.

Welche wichtigen Features bringt HTML5 mit?

  • Der Doctype, der am Anfang jedes HTML Dokuments definiert werden muss, ist in HTML5 denkbar einfach. Er lautet immer einfach nur <!DOCTYPE html>

  • HTML5 ist direkt multimediafähig; Audio- und Video-Dateien können ohne Plugins (wie. z.B. Flash oder Silverlight) eingebunden werden.

  • Mit Canvas Elementen steht eine Möglichkeit zur Verfügung, 2D Grafiken direkt im HTML-Code zu zeichnen.

  • Durch die Unterstützung des Application Cache ist es möglich, Webanwendungen zu entwickeln, die auch offline benutzbar sind.

  • Dank der Unterstützung von WebSockets kann die Ladezeit einer Website deutlich verbessert werden.

Ebenfalls erwähnenswert ist, dass in HTML5 entwickelte Apps problemlos für verschiedene Smartphone-Plattformen (z.B. iOS, Android, Windows Phone und Blackberry) ausgerollt werden können, ohne dass eine aufwendige Portierung notwendig ist.

Wie ist ein HTML5 Dokument aufgebaut?

Die folgende Abbildung zeigt ein minimales HTML5-Dokument.

HTML5 Quellcode
Ein HTML5 Grundgerüst

Es sieht klassischem HTML sehr ähnlich. Dennoch fallen einige Besonderheiten auf:

  • Der bereits oben erwähnte, sehr einfach Doctype.

  • Das neue <header>-Element umgibt einleitende Elemente wie den Titel. Auch ein Logo oder ein Inhaltsverzeichnis würden hier hingehören.

  • Der <nav>-Tag umgibt die Navigation oder Links wie "vor" und "zurück".

  • Mit dem <section>-Tag werden die einzelnen Abschnitte eines Dokuments markiert. Dabei ist eine Verschachtelung mehrerer Sektionen möglich.

  • Mit <aside> werden Bereiche markiert, die auch getrennt vom eigentlichen Seiteninhalt noch Sinn ergeben. In unserem Beispiel nehmen wir es für eine Sidebar.

  • Im <footer> können Informationen über den Autor oder das Copyright untergebracht werden.

Statt Divs werden, wo immer möglich, semantische Tags benutzt. Diese ermöglichen es Suchmaschinen und Screenreadern den Inhalt einer HTML-Seite besser zu interpretieren.