1039408

Verständliche Strukturierung

09.09.2010 | 12:23 Uhr |

Verständliche Strukturierung

In einer HTML-Seite lässt sich nicht ohne weiteres erkennen, wo der Inhalt steht, was beispielsweise die Fußzeile ist oder was die Links zu anderen Artikeln sind. Speziell für Menschen mit Sehschwäche (aber nicht nur für die!) ist es eine Herausforderung, einen Link zu erkennen, der ohne gefärbte Buchstaben und ohne den Unterstrich eingefügt ist.

HTML 5 definiert dafür eine ganze Reihe von Strukturhilfen, die den Aufbau einer Seite erleichtern. Beispielsweise gibt es Vorspann, Inhalt und Fußzeile:

<header>

<p>Vorspann</p>

</header>

<article>

<p>Inhalt</p>

</article>

<footer>

<p>Fusszeile</p>

</footer>

Soll in einem dieser Teile die Navigation ("Links") zu anderen Teilen stehen, fügt man in HTML 5 das Tag "<nav>" hinzu. Das ändert zwar nichts am Aussehen, doch damit ist allen Browsern klar, dass in diesem Abschnitt die Links zu anderen Internet-Seiten stehen.

Ältere Spielverderber

Die aktuelle Version von Internet Explorer erkennt auf der Musterseite nichts - alle Formatierungen gehen verloren.
Vergrößern Die aktuelle Version von Internet Explorer erkennt auf der Musterseite nichts - alle Formatierungen gehen verloren.

Die schöne, neue Welt von HTML 5 hat eine Kehrseite: Ältere Versionen der Browser können mit den neuen Tags nichts anfangen. Dazu zählen neben Firefox 2, auch alle derzeit erhältlichen Varianten von Internet Explorer für Windows (erst die kommende Version 9 von Internet Explorer wird teilweise HTML 5 verstehen und darstellen). Im besten Fall zeigt ein solcher Browser den Inhalt der Seite an - allerdings ohne Berücksichtigung der Stilvorlagen. Sprich: Alle Texte und Bilder werden untereinander im Browser-Fenster angezeigt. Diese merkwürdige Darstellung ist nicht akzeptabel, doch es gibt reichlich Lösungen dafür.

Safari 5 kennt viele, aber leider nicht alle neuen Tags von HTML 5.
Vergrößern Safari 5 kennt viele, aber leider nicht alle neuen Tags von HTML 5.

LÖSUNG 1 : Beispielsweise indem man alte und neue Tags in die HTML-Datei schreibt und die Stilvorlagen doppelt definiert.

LÖSUNG 2 : Oder wenn man (mit Hilfe von Javascript) die neuen Tags für Internet Explorer erzeugt (zum Beispiel: "<script>document.createElement(‚figure‘);</script>" . Das komplette Skript für alle neuen Tags gibt es bei Remy Sharp .

Die Version 10 von Opera hat keine Schwierigkeiten mit unserer HTML-5-Musterseite - orange markiert ist der Teil, der auch im Quellcode ausgewählt ist.
Vergrößern Die Version 10 von Opera hat keine Schwierigkeiten mit unserer HTML-5-Musterseite - orange markiert ist der Teil, der auch im Quellcode ausgewählt ist.

LÖSUNG 3 : Am besten gefällt uns aber eine Vorlage von mehreren amerikanischen Entwicklern " HTML 5 Boilerplate ". Sie enthält ein Sammelsurium an Tricks in HTML-Code und in den CSS-Stilvorlagen und erreicht damit, dass eine Seite mit HTML 5 selbst in Internet Explorer 6 einigermaßen korrekt angezeigt wird. Einziger Wermutstropfen: Man braucht fundierte Kenntnisse von HTML sowie CSS und sollte des Englischen mächtig sein.

Macwelt Marktplatz

1039408