Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Praxisbesuch

Sonnenseiten: Praxisbesuch

Zum Start der diesjährigen Sonnenseiten geht es um Theorie und Praxis von HTML5. Wie sich beide am besten in einer Webseite vereinen lassen erläutert Fabian Tempel anhand von HTML5Doctor.com.

HTML5 anwenden ist das Eine, über die neuen Techniken zu schreiben das Andere. HTML5Doctor.com ist das gelungen. Die Seite bietet dem Nutzer umfassende Informationen über Neuigkeiten und Änderungen rund um HTML5. Nicht zuletzt durch die hervorragenden Autoren hinter diesem Projekt.

Screenshot: html5doctor.com

Einerseits bieten ausführliche Artikel Einblicke in verschiedene Teilaspekte des kommenden Standards, wie der jüngste Beitrag zur Dokumentstruktur bzw. Überschriftenhierarchie unter Beweis stellt, andererseits liefert die Seite einen Glossar für alle Elemente, die im Standard enthalten sein werden. Jedes Element wird durch einen kurzen Absatz beschrieben und ein Code-Beispiel visualisiert. Es kann somit als Nachschlagewerk dienen, wenn ein Webworker bei der eigenen Arbeit einmal nicht weiter weiß.

Aber auch die Packungsbeilage stimmt. Ein Blick in den Quellcode der Seite verrät, dass auch hier schon konsequent HTML5 zum Einsatz kommt. Der Grundaufbau der Seite besteht nicht nur mehr aus einer Vielzahl von <div>-Containern, sondern wird durch die neuen semantisch wertvollen Tags wie z.B. <header>, <nav>, <section>, <article>, <aside> & <footer> ausgezeichnet. Diese neuen Elemente sollen Webautoren die Möglichkeit geben, Teilbereiche der Webseite klarer strukturieren zu können. Das Grundgerüst von HTML5Doctor beinhaltet die wichtigsten neuen »Bausteine« und kann als gute Inspirationsquelle für eigene Projekte dienen. Einen tieferen Einblick in die richtige Verwendung der neuen Elemente gibt Michael Jendryschik in seinem Artikel über das »Endoskelett einer Webseite«.

Zusätzlich wird das Markup durch WAI-ARIA angereichert. Auch beim Design der Seite wurde nicht vor neuen Standards halt gemacht. Zum Beispiel werden Elemente wie der »Suchen-Button« nicht mehr mit Hintergrundgrafiken erzeugt. In diesem Fall werden Hintergrundverläufe, Schatten und auch die altbekannten abgerundeten Ecken durch CSS3 erzeugt. Des Weiteren werden Webfonts mit Hilfe des »CSS3 Font Module« eingebunden. HTMl5Doctor nutzt hierfür den Dienst fontsquirrel.com um lizenzfreie Schriften einsetzen zu können.

HTML5Doctor ist also ein lebendiges Beispiel, dass HTML5 und die anderen neuen Techniken heute schon nutzbar sind. Sowohl inhaltlich als auch technisch hat diese Seite für seine Besucher Einiges zu bieten.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Die Kommentare sind geschlossen.