Von W3C, CC BY 3.0
Web, Entwicklung

3 spannende Neuerungen in HTML5

Michael Jaros

Die Hypertext Markup Language (HTML) beschreibt im World Wide Web Struktur und Inhalt von Dokumenten. Das 1994 veröffentlichte HTML4 kann aber mit den Anforderungen eines modernen Web nicht mehr mithalten. So legte das W3C 2014 die neue Spezifikation HTML5 vor. In diesem Artikel stellen wir Ihnen 3 Bereiche der Sprache vor, in denen sich besonders viel getan hat.

Die Hypertext Markup Language (HTML) beschreibt im World Wide Web Struktur und Inhalt von Dokumenten. Das 1994 veröffentlichte HTML4 kann aber mit den Anforderungen eines modernen Web nicht mehr mithalten. So legte das W3C 2014 die neue Spezifikation HTML5 vor. In diesem Artikel stellen wir Ihnen 3 Bereiche der Sprache vor, in denen sich besonders viel getan hat.

Zeitalter der Maschinen

Mit den neuen Blockelementen <main>, <article> und <section> können Sie Inhalte semantisch strukturieren, was zunächst vor allem für Computerprogramme wie Suchmaschinen oder Screenreader, aber damit natürlich wieder für Ihre Besucher das Leben leichter macht. <nav> und <aside> kennzeichnen spezielle Seitenbereiche. Das gute alte <div> gibt es nach wie vor, und im Zweifel sollten Sie lieber dieses und nicht ein falsches Element verwenden. <header> (das Sie nicht mit den Headings (<h1> - <h6>) verwechseln sollten) und <footer> kennzeichnen Kopf und Fuß  von anderen Blöcken.

Im Gegensatz zu den Headings wirken sich mit HTML5 auch die Elemente <section>, <article>, <nav> und <aside> auf den Dokument-Outline, also die Dokumentenstruktur aus (d.h. sie sind sogenannter sectioning content). Der Outline ist derzeit in Browsern noch kaum berücksichtigt, wird aber vermutlich in naher Zukunft wichtig werden. Den Outline Ihrer Website können Sie mit dem Outliner betrachten.

 

<body>
    <div>
        <header>
            <h1>Seitenüberschrift</h1>
            <nav>
                <h1>Navigation</h1>
            </nav>
        </header>
        <main>
            <section><h2>Section 1</h2></section>
            <section><h2>Section 2</h2></section>
        </main>
    </div>
</body>

Hören, Sehen, Fühlen

Die 2020 endgültig auslaufende Technologie Adobe Flash (früher: Macromedia Flash) war zuletzt hautsächlich durch ihre ständigen Sicherheitslücken bekannt. Mit den neuen <audio> und <video> Elementen ist es ein leichtes, multimediale Inhalte ohne externe Plug-Ins relativ nahtlos in Webseiten einzubetten. Einziger Wermutstropfen: Auf den einen, wirklich überall unterstützten Codec konnten sich die großen Hersteller leider nicht einigen. Lesen Sie diese Empfehlung im Mozilla Developer Network für einen Ausweg. Die neue <canvas> schließlich ermöglicht Ihnen hardwarebeschleunigte Grafikausgabe mit Farbkorrektur direkt im Browser, die Sie sogar in eine Datei serialisieren können.

Sind Sie in Form?

Auch bei den Formularen hat sich einiges getan. Zunächst einmal können Sie Eingaben nun bereits im Browser validieren lassen, ohne dafür Code zu schreiben. Die einfachste Form ist das required-Attribut, das Sie auf jedem <input>-Element platzieren können. Länge und Inhalt von Texteingaben können Sie mit minlength und maxlength, min und max, step und schließlich pattern einschränken, sodass der Browser nicht entsprechende Eingaben gar nicht erst übermittelt und automatisch eine passende Meldung anzeigt. Achtung: Clientseitige Validierung verbessert zwar die Usability, aber die Sicherheit verlangt trotzdem immer auch eine serverseitige Validierung.

Zusätzliche Typen von Eingabefeldern wie date, email oder color bieten nicht nur die jeweils passende Validierung, sondern versprechen auch eine passende Darstellung ohne Verwendung von JavaScript-Code. Leider werden viele dieser Typen nach wie vor nicht in allen Browsern unterstützt. Das placeholder-Attribut schließlich sorgt statt <label> für „fancy“ minimalistische Formulare. <label> dennoch zu verwenden wird aus Gründen der Zugänglichkeit empfohlen.

Viel Erfolg!

Abschließend noch ein Tipp: HTML5 bietet viele neue Möglichkeiten, aber nicht alle sind auf jeder Plattform verfügbar: Prüfen Sie daher unbedingt, wie es mit der tatsächlichen Unterstützung aussieht. Einen guten Überblick gibt CanIUse. Und nicht erst seit HTML5 gilt: Testen mit den gängigsten Browsern und Geräten ist Pflicht.

Artikelbild: Von W3C, CC BY 3.0, Link