Gastartikel: Semantisches HTML5

HTML5 bietet uns mit vielen neuen JavaScript-APIs das Rüstzeug, um die Webapplikationen der Zukunft zu bauen, aber auch für normale Websites sind interessante Features an Bord. Neben einer Unzahl kleiner und kleinster Änderungen, die jedem Webentwickler das Leben einfacher machen, gibt es auch eine Handvoll waschechter Neuheiten, namentlich neue HTML-Elemente. Diese sind dringend nötig, denn die HTML5-Vorgänger HTML 4.01 und XHTML 1 beinhalten beide eine Auswahl an Elementen, die 1997 festgelegt wurde und auf das Web von heute nicht mehr so recht passt.

Neue strukturierende Elemente

Die durchschnittliche Website von Anno 1997 ist mit dem, was wir heute so sehen vom Aufbau her nicht zu vergleichen. Sofern man sich damals überhaupt eine ausgetüftelte Seitenstruktur zulegte, setzte man diese mit Frames um – das war damals auch das absolut angemessene Mittel der Wahl. Im Web von heute erfolgt die Einteilung einer Seite durch das HTML selbst, was zur Folge hat, dass Websites heute zu 90% aus dem<div>-Element zu bestehen scheinen. Uns das ist eigentlich ein absolut unnötiges Ärgernis, denn mittlerweile haben sich gewisse Mittel der Strukturierung etabliert. Fast jeder Seite hat irgendwelche Formen von Kopf-, Fuß-, Haupt- und Seitenbereichen. HTML5 gibt uns erstmals eigene HTML-Elemente hierfür.

Der erste Neuling ist das <section>-Element. Es nimmt an allen den Stellen den Platz des <div>-Elements ein, an denen ein inhaltlicher Abschnitt von einem anderen getrennt werden muss. Das <div> ist damit nicht ausgestorben –an jeder Stelle, an der man einfach irgendein Container-Element braucht, ist es weiterhin das Mittel der Wahl. Das <section>-Element ist allein für die Einteilung in Sinnabschnitte da. Ein naher Verwandter ist das <article>-Element, das ebenfalls Sinnabschnitte einteilt, aber für in sich geschlossene Serien-Inhalte steht, etwa für Blogposts, Forennachrichten oder Kommentare unter einer News-Meldung. Für angefügte Informationen steht das <aside>-Element bereit, das sich beispielsweise auf Website-Ebene für Seitenleisten oder innerhalb eines Abschnitts als Containerelement für Metainformationen anbieten würde.

Für Kopf- und Fußbereiche von sowohl ganzen Seiten als auch einzelnen <section>-und <article>-Elementen stehen <header> und <footer> bereit. Beide dürfen ihrerseits keine <header>- oder <footer>-Elemente enthalten, unterliegen aber sonst keinen Einschränkungen. Das <nav>-Element dient letztlich zur Auszeichnung von Navigationen. Es sollte nur auf wichtige Navigationsblöcke verwendet werden – nicht jeder kleine Link braucht ein eigenes <nav>.

Ein mit den neuen Elementen ausgezeichnetes Blog könnte wie folgt aussehen:

 <header>
    <h1>Das HTML5-Blog</h1>
    <nav>
        <a href="/">Startseite</a>
        <a href="/about.html">Über dieses Blog</a>
    </nav>
</header>

<section id="hauptspalte">

    <article>
        <h2>Ein toller Beitrag über HTML5!</h2>
        <p>Text Text Text</p>
        <aside class="metainformationen">
            <p>Geschrieben am 12.08.2010</p>
        </aside>
    </article>

    <article>
        <h2>Ein älterer Beitrag über HTML5!</h2>
        <p>Text Text Text</p>
        <aside class="metainformationen">
            <p>Geschrieben am 10.08.2010</p>
        </aside>
    </article>

</section> <!-- Ende der Hauptspalte -->

<aside id="sidebar">

    <h2>Sidebar</h2>

    <section>
        <h3>Tagcloud</h3>
        <p>Tags Tags Tags</p>
    </section>

    <section>
        <h3>Blogroll</h3>
        <p>Link Link Link</p>
    </section>

</aside> <!-- Ende der Sidebar -->

<footer>
    <p>© 2011 HTML5-Blog</p>
</footer>

Die neuen strukturierenden Elemente verhalten sich in (modernen) Browsern ähnlich wie <div>-Elemente. Sie haben auf den ersten Blick keine besonderen CSS-Eigenschaften und verhalten sich wie generische Block-Elemente. Tatsächlich haben aber einige der Neulinge (<section>, <article>, <aside>) große Auswirkungen auf die Überschriftenstruktur der Webseite und tun nebenbei noch etwas für die Barrierefreiheit.

ARIA inklusive

Die neuen strukturierenden Elemente haben eingebaute ARIA-Attribute. ARIA (Accessible Rich Internet Applications) ist eine Spezifikation der Web Accessibility Initiative des W3C, die neue HTML-Attribute für barrierefreie Webanwendungen festlegt. Mit ihnen lassen sich aus generischen HTML-Elementen zusammengebaute Widgets für Screnreader und andere Assistenztechnologien verarbeitbar gestalten. Ein Beispiel:

 <div id="fortschritt">
    <div id="anzeige">25%</div>
    <div style="width:25%;" id="abgespielt"></div>
</div>

Diese Konstruktion wird mit etwas CSS schnell zu einem sehr ansehnlichen Fortschrittsbalken – vorausgesetzt man hat zwei gesunde Augen. Screenreader würden hier nur einen Haufen unzusammenhängender <div>-Elemente zu sehen und entsprechend wäre der Nutzer des Screenreders aufgeschmissen. Aber ARIA hilft:

 <div id="fortschritt"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="25"
>
    <div id="anzeige">25%</div>
    <div style="width:25%;" id="abgespielt"></div>
</div>

Die wai-*- und role-Attribute machen es möglich, dass Assistenztechnologien wie Screenreader unser Widget nicht nur als Fortschrittsbalken erkennen, sondern sie geben auch gleich alle zur Interpretation der Anzeige nötigen Zahlen mit.

Eine genauere Einführung in WAI-ARIA würde an dieser Stelle den Rahmen sprengen; als empfehlenswerte Lektüre sei an dieser Stelle die deutschsprachige Einführung in WAI-ARIA verlinkt. Wichtig ist für uns, dass erstens HTML5 WAI-ARIA nahtlos integriert (man also die ARIA-Attribute nutzen kann ohne dass der HTML-Validator meckert) und dass zweitens viele Elemente in HTML5 eingebaute ARIA-Eigenschaften haben. So hat etwa das <nav>-Element immer das eingebaute role-Attribut navigation. Man muss es also dort nicht selbst eintragen und wenn man etwas anderes als navigation angeben würde, wäre es ein Fehler (und eigentlich ja auch recht widersinnig). Nur bei wenigen Elementen darf man das eingebaute role-Attribut überscheiben – so hat etwa das <article>-Element die vorgegebene Rolle article, darf jedoch alternativ auch die Rollen application, main oder document tragen.

Die komplette Liste der vorgegebenen ARIA-Attribute ist den HTML5-Spezfikationen zu entnehmen. Zu beachten ist, dass noch nicht alle Browser diesen ganzen Problemkomplex perfekt beherrschen – über die Einzelheiten gibt html5accessibility.com Auskunft.

Überschriften ohne Ende

Während man die HTML 4.01 und XHTML 1 durch die Elemente <h1> bis <h6> auf sechs Überschriften-Ebenen beschränkt ist, kann man in HTML5 unendlich viele Überschrift-Ebenen – und das obwohl man weiterhin nur die Elemente <h1>bis <h6> zur Verfügung hat. Wie das? Nehmen wir erst mal als Beispiel den folgenden HTML-Schnipsel:

 <h1>HTML5</h1>
<h2>Neue Elemente</h2>
<h3>Das Section-Element</h3>

Die so abgebildete Dokument-Struktur ist die Folgende:

 HTML5
    Neue Elemente
        Das Section-Element

Der Abschnitt “Neue Elemente” ist ein Unterabschnitt von “HTML5” und “Das Section-Element” ist ein Unterabschnitt von “Neue Elemente”. Würde man nun die neuen HTML5-Elemente zum Einsatz bringen um den Schnipsel strukturieren, würde das Ergebnis wie folgt aussehen:

 <h1>HTML5</h1>
<section>
    <h2>Neue Elemente</h2>
    <section>
        <h3>Das Section-Element</h3>
    </section>
<section>

Der Clou ist nun, dass auch dieses HTML die Struktur des Schnipsels korrekt abbilden würde:

 <h1>HTML5</h1>
<section>
    <h1>Neue Elemente</h1>
    <section>
        <h1>Das Section-Element</h1>
    </section>
<section>

Jedes Mal, wenn ein neues <section>-, <article>-, <aside>- oder <nav>-Element geöffnet wird, beginnt darin die Zählung der durch <h1> bis <h6> bezeichneten Überschrift-Ebenen von neuem, allerdings eine Hierarchieebene tiefer als in dem umgebenden Abschnitt. Moderne Browser wie der Internet Explorer 9 oder der Firefox 4 zeigen die so ermittelte Struktur auch optisch an. Obwohl in dem Dokument nur <h1>-Überschriften vorkommen, werden sie im folgenden Screenshot entsprechend ihrer Position in der Gesamtstruktur abgebildet, so dass die untergeordneten Überschriften das Aussehen von <h2> und <h3> annehmen:

Wenn in dem neu geöffneten Abschnitt keine <h1> vorhanden ist, beginnt die Zählung bei der höchstrangigen Überschrift die zu finden ist, so dass tatsächlich jeder der genannten Codeschnipsel gültiges HTML5 ist – allerdings ermöglicht nur das letzte Beispiel mit seinen <h1>-Überschriften und den verschachtelten <section>-Elementen die Verwendung unendlich vieler Überschrift-Ebenen. Zumindest ist das die Theorie. Noch unterstützen nicht alle Browser dieses HTML5-Feature und auch wie Suchmaschinen und Screenreader nach HTML5-Muster aufgebaute Dokumente verarbeiten, ist noch nicht umfassend erforscht. Vorsicht ist also geboten.

Alte Bekannte in neuen Rollen

Neben den neu eingeführten Elementen werde durch HTML5 einige alte Bekannte reaktiviert, die im Strict-Modus von HTML 4.01 und XHTML 1 eigentlich schon abgeschafft waren. So sind etwa <i>, <b> und <hr> in HTML5 wieder da, allerdings mit einer semantischen Bedeutung und nicht als reine Designelemente. Zwar werden sie im Browser noch immer dargestellt wie seit jeher, doch dieser Darstellung kann man bekanntlich mit CSS zu Leibe rücken. Was bleibt ist die neue semantische Bedeutung der ehemaligen Präsentationselemente. Einige Beispiele:

• Das <i>-Element dient der Auszeichnung von Textabschnitten, die vom Rest des Textes abgesetzt sind, die dabei keine besondere Gewichtung haben und deren übliche typographische Darstellung kursiver Text wäre (z.B. fremdsprachige Wörter oder Fachbegriffe)
• Das <b>-Element dient der Auszeichnung von Textabschnitten, die vom Rest des Textes abgesetzt sind, die dabei keine besondere Gewichtung haben und deren übliche typographische Darstellung fetter Text wäre (z.B. Produktnamen in einem Review)
• Das <hr>-Element dient der Kennzeichnung von thematischen Umbrüchen innerhalb eines Textes auf Absatzebene (z.B. ein Wechsel der Erzählperspektive in einer Geschichte)
• Das <s>-Element dient der Auszeichnung von Textpassagen, die als nicht (mehr) relevant, aber explizit noch Teil des Dokuments gekennzeichnet werden soll (z.B. eine durch einen Sonderpreis ersetzte Preisangabe in einem Webshop)

Die komplette Liste der auf diese Weise umdeklarierten Elemente würde zusammen mit den vielen Detailänderungen an anderen alten Bekannten den Rahmen dieses Artikels sprengen. Einen guten Überblick bietet HTML: The Markup Language Reference, eine zusammengestrichene Fassung der HTML5-Spezifikationen, die nur Informationen über neue und geänderte HTML-Elemente enthält – kryptische JavaScript-APIs bleiben außen vor.

Fazit

Die neuen (und alten, aber umdeklarierten) HTML5-Elemente kommen dem von Div-Suppen gestressten Webentwickler wie gerufen, aber es ist nicht alles Gold was glänzt. Ältere Browser, insbesondere die Internet Explorer 6 bis 8, sind auf die neuen semantischen Elemente nicht gut zu sprechen und wie Suchmaschinen eines Tages die Umstellung zur Auswertung von Überschriften nach HTML5-System managen werden, weiß auch noch niemand. Es ist also Vorsicht geboten und man sollte in jedem Fall sein HTML5-Markup gründlich testen. Und validieren sollte und kann man sein Werk auch – der gute alte HTML-Validator kann HTML5 genau so gut prüfen wie HTML 4.01 oder XHTML 1.

Über den Autor

Peter Kröner ist selbstständiger Webdesigner und -entwickler, Autor des HTML5-Buchs und Dozent für alle Fragen rund um HTML5 aus der Nähe von Osnabrück. Auf peterkroener.de bloggt er über alle Themen rund um Web(zukunfts)technologie.

Webentwickler aufgepasst!

Microsoft hat einen Wettbewerb für HTML5-Entwickler gestartet. Bei Interesse schaut einfach bei www.beautyoftheweb.com/#/unplugged vorbei.