Ratgeber: "HTML5"

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.

HTML5: Quick Reference Guide

© Archiv

Ratgeber: "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 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.

internet, webdesign, cheat sheet, Quick Reference Guide, tags, html5

© Internet Magazin

Unter www.inmotionhosting.com/infographics/_img/html5_cheat_sheet_browser_support.png finden Sie ein Cheat Sheet für den Browsersupport von Inmotionhosting.

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.

Fü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.

Download: Tabelle

Download: Tabelle

Mehr zum Thema

Dolphin, Chrome, Firefox & Co.: Wir haben aktuelle Smartphone-Browser im Test.
Bester Browser für Android & iOS

Wir haben die die Browser Dolphin, Chrome, Firefox, Opera mini und Skyfire im Test. Welcher ist am besten für Galaxy S4, iPhone 5s, iPad Air &…
gesetze
Vorsicht Abmahnungen

Man sieht einen lustigen Film im Netz, will ihn Freunden zeigen und klickt auf "Teilen". Doch aufgepasst: Nicht immer ist das erlaubt.…
Weblog
Blog selbst erstellen

Wir zeigen, wie Sie gratis Ihren eigenen Blog selbst erstellen. Zum Starten brauchen Sie mit WordPress nicht einmal fünf Minuten.
Den Internetanbieter zu wechseln bringt oft Probleme und Ärger
DSL, Telefon und Co.

DSL, Telefon & Co: Wenn Kunden ihre Telefon-und Internetanbieter wechseln, gibt es oft Probleme. Wir erklären, wie Sie Ärger vermeiden.