Leitfaden für Umsteiger auf HTML5
HTML5 ist seit Oktober 2014 offizieller Standard für Webseiten. Doch wie gross ist der Aufwand, seine «alte» Website auf den neusten Stand zu bringen?
Was Sie als Website-Betreiber beim Umstieg auf HTML5 beachten sollten und zu tun haben.
Seit Oktober 2014 ist es soweit: HTML5 ist der neue offizielle Standard für Webseiten. Fast 15 Jahre hat es gedauert, bis die beiden vorhergehenden Standards HTML 4.01 (vom Dezember 1999) und XHTML 1.1 (vom Mai 2001) abgelöst werden konnten.
Als angehender Web-Entwickler lernt man z.B. in einem Web Developer Basic (HTML, CSS, JavaScript) (WDB)-Kurs schon seit Jahren das neue HTML5 und die technischen Unterschiede lassen sich für HTML-Kenner gut in einem Tag updaten.
Doch was ändert sich für Website-Betreiber, die von HTML-Code, CSS-Anweisungen und JavaScript-Blöcken nichts verstehen und von fleissigen Agenturen belagert werden, man brauche eine neue Website? Was gilt es zu beachten und zu tun?
HTML5 ist nicht (nur) eine neue Version, sondern ein neues Konzept
Wie ich in einem anderen Blogbeitrag bereits erwähnt habe, braucht man von einem bestehenden Webauftritt nicht alles wegzuwerfen und neu zu erstellen, wenn man eine HTML5-konforme Website will. Das hat viel damit zu tun, dass HTML5 nicht (nur) eine neue Version von HTML ist, sondern ein neues Konzept darstellt. Wer genau liest, sieht das auch in der Schreibweise: Wo bei «HTML 4» ein Abstand zwischen «HTML» und der 4 ist, fehlt dieser bei «HTML5».
Doch was heisst das konkret?
Nun, früher war es so, dass HTML 4 von A bis Z definiert werden konnte. D.h. man konnte wunderbar ein Buch schreiben und zwischen den beiden Buchdeckeln alles ablegen, was es zu HTML 4 zu sagen gab. Wer dann seinen Code vom HTML-Validator unter http://validator.w3.org überprüfen liess, bekam kurze und knappe Hinweise darauf, wo was falsch gemacht wurde. Z.B. dass man ein sogenanntes Attribut namens «HEIGHT» (für eine Höhenangabe) verwendet hat, das es zwischen den «Buchdeckeln» gar nicht gibt.
Im Prizinp so, wie wenn mir der Deutschlehrer sagen würde, dass ich in meinem Aufsatz ein Wort verwendet habe, dass es im Duden gar nicht gibt – wie es meine Töchter manchmal tun und «gumpen» statt «springen» schreiben.
HTML5 ist jetzt eher wie Wikipedia zu verstehen und nicht wie der Brockhaus. Der Brockhaus hat nämlich zwei Buchdeckel – bzw. zwei pro Band. Wikipedia hingegen ist offen für Neues und genauso auch HTML5. Eine Fehlermeldung wie «der Befehl XY existiert nicht» kommt deshalb etwas «freundlicher», mehr als eine Art Hinweis, daher.
Die Formulierung «in this context» lässt mich als Hobby-Theologen an alttestamentarische Zeiten denken, wo es hiess «du sollst nicht …» im Vergleich zu heute, wo (zum Glück) vermehrt der Kontext einbezogen wird, statt mit Pauschalverurteilungen um sich zu werfen. Aber das hat wohl in einem anderen Blog besser Platz.
Was bedeutet das für eine bestehende Website?
Drei Überlegungen bzw. Vorschläge sollen helfen, den Umbau-Aufwand abzuschätzen.
1. Der (ganz einfache) Anfang
Als Erstes sollte überprüft werden, ob der bestehende Website-Code eventuell schon mit HTML5 kompatibel ist.
Dazu kopiert man den aktuellen HTML-Code einer der Seiten (alle zu testen würde wohl den Rahmen sprengen) in die Zwischenablage:
- Öffnen Sie eine Webseite im Browser
- Klicken Sie mit der rechten Maustaste in die Seite hinein und wählen Sie «Seitenquelltext anzeigen» (Chrome und Firefox) bzw. «Quellcode anzeigen» (IE)
- Den angezeigten Code kopieren Sie in die Zwischenablage und fügen ihn unter http://validator.w3.org > «Validate by direct input» (oder direkt http://validator.w3.org/#validate_by_input) ein:
- Bevor Sie auf «Check» klicken, ändern Sie die erste Zeile des Codes …
… ab auf: <!DOCTYPE html>
Wenn Sie jetzt auf «Check» klicken und es erscheint die Meldung, dass keine Fehler gefunden wurden, kann Ihr bestehendes HTML mit der Änderung einer einzigen Zeile in HTML5 konvertiert werden. Das sollte – auch wenn etwas an einem CMS-Template gemacht werden muss – nicht länger als eine Stunde in Anspruch nehmen. Herzlichen Glückwunsch!
Sollte der Check aber Fehler liefern, gilt es, weiterzulesen.
Fehler sind nicht gleich Fehler
Werden Fehler gefunden, gibt es grundsätzlich drei Szenarien:
- Ihr HTML-Code verwendet Befehle, für die es in HTML5 valide Alternativen gibt. Sprechen Sie mit Ihrem Web-Entwickler, er sollte diese Alternativen kennen … Oder besuchen Sie einen HTML5-Update-Kurs (HT5). 🙂
- Die Fehler sind mit gutem Grund eingebaut. Beispielsweise, um die Kompatibilität mit älteren Browsern zu gewährleisten. Ihr Webdesigner wird Ihnen entspannt und kompetent erklären, warum die Fehler eingebaut wurden.
- Der Code ist schlicht und ergreifend fehlerhaft und Ihr «alter» HTML-Code hatte diese Fehler schon drin. Sie sollten mal ein ernstes Gespräch mit Ihrem Webdesigner führen und sich – vor allem, wenn er nervös wird – nicht schnell schnell mit fadenscheinigen Begründungen abwimmeln lassen. Lesen Sie vorher meinen Blog-Eintrag zu validem HTML, damit Sie gewappnet sind.
HTML5 bringt neue Möglichkeiten
Ist Ihr Code fehlerfrei oder lassen sich die Fehler begründen, können Sie sich gerne mit den neuen Features von HTML5 vertraut machen und sich überlegen, ob diese für Ihren Webauftritt etwas bringen.
Hier einige der HTML5-Features, die interessant sein könnten, und weiterführende Links dazu:
- Einfaches und unkompliziertes Einbinden von Audio- und Video-Dateien
- Verbesserung der semantischen Auszeichnung (=Bedeutung) von Inhalts-Elementen, was z.B. für Suchmaschinen-Optimierungen interessant sein kann
- Möglichkeit der HTML-Aufbereitung mittels Mikrodaten (beispielsweise für Rich-Snippets)
- Vereinfachung und Verbesserung der Entwicklung von mobile-fahigen Websites dank neuer Befehle und Attribute
- Neue Formularelemente für ein verbessertes Benutzererlebnis
Wenn Sie sich kurz und schmerzlos einen Überblick – auch als Nicht-Code-Schreibender – verschaffen wollen, empfehle ich Ihnen den HTML5-Update-Kurs HT5.
Muss ich etwas tun oder kann ich meine Seiten auch so lassen, wie sie sind?
Nun, diese Frage müssen Sie selbst beantworten. Selbstverständlich können Sie auch alles einfach so lassen, wie es ist. Die Besucher Ihrer Website werden den Unterschied in 80% der Fälle sowieso nicht bewusst bemerken. Ein Umstieg auf HTML5 ins Auge zu fassen, lohnt sich aber, wenn Sie eine der folgenden Fragen mit «ja» beantworten können:
- Sind Sie unzufrieden mit der Auffindbarkeit Ihrer Webseiten in Suchmaschinen?
- Soll Ihre Website etwas können/anbieten, was sie noch nicht tut? Z.B. Videos anzeigen.
- Funktionieren einige Bestandteile Ihrer Website auf mobilen Geräten nur umständlich oder nicht zufriedenstellend?
Sollten Sie eine neue Website aufbauen oder einen Relaunch einer bestehenden planen, gilt auf jeden Fall: Die neue Website sollte in HTML5 erstellt werden.
Fazit
Sie können in HTML 4 bzw XHTML erstellte Seiten relativ einfach und schnell HTML5-konform machen. Dazu ist kein kompletter Umbau oder eine Neuerstellung nötig. Wenn Sie aber Verbesserungen in puncto Suchmaschinenoptimierung und/oder neue Features auf Ihrer Website wünschen, sollten Sie sich etwas tiefer mit den oben verlinkten Themen beschäftigen oder sich kompetent beraten lassen.