HTML vs. HTML5. Was ist der große Unterschied? Wenn du in die Frontend-Entwicklung einsteigen oder mit Code in WordPress arbeiten möchtest, musst du den Unterschied kennen. Es kann besonders verwirrend sein, weil manche Leute die beiden Begriffe austauschbar verwenden, aber technisch gesehen sind es zwei verschiedene Dinge – obwohl sie auch miteinander verwandt sind.
Lass uns die Unterschiede zwischen HTML und HTML5 durchgehen, was besser ist und was sich mit dem größten Update der beliebten Markup-Sprache geändert hat.
Was ist HTML?
HTML steht für HyperText Markup Language. Es bildet die Bausteine des Webs und ist wahrscheinlich die bekannteste Programmiersprache, die es gibt.
HTML ist die Standardsprache, die für die Webentwicklung verwendet wird. Es erlaubt dir, die Grundstruktur einer Webseite mit Hilfe von kleinen Tags zu erstellen, die Markup Tags genannt werden. Um zum Beispiel einen Text kursiv zu setzen, kannst du ihn in HTML-Tags verpacken:
<i>Italicized text.</i>
Ein Großteil von HTML ist ähnlich einfach und für den Menschen lesbar, so dass auch Nicht-Entwickler es leicht finden, damit zu arbeiten. Wenn man bedenkt, wie wichtig es für das World Wide Web ist, ist der Einstieg in HTML erschreckend einfach.
Es ist unmöglich, eine Webseite zu erstellen, ohne HTML zu benutzen. Es gibt zwar Website-Builder, mit denen du eine Webseite erstellen kannst, ohne irgendeinen Code anzufassen, wie z.B. WordPress, aber sie arbeiten immer noch mit HTML-Code hinter den Kulissen.
Wenn du also ein Webentwickler werden oder tiefer in Tools wie WordPress eintauchen willst, musst du natürlich HTML lernen.
HTML wird oft mit anderen Sprachen wie CSS und JavaScript gepaart, um seine Funktionalität zu erweitern. CSS hilft dir, HTML zu stylen, indem du Farben, Layouts und mehr hinzufügst, während JavaScript eine traditionellere Programmiersprache ist, mit der du erweiterte Funktionen hinzufügen kannst.
Diese beiden Sprachen lassen sich zwar gut mit HTML kombinieren, sind aber nicht unbedingt notwendig, um eine Webseite zu erstellen. HTML ist auf jeden Fall notwendig, und deshalb ist es die wichtigste Websprache.
Was ist HTML5?
HTML5 ist kein eigenständiges System, sondern die neueste Version der HTML-Technologie. Sein Vorgänger, HTML4, hatte sein erstes und letztes Update im Dezember 1999. HTML5 selbst ist eigentlich nicht sehr neu, es wurde vor einigen Jahren im Jahr 2014 veröffentlicht.
Was ist also der große Unterschied? Warum der ganze Hype? Während viele der Markup-Tags unverändert geblieben sind (man sollte nicht reparieren, was nicht kaputt ist), wurden einige von ihnen vereinfacht, so dass es viel einfacher und schneller ist, Code zu schreiben. Es basiert auf einem völlig neuen Standard, und auch das Parsing ist komplett anders.
Im Gegensatz zu älteren HTML-Versionen, mit denen du hauptsächlich statische Webseiten erstellen konntest, die mit CSS und JavaScript aufgepeppt werden mussten, ist HTML5 viel dynamischer und beinhaltet Multimedia-Elemente. Es unterstützt nativ Video und Audio, und du kannst sogar Spiele oder Animationen damit erstellen.
Mit anderen Worten: HTML5 ist voll und ganz in der Lage, Dinge zu tun, die du früher mit alten Tools wie JavaScript, Flash oder Silverlight erledigen musstest. Das bedeutet, dass deine Webseite sicherer ist und weniger Angriffsfläche für Angreifer bietet, die versuchen einzudringen.
Und während CSS und JavaScript immer noch definitiv notwendig sind, um eine vollwertige Webseite zu erstellen, musst du dich nicht mehr auf sie verlassen, um überhaupt etwas Dynamisches zu machen.
HTML5 ist nicht mehr nur ein Website-Builder. Es ist ein kompletter Application Builder für sich selbst.
Anstatt dass das nächste Update als „HTML6“ herauskommt, wird HTML5 kontinuierlich als lebender Standard aktualisiert und entwickelt sich mit den Bedürfnissen des Webs. Es ist die neuste und beste Version dieser langlebigen Technologie, und es wird noch eine lange Zeit hier sein.
HTML vs. HTML5: Die Unterschiede abwägen
Wenn die meisten Leute über „HTML“ sprechen, meinen sie die Technologie als Ganzes, einschließlich ihrer neuesten Version: HTML5. Obwohl es in vielerlei Hinsicht anders ist, ist HTML5 eigentlich nur ein ausgefeiltes Update des alten Standards.
Während HTML und HTML5 Teil desselben Systems sind, brachte das große Update einige Verbesserungen für die alte Programmiersprache, die es noch effizienter machen. Hier sind nur ein paar Beispiele dafür, was hinzugefügt wurde.
Kompatibilität
Als HTML5 zum ersten Mal herauskam, war die Kompatibilität ein großes Problem und ein Hauptgrund, warum sich viele dafür entschieden, ihre Webseite noch nicht zu aktualisieren. Wenn der Browser nicht wusste, wie er ein HTML5-Tag parsen sollte, konnte es zu kaputten oder seltsam aussehenden Seiten führen.
Das Gegenteil ist der Fall: Webseiten, die in den alten HTML4-Standards geschrieben sind, werden in modernen Browsern oft kaputt gehen, da die Browser den Support für veraltete Funktionen längst eingestellt haben. Wenn du mit den meisten Browsern kompatibel bleiben willst, ist HTML5 der richtige Weg.
Während ältere Versionen von HTML in Browsern wie dem Internet Explorer gut funktionieren, werden diese veralteten Versionen von der Mehrheit der Nutzer nicht mehr unterstützt oder verwendet. Die meisten Leute werden keine Webseiten für solche alten Browser programmieren müssen, also gibt es keinen Grund, HTML4 zu verwenden.
Wie du hier sehen kannst, werden HTML5 und die meisten seiner Funktionen von allen modernen Browsern unterstützt. Die neuen Tags werden vollständig oder teilweise von allen Browsern außer dem Internet Explorer 6-8 und Firefox 2 unterstützt, die alle aus den frühen 2000er Jahren stammen und heute kaum noch genutzt werden.
Während alle modernen Browser HTML4 technisch unterstützen, ist der Support für veraltete Tags bestenfalls lückenhaft. Du solltest die Verwendung veralteter Standards vermeiden und zu HTML5 wechseln.
Multimedia Support
Eine der größten Neuerungen von HTML5 ist der Support für Multimedia-Elemente wie Audio, Video, Vektorgrafiken, Animationen und Spiele.
In den alten Tagen des Webs war es normalerweise notwendig, JavaScript, Flash oder eine andere Technologie zu verwenden, um eine einfache Animation auf deiner Webseite einzubinden. Jetzt kannst du es in HTML oder CSS machen, ohne dich für mögliche Exploits zu öffnen.
Bei Video und Audio ist das Einbetten eines Players so einfach wie das Einfügen eines einfachen Tags. Es gibt viele Konfigurationsmöglichkeiten, wie z.B. das Einschalten von Autoplay oder das Hinzufügen von Steuerelementen für den Player.
HTML5 unterstützt auch das Einbetten von SVG-Vektorgrafiken – Bilder, die sich ohne Verpixelung an jede Auflösung anpassen können. SVGs werden immer beliebter, um Grafiken online darzustellen, da sie sich gut dehnen lassen, um jede Bildschirmgröße auszufüllen.
Schließlich kannst du mit HTML5 auch vollwertige Videospiele erstellen, besonders wenn du es mit JavaScript kombinierst. Viele Tools zur Erstellung von Spielen lassen sich sogar auf HTML5 portieren und erlauben dir, das Ergebnis auf deiner Webseite einzubetten.
Dieser multimediale Support macht HTML5 zum idealen Kandidaten, um viele veraltete Technologien zu ersetzen, darunter Java Web Start, Silverlight und seit kurzem auch Flash. Fast alles, was du mit diesen Systemen machen kannst, kann in HTML5 einfacher und effizienter erledigt werden.
SGML
Die ursprüngliche HTML-Sprache (bis zur Version 4) basierte stark auf dem SGML-Standard oder Standard Generalized Markup Language.
Obwohl SGML dazu gedacht ist, Markup zu standardisieren, Verwirrung zu beseitigen und sowohl HTML als auch XML inspiriert hat, stammt es von einer Sprache ab, die in den 1960er Jahren entwickelt wurde. Es ist uralt und wurde daher nicht mit Blick auf moderne Webanwendungen entwickelt.
HTML5 hat sich dahingehend entwickelt, dass es nicht mehr SGML-konform ist; stattdessen parst es nach seinen eigenen Regeln. Während seine Ursprünge immer noch in SGML liegen und HTML5 nur eine Erweiterung der bestehenden Technologie ist, ist es nicht mehr konform mit diesen Standards.
Ein Ergebnis davon ist, dass die Fehlerbehandlung jetzt viel nachsichtiger ist. Ein kleiner Fehler führt nicht mehr zu einem eklatanten Problem für die Betrachter deiner Seite, oder zu einer Seite, die überhaupt nicht geladen wird.
Auch die Semantik, also die Tags, haben sich drastisch verbessert. Um deine Seite überhaupt zu strukturieren, mussten früher ständig <div>-Tags verwendet werden: <div id="header">, <div id="menu">, und <div class="post">.
In HTML5 würden diese klobigen Codes <header>, <nav> und <article> heißen. Diese Tags sind sowohl sauberer als auch responsiver.
Es wurden auch einige neue Tags eingeführt. Viele von ihnen wurden geschaffen, um die Divs und Frames zu ersetzen, die zuvor zur Strukturierung von Seiten verwendet wurden.
Viele der alten Markup-Tags wurden völlig unverändert übernommen, so dass HTML5 teilweise abwärtskompatibel zu älteren Versionen ist. Aber ein unangetastetes HTML4-Dokument wird mit den neuen Standards nicht mehr korrekt geparst.
Während es einige Unterschiede zwischen HTML und HTML5 gibt, sind die Änderungen generell zum Besseren und sollen die Auszeichnungssprache zugänglicher machen.
Bessere Performance und Mobile Support
Einer der größten Vorteile von HTML5 ist, dass es viel schneller und responsiver ist als frühere Versionen. In der Ära des ursprünglichen HTML war es noch nicht einmal ein Traum, mit anderen Geräten als Computern auf das Internet zuzugreifen; jetzt ist es von unseren Handys, Uhren und Fernsehern aus zugänglich, auch dank der Geschwindigkeit von HTML5.
Die neue Version brachte bessere Standards, um Webseiten auf kleineren, weniger leistungsfähigen Geräten flüssiger laufen zu lassen. Viele Performance-Probleme werden immer noch von dir und der Qualität deines Codes abhängen. Allerdings wurden mit dem HTML5-Update auch viele lose Enden auf der HTML-Seite verbunden.
Zum Beispiel unterstützt HTML5 Multi-Threading mit JavaScript Web Workern, was es dem Prozessor deines Geräts erlaubt, mehr seiner Leistung für die Ausführung von Skripten zu nutzen. Code, der früher eine Seite verlangsamte, läuft nun nahtlos.
Das Design von responsive Webseiten ist in HTML5 auch viel einfacher. Bei HTML4 wurden viele nicht responsive Elemente, wie z.B. divs, durch Struktur-Tags ersetzt, die auf mobilen Geräten besser funktionieren.
Frames wurden ebenfalls entfernt, da sie Probleme mit der Benutzerfreundlichkeit und Zugänglichkeit verursachten. Obwohl sie immer noch unterstützt werden, sind sie veraltet und sollten nicht mehr verwendet werden, es sei denn, du arbeitest mit veralteter Technologie.
Es gibt zwar keinen direkten HTML5-Ersatz für Frames, aber es wird empfohlen, CSS-Elemente wie Flexboxen oder Iframes (die in HTML5 noch unterstützt werden) zu verwenden, um die alte Funktionalität zu ersetzen.
Bessere Formular-Steuerelemente
Neue Steuerelemente für Formulare bedeuten eine neue Ebene der Kontrolle über deine Webseite. Auch wenn es wie ein kleines Feature aussieht, bedeutet es, dass du dich auf eine externe Technologie weniger verlassen musst, um ein funktionierendes Formular zu erstellen.
Ursprünglich unterstützte HTML nur die Eingabetypen Text, Passwort, Hidden, Checkbox/Radio und Dateiupload. Das reicht zwar aus, um ein einfaches Eingabeformular zu erstellen, aber es gibt jetzt so viel mehr, was du mit HTML5-Eingabetypen machen kannst.
Neu hinzugekommen sind E-Mail, Telefonnummer, URL, Suchfeld, Slider, numerische Eingaben, Datums- und Zeitauswahl und Farbauswahl.
Diese vielfältige Auswahl an Eingabetypen ermöglicht es dir, bessere Formulare zu erstellen, die mehr Inhaltstypen akzeptieren können, mit integrierter Validierung, um sicherzustellen, dass sie korrekt sind. Schau dir die vollständige Liste der HTML-Eingaben für weitere Informationen an.
Web-Speicher
Wenn es um Webspeicherung geht, unterstützen HTML4 und darunter im Wesentlichen Cookies und wenig anderes. Das Speichern von Informationen außer dem grundlegenden User Tracking in einem winzigen 4 Kilobyte großen Cookie war nahezu unmöglich.
Auf der anderen Seite kannst du mit lokalem Speicher je nach Browser 5-10 Megabyte an Daten speichern. Damit kannst du clientseitige Informationen über frühere Sitzungen, Offline-Zugangsdaten, persönliche Anpassungen und mehr speichern. Außerdem wird der lokale Speicher im Gegensatz zu Cookies nicht automatisch gelöscht.
Ein Beispiel dafür, was du mit lokalem Speicher machen kannst, ist, die Präferenz eines Nutzers für das helle oder dunkle Theme auf deiner Webseite zu speichern, um sicherzustellen, dass sie deine Webseite bei ihrem nächsten Besuch weiterhin so sehen, wie sie es bevorzugen. Zwar kannst du die Präferenzen der Nutzer auch mit Cookies speichern, aber der Browser wird sie nach einiger Zeit unweigerlich löschen.
HTML5 unterstützt die lokale Speicherung durch die Web Storage API. Außerdem unterstützt es Web SQL Datenbankspeicher, indexierte Datenbankspeicher und sogar Dateizugriff mit der File API. Viele davon lassen sich über APIs mit JavaScript integrieren. Davor war es entweder extrem umständlich zu machen oder in einigen Fällen einfach nicht möglich oder extrem umständlich zu machen.
Was ist besser: HTML oder HTML5?
Wenn du programmieren lernen willst, solltest du es auf jeden Fall vermeiden, veraltete Standards zu verwenden. HTML5 ist die neueste Version von HTML und sollte immer gegenüber älteren Versionen der Sprache bevorzugt werden.
Wie oben aufgeführt, verbessert HTML5 mehrere Aspekte von HTML4, die veraltet und schwierig zu bearbeiten waren. Außerdem kann HTML5 viele Dinge nativ erledigen, während HTML4 komplett auf längst veraltete Systeme wie Silverlight, Java Web Start und Flash angewiesen ist.
Während HTML5 auf super alten Browsern und Betriebssystemen (wie dem Internet Explorer oder alten Versionen von Mobiltelefonen) nicht immer richtig angezeigt wird, sind diese Plattformen extrem veraltet und werden kaum noch genutzt. Es gibt keine guten Gründe mehr, veraltete Versionen von HTML gegenüber modernen Standards zu verwenden.
Leider gibt es im Internet und in Büchern eine Menge Informationen über ältere Versionen von HTML. Wann immer du eine Anleitung nachschlägst oder aus einem Kurs oder Buch lernst, stelle sicher, dass es über HTML5 spricht und nach 2014 veröffentlicht oder aktualisiert wurde. Es hat keinen Sinn, veraltete Standards von 1999 zu lernen.
Wie man HTML zu HTML5 konvertiert
Wenn du eine ältere Webseite hast, musst du sie aktualisieren. Leider gibt es keine wirkliche Möglichkeit, eine vollständige Konvertierung ohne manuelle Arbeit durchzuführen.
Am besten liest du dir die HTML5-Spezifikation durch (oder nimmst einen HTML-Kurs, wenn du völlig neu in der Sprache bist) und machst dich mit den Änderungen vertraut. Danach kannst du den Code neu schreiben und die neuen Funktionen, die in HTML5 hinzugefügt wurden, hinzufügen.
Schau dir diesen Leitfaden zur Migration von HTML4 zu HTML5 an. Es behandelt ausführlich die manuellen Änderungen, die du am Code vornehmen musst.
Du könntest auch diesen XHTML zu HTML5 Konverter ausprobieren, aber stelle sicher, dass du deinen Code manuell überprüfst oder ihn in einen Validator einfügst, bevor du ihn auf deine Webseite importierst.
Glücklicherweise ist HTML5 größtenteils neuer Inhalt. Es gibt ein paar veraltete Tags, die du ersetzen musst, aber abgesehen davon ist die Aktualisierung des Codes normalerweise kein großes Unterfangen, es sei denn, deine Webseite verlässt sich stark auf veraltete Technologien wie Frames.
Zusammenfassung
HTML und HTML5 sind nur zwei Teile der gleichen Technologie, auch wenn sie leicht unterschiedliche Dinge bedeuten. HTML bezieht sich auf die Auszeichnungssprache als Ganzes, oft auf die neueste Version, während HTML5 das neueste Update davon ist.
Wenn du HTML lernen willst, ist es wichtig, die neueste Ausgabe zu verwenden: HTML5. Es ist in jeder Hinsicht besser, und auch wenn es bedeutet, dass man eine Menge alten Code manuell umwandeln muss, ist es die Mühe definitiv wert.
HTML5 ist nun schon einige Jahre alt, und als lebender Standard der Sprache als Ganzes, wird es nur weiter aktualisiert werden, um mit dem modernen Web zu arbeiten.
Schreibe einen Kommentar