Was ist der Hauptunterschied zwischen HTML 4 und HTML 5?


145

Was sind die Hauptunterschiede zwischen HTML4- und HTML5-Entwurf ?

Bitte bewahren Sie die Antworten zu geänderter Syntax und hinzugefügten / entfernten HTML-Elementen auf.

Antworten:


197

HTML5 hat mehrere Ziele, die es von HTML4 unterscheiden.

Konsistenz beim Umgang mit fehlerhaften Dokumenten

Die primäre ist die konsistente, definierte Fehlerbehandlung . Wie Sie wissen, unterstützt HTML absichtlich "Tag-Suppe" oder die Möglichkeit, fehlerhaften Code zu schreiben und ihn in ein gültiges Dokument korrigieren zu lassen. Das Problem ist, dass die Regeln dafür nirgendwo aufgeschrieben sind. Wenn ein neuer Browser-Anbieter in den Markt eintreten möchte, muss er nur fehlerhafte Dokumente in verschiedenen Browsern (insbesondere im Internet Explorer) testen und seine Fehlerbehandlung rückentwickeln. Wenn dies nicht der Fall ist, werden viele Seiten nicht korrekt angezeigt (Schätzungen zufolge sind ungefähr 90% der Seiten im Netz zumindest etwas fehlerhaft).

Daher versucht HTML5, diese Fehlerbehandlung zu erkennen und zu kodifizieren, damit alle Browserentwickler die Zeit und das Geld, die für die konsistente Anzeige erforderlich sind, standardisieren und erheblich reduzieren können. Auch in der Zukunft, nachdem HTML als Dokumentformat gestorben ist, möchten Historiker möglicherweise noch unsere Dokumente lesen, und ein vollständig definierter Parsing-Algorithmus wird dies erheblich unterstützen.

Bessere Webanwendungsfunktionen

Das sekundäre Ziel von HTML5 ist die Entwicklung der Fähigkeit des Browsers, eine Anwendungsplattform über HTML, CSS und Javascript zu sein. Viele Elemente wurden direkt in die Sprache aufgenommen , die derzeit (in HTML4) Flash oder JS-basierten Hacks, wie <canvas>, <video>und <audio>. Nützliche Dinge wie Local Storage (eine in js zugängliche, im Browser integrierte Schlüsselwertdatenbank zum Speichern von Informationen, die über das hinausgehen, was Cookies enthalten können), neue Eingabetypen wie das Datum, für das der Browser eine einfache Benutzeroberfläche verfügbar machen kann (damit wir Sie müssen nicht unsere js-basierten Kalender-Datumsauswahlprogramme verwenden. Die browsergestützte Formularvalidierung vereinfacht die Entwicklung von Webanwendungen für die Entwickler erheblich und beschleunigt sie für die Benutzer erheblich (da viele Dinge nativ unterstützt werden. anstatt über Javascript gehackt).

Verbesserte Elementsemantik

Es gibt viele andere kleinere Anstrengungen in HTML5 nehmen, wie zum Beispiel besser definierte semantische Rollen für bestehende Elemente ( <strong>und <em>jetzt eigentlich etwas anderes bedeuten, und sogar <b>und <i>haben vage Semantik , die gut funktionieren sollte , wenn ältere Dokumente Parsen) und das Hinzufügen neuer Elemente mit nützlichen Semantik - <article>, <section>, <header>, <aside>, und <nav>sollte die Mehrheit der ersetzen <div>s auf einer Webseite, so dass Ihre Seiten ein bisschen mehr semantisch, aber noch wichtiger ist , verwendet leichter zu lesen . Kein schmerzhaftes Scannen mehr, um zu sehen, was genau dieser Zufall </div>schließt - stattdessen haben Sie eine offensichtliche </header>oder </article>die Struktur Ihres Dokuments viel intuitiver.


14
Bitte markieren Sie die Tags und Sätze, indem Sie die Antwort bearbeiten. (Es ist nur ein Vorschlag, denn während ich dies las, machte es mich müde.)
Mohammad Faisal

44

Aus Wikipedia :

  • Neue Parsing-Regeln, die auf flexibles Parsen und Kompatibilität ausgerichtet sind
  • Neue Elemente - Abschnitt, Video, Fortschritt, Navigation, Anzeige, Zeit, beiseite, Leinwand
  • Neue Eingabeattribute - Datum und Uhrzeit, E-Mail, URL
  • Neue Attribute - Ping, Zeichensatz, Async
  • Globale Attribute (die für jedes Element angewendet werden können) - id, tabindex, repeat
  • Veraltete Elemente fallen gelassen - Mitte, Schriftart, Streik

12

Sie sollten die HTML5-Unterschiede zu HTML4: W3C Working Group Note 9 Dezember 2014 auf die vollständigen Unterschiede überprüfen . Es gibt viele neue Elemente und Elementattribute. Einige Elemente wurden entfernt und andere haben einen anderen semantischen Wert als zuvor.

Es sind auch APIs definiert, z. B. die Verwendung von Canvas, um die nächste Generation von Web-Apps zu erstellen und sicherzustellen, dass die Implementierungen standardisiert sind.


11

HTML5 führt eine Reihe von APIs ein, die beim Erstellen von Webanwendungen helfen. Diese können zusammen mit den neuen Elementen verwendet werden, die für Anwendungen eingeführt wurden:

  • Eine API zum Abspielen von Video und Audio, die mit den neuen Video- und Audioelementen verwendet werden kann.
  • Eine API, die Offline-Webanwendungen aktiviert.
  • Eine API, mit der sich eine Webanwendung für bestimmte Protokolle oder Medientypen registrieren kann.
  • Eine Bearbeitungs-API in Kombination mit einem neuen globalen contenteditableAttribut.
  • Eine Drag & Drop-API in Kombination mit einem draggableAttribut.
  • Eine API, die den Verlauf verfügbar macht und das Hinzufügen von Seiten ermöglicht, um zu verhindern, dass die Schaltfläche "Zurück" unterbrochen wird.

3

Diese Liste von HTML5-Elementen und -Attributen könnte Sie interessieren .

Bitte beachten Sie auch, dass es sich um "HTML 4" handelt, nicht um "HTML4". Für HTML 5 werden zwar beide Varianten verwendet, es gibt jedoch einen wichtigen Unterschied in der Bedeutung. HTML 5 bezieht sich auf den Namen der W3C-Spezifikation, während "HTML5" der Dokumenttyp dieser HTML-Dateien mit einem text/htmlMIME-Typ ist, der dieser Spezifikation folgt. Gleiches gilt für XHTML 5 vs. XHTML5.


1
Sie scheinen zu implizieren, dass XHTML 5 existiert, obwohl dies nicht der Fall ist. Die neueste W3C-Empfehlung von XHTML lautet 1.1, und 2.0 befindet sich in der Entwurfsphase.
David Rivers


2
@ David Rivers: XHTML 2 befindet sich übrigens nicht mehr im Entwurfsstadium. Es wurde zugunsten von HTML5 eingestellt .
Mathias Bynens

Vielen Dank. Ich habe das auch gerade entdeckt und kann nicht glauben, wie unkonventionell ich war. Es war ein hartes Jahr!
David Rivers


0

HTML 5 lädt Sie ein, Ihrem Code viel semantischen Wert zu verleihen. Darüber hinaus gibt es native Lösungen zum Einbetten von Multimedia-Inhalten.

Der Rest ist wichtig, aber es ist mehr technischer Zucker, der Sie davon abhält, dasselbe mit einer Client-Programmiersprache zu tun.


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.