HTML5: Quick Reference Guide
Die wichtigsten Tags auf einen Blick: In unserem praktischen "Cheat Sheet"-Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte auf HTML5.

Macht es Sinn, eine Website auf HTML5 umzustellen, obwohl der Zeitpunkt, zu dem diese Auszeichnungssprache der allgemeingültige Standard sein wird, noch in weiter Ferne liegt? Schließlich bedeutet das Upgrade je nach Größenordnung des Projektes eine Menge Arbeit, da abgesehen v...
Macht es Sinn, eine Website auf HTML5 umzustellen, obwohl der Zeitpunkt, zu dem diese Auszeichnungssprache der allgemeingültige Standard sein wird, noch in weiter Ferne liegt? Schließlich bedeutet das Upgrade je nach Größenordnung des Projektes eine Menge Arbeit, da abgesehen vom Design der gesamte Quellcode neu entwickelt werden muss. Anschließend ist man wahrscheinlich ebenso lange mit Debugging beschäftigt und weiß noch gar nicht, wie sich die Änderungen dann auf das Suchmaschinenranking auswirken.
Wir finden: Ja, es macht Sinn. Denn auch wenn HTML5 überall als heißes Zukunftsthema gehandelt und eher die theoretischen Möglichkeiten online im Gespräch sind - kein noch so informativer Artikel kann eigene praktische Erfahrungen ersetzen. HTML5 kommt in jedem Fall. Warum also mit dem Erarbeiten von erfolgreichen Vorgehensweisen bis 2014 oder später warten, wenn bereits absehbar ist, dass diese Syntax der Standard werden wird?
Was bleibt und was wird anders?
Die Syntax von HTML5 ähnelt der von HTML 4.01 sehr und unterliegt nicht so strikten Regeln wie XHTML, sondern führt diverse neue Tags ein, die zur Verbesserung der Semantik gedacht sind. Hier soll die allgemeine Verständlichkeit optimiert werden. Die Elemente section, nav, article, aside, hgroup, header und footer sollen Ihnen eine bessere Strukturierung ermöglichen.
Für den menschlichen Besucher einer Website ist es zwar bedeutungslos, ob ein Navigationselement von <div> umrandet wird oder wie unter HTML5 von <nav>, doch kann man bereits an diesem bewusst schlicht gewählten Beispiel verdeutlichen, wie viel eindeutiger die Erfassung durch Suchmaschinen möglich sein wird - und SEO ist und bleibt nun mal für jede erfolgsorientierte Website ein wichtiges Thema.
Praxis: Die besten Tipps zu mobilem HTML5
HTML5 wird parallel vom WHATWG-Gremium und der W3C-HTML-Arbeitsgruppe entwickelt. Die Semantik von HTML5 kann in totalem Widerspruch zu der von HTML 4.01 gewohnten stehen, bei der beispielsweise <h1> grundsätzlich die wichtigste aller Überschriften kennzeichnet, während in HTML5 jede "section" eine mit <h1> ausgezeichnete Überschrift beinhalten kann.
Eigentlich ganz einfach, aber ...
Der Doctype ist sehr abgespeckt und schnell fällt ins Auge: Eigentlich sieht HTML5 so aus wie eine valide XHTML-Seite. Doctype austauschen und auf center, font, strike, noframes und so weiter verzichten, schon hat man eine HTML5-Seite, die in den meisten Browsern keine Probleme erzeugt - aber eben auch keine besonderen Highlights, denn es sind ja vor allem die Spezialeffekte durch neue Attribute und Elemente, die HTML5 so spannend machen.

Mit Unterstützung durch HTML5 lassen sich multimediale Inhalte (Audio, Video, Grafik und vieles mehr) direkt im Browser anzeigen, ohne ergänzende Technologien durch Plug-ins wie Flash, Java, Quicktime und Co. einzusetzen. Das größte Problem dabei ist, dass heute noch nicht sämtliche Browser alles können: Auf HTML5 umstellen, kann leider auch bedeuten, dass einige der schönen neuen Features noch lange nicht auf allen Plattformen fehlerfrei oder überhaupt angezeigt werden. Im besten Fall wird dann gar nichts angezeigt, im schlimmsten wimmelt es von Fehlern - ein Test mit browsershots.org oder einem anderen Prüfdienst ist also unerlässlich.
Ratgeber: So nutzen Sie HTML5-Videos richtig
Über den Twitter-Feed der WHATWG können Sie sich über die aktuellsten HTML5-Entwicklungen auf dem Laufenden halten - die Developer-Dokumentation wird akribisch und konsequent aktualisiert.
Fu?r Ihre tägliche Arbeit
Cheat Sheets oder Quick Reference Guides sind ein bewährtes Arbeitsmittel für Webworker, weil sie alle wesentlichen Informationen auf einer einzigen Seite vereinen und für die Grundlagen und andere Infos das umständliche Nachschlagen in Wikis und Handbüchern sparen. Unser Cheat Sheet ist naturgemäß statisch, hält daher die wesentlichsten Grundlagen und Tags für Sie fest. Wir haben uns auf die wichtigsten Tags beschränkt und Basics, etwa für Tabellen und Fettdruck, wegfallen lassen. Über Ihr Feedback freuen wir uns, damit die nächsten Cheat Sheets noch besser werden.
HTML5 wird vermutlich nur HTML heißen
Unsere zweiseitige Arbeitshilfe hat einen winzigen Schönheitsfehler: HTML5 als in Entwicklung befindliche Auszeichnungssprache wird es unter diesem Namen vielleicht gar nicht geben. Denn anders als beim World Wide Web Consortium hat man bei der WHATWG festgelegt, dass die immer weiter fortgeführte Evolution eines Webstandards wie in diesem Fall bei HTML5 eben nicht durchnummeriert werden sollte wie eine von vielen Entwicklungsstufen, sondern das angestrebte Ergebnis besser einfach nur HTML heißen sollte, ohne die 5.
Das mag zwar eine sehr logische Namensvergabe sein, macht es aber nicht unbedingt übersichtlicher, das heranwachsende HTML mit den bestehenden HTML-Standards zu vergleichen. Kein Wunder also, dass man im Web grundsätzlich weiter von HTML5 spricht und damit aber wiederum teilweise sehr großzügig diverse technologische Entwicklungen und Dienste zusammenfasst.
Um Missverständnisse zu vermeiden: Unser Cheat Sheet beschäftigt sich ausdrücklich nur mit der Auszeichnungssprache als offiziellem Nachfolger von HTML 4 und nennt den sich noch immer in den Kinderschuhen befindlichen nächsten Standard durchgehend HTML5.
Gutscheine
-
Lieferando
12€ für die App mit dem Lieferando Gutschein Zum Gutschein
bis 30.06.2025+ bis zu 2,0% Cashback -
ALPS RESORTS
5% Ermäßigung auf Reservierung mit ALPS RESORTS Gutscheincode Zum Gutschein
bis 15.06.2025+ bis zu 3,0% Cashback -
Hello Fresh
HelloFresh Code für Thermomix®: Sichere dir bis zu 38% Preisnachlass auf 8 Kochboxen Zum Gutschein
bis 31.08.2025+ bis zu 4,00€ Cashback -
FACTOR
FACTOR Gutschein: Spare bis zu 30% auf deine ersten fünf Boxen Zum Gutschein
bis 31.12.2025+ bis zu 4,50€ Cashback -
BOGNER
Versandkostenfrei im Mai bei BOGNER – keine Mindestbestellmenge! Zum Gutschein
bis 31.05.2025+ bis zu 8,0% Cashback(statt40,0€) -
Uber Eats
30€ Uber Eats Rabatt Code für deine Essensbestellung sparen Zum Gutschein
bis 31.05.2025+ bis zu 4,00€ Cashback(statt2,50€)