Der HTML5-Standard wurde im Jahr 2014 fertiggestellt und veröffentlicht. Genau so hätte HTML aussehen sollen, als die erste Version vor all den Jahren veröffentlicht wurde. HTML 2.0 war der erste echte "Standard", der bereits 1995 veröffentlicht wurde. Zwei Jahre später wurde HTML 3 veröffentlicht. Weitere zwei Jahre später wurde HTML 4.01 eingeführt und ist seitdem das Arbeitspferd des Internets.
Der erste "Arbeitsentwurf" von HTML5 wurde bereits 2008 eingeführt, mit einer damals überraschend breiten Browserunterstützung. Das HTML5, das wir heute kennen, unterscheidet sich stark von dem HTML der Vergangenheit, und hier werden wir diskutieren, was der neueste Standard mit seiner Veröffentlichung geändert hat. Seit dem Start von HTML5 wurde es allgemein akzeptiert und alle Funktionen und Fähigkeiten werden jetzt von allen gängigen Browsern unterstützt. Hier und da gibt es immer noch ein paar Probleme, aber insgesamt hat sich HTML5 gut in die moderne Online-Erfahrung eingepasst.
Als Webentwickler können Sie entweder ein alter Profi sein, der die älteren Standards beherrscht, oder ein Neuling, der neugierig die Entwicklung neuer Standards am Rande beobachtet. In jedem Fall müssen Sie irgendwann mit dem Übergang zu HTML5 beginnen.
HTML Vs HTML5 Infografik
Der erste Schritt zum Umstieg auf HTML5 oder Lernen besteht darin, den Unterschied zwischen dem älteren und dem neuesten Standard zu verstehen. Hier sind einige wichtige Unterschiede zwischen HTML und HTML5:
-
HTML5 ist eine lebendige Sprache
HTML5 ist eine lebendige Sprache, ein Work in Progress. Es ist erstaunlich zu sehen, was HTML5 kann, aber es ist auch wichtig zu wissen, dass HTML5 keine vollständig standardisierte Version wie HTML4 ist, die älter als zehn Jahre ist und einen festen Standard darstellt, der nicht geändert werden kann.
Wenn Sie in HTML5 einsteigen, müssen Sie einige Aktualisierungen vornehmen. Attribute und Elemente werden jedes Jahr hinzugefügt und regelmäßig geändert. Dies hängt auch davon ab, wie oft Sie Rich-Elemente verwenden. Dies ist jedoch definitiv eines der Risiken, die mit der Verwendung einer flüssigen, sich ändernden Sprache wie HTML5 verbunden sind.
-
HTML5 ist einfacher
HTML5 birgt zwar Risiken wie ständige Aktualisierungen, es ist jedoch aufgrund der im Vergleich zu HTML4 einfacheren Syntax im Allgemeinen einfach, mit den Änderungen und Aktualisierungen Schritt zu halten. Beispielsweise haben Sie am Anfang der Seite eine sehr einfache Deklaration, um sie als HTML5-Seite festzulegen:
Die einfache Doctype-Deklaration ist eine der Vereinfachungen in der HTML-Syntax, die mit allen Versionen von HTML4 und bis hin zu XHTML1 kompatibel ist. HTML5 ist jedoch nicht mit SGML kompatibel.
Empfohlene Kurse
- Kostenloses Python-Programmiertraining
- Zertifizierungskurs für das Testen freier Software
- Kostenlose Java-Programmierkurse
- Schließe den PERL-Kurs ab
-
Das neue Element
HTML5 enthält eine Reihe neuer Elemente und beseitigt einige andere (die wir in Kürze behandeln werden). Eines der wichtigsten zusätzlichen Elemente ist jedoch, das die Verwendung von Adobe Flash in Websites erheblich beeinflusst hat. Obwohl Flash immer noch von mehreren Websites verwendet wird, wurde HTML5 von vielen übernommen, und viele Leute glauben, dass es Flash irgendwann überflüssig machen wird. Nur die Zeit wird das entscheiden. Bis dahin hat sich das Kaskadenelement von HTML5 als gute Alternative zu Flash erwiesen.
Das Element kann verwendet werden, um Grafiken mit verschiedenen Formen und Farben per Skript zu zeichnen, normalerweise JavaScript. Das Element ist einfach ein Container für die Grafiken. Sie müssen ein Skript verwenden, um die Grafiken zu definieren. Standardmäßig ist eine Zeichenfläche ein rechteckiger Bereich ohne Inhalt oder Rahmen. Der Markt sieht so aus:
Es ist wichtig, ein ID-Attribut sowie Breite und Höhe für die Definition der Leinwandgröße anzugeben. Sie können ein Stilattribut hinzufügen, um Rahmen zu definieren.
Sie können auch JavaScript verwenden, wie im folgenden Beispiel dargestellt:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
Das Neue und die Elemente
Eine weitere große Erweiterung von HTML5 sind die Elemente new und, die auf eine neue Web-Anatomie hinweisen. Mit diesen neuen Tags müssen die beiden Elemente nicht mehr mit einem Tag identifiziert werden.
Die Spezifikationen definieren das Header-Element als eine Gruppe von Navigations- oder Einführungshilfen. Als solches kann das Element verwendet werden, um eine Einführung in einen Abschnitt einer Seite oder auf die gesamte Seite selbst zu definieren. Hier ist ein Code-Snippet, das das Header-Element verwendet.
Titel
Nach Autor Gespeichert in Web 2.0
Textkörper
Die HTML5-Spezifikationen beziehen sich auf das foot-Element als "Fußzeile für den nächsten Vorgänger" und enthalten im Allgemeinen Informationen zu diesem Abschnitt, z. B. den Namen des Autors, Copyright-Daten, Links zu Dokumenten usw.
Die Fußzeile befindet sich logischerweise am unteren Rand der Webseite. Es kann aber auch am Ende eines Seitenabschnitts stehen. Hier ist ein Beispiel für eine Codierung, bei der das Footer-Element verwendet wird:
Inhaltstitel
Nach Autor Gespeichert in Web 2.0
Textkörper.
Tags: Eingabeaufforderung, Kompass, CSS, Sass, Terminal
10 Likes
Hier enthält die Fußzeile Post-Tags und den Beitrag "Facebook-Likes".
-
Die und Elemente
Wenn Sie nun die obigen Beispiele durchgesehen hätten, wären Ihnen einige weitere neue Elemente aufgefallen, wie z. Mit diesem Element können Sie zusammen mit dem Element bestimmte Bereiche Ihres Layouts markieren, was für die Suchmaschinenoptimierung von großem Vorteil ist. Das Artikelelement wird als eigenständige Komponente einer Webseite angegeben, die unabhängig wiederverwendbar oder verteilbar ist. Dies kann eine Zeitung, ein Forumbeitrag, ein Zeitschriftenartikel, ein Blogeintrag oder etwas anderes sein.
Das article-Element hat im Allgemeinen eine eigene Überschrift in einem Header-Element und möglicherweise sogar eine Fußzeile, wie Sie im obigen Beispiel gesehen haben. Sie können sich das Element einfach als Blogeintrag oder eigenständigen Inhalt vorstellen. Der knifflige Teil ist zu identifizieren, was unabhängig ist. Einfach gesagt, ein eigenständiger Inhalt ist einer, der für sich allein Sinn macht.
Eine gute Möglichkeit, festzustellen, ob ein Inhalt unabhängig ist, besteht darin, zu fragen, ob er in einem RSS-Feed sinnvoll ist. Blog-Artikel und statische Seiten sind sinnvoll, und einige Websites verfügen über Kommentar-Feeds. Ein Absatz im Artikel würde jedoch keinen Sinn haben, der vom Rest des Inhalts getrennt wäre. Hier ist ein Code-Snippet mit Fußzeile und Veröffentlichungs-Tags.
Inhaltstitel
Veröffentlicht: 24.02.2016
Textkörper
Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen
Das Abschnittselement gemäß den W3C-Spezifikationen, das einen „generischen Abschnitt“ einer Anwendung oder eines Dokuments darstellt. Es könnte mit dem Tag verwechselt werden, also lasst uns jetzt die Verwirrung beseitigen. Das Abschnitts-Tag wird verwendet, wenn der Inhalt innerhalb der Seite getrennt vom Rest der Seite mit einem einzigen Thema gruppiert werden muss und als Eintrag in der Seitengliederung angezeigt werden soll. Das div-Element wird jedoch als "generischer Container" angegeben. Dies bedeutet, dass es abgesehen von seinem eigenen Titel, seiner eigenen Sprache und seinen eigenen Klassenattributen nicht von der Hauptseite getrennt ist.
-
Neu und Elemente
HTML5s neue und Elemente sind Teil der Interactive Elements-Spezifikationen, gehören jedoch zu den am wenigsten diskutierten Elementen der Entwickler. Angesichts der Tatsache, dass sich das Web in mehr Seiten und Dokumente verwandelt hat, sind diese Elemente eine willkommene Ergänzung für mehr Interaktivität im Web.
Das Element darf nicht mit dem Element verwechselt werden, das als HTML-Navigations-Tag definiert ist, das den Seitennavigationsblock darstellt. Es enthält normalerweise Links, über die Benutzer durch Abschnitte auf der Seite oder zu einer anderen Seite springen können. Andererseits stellt das Menü-Tag Menübefehle zur Vereinfachung in Desktop- und Mobilanwendungen dar. Hier ist ein Beispiel für das Element in Aktion:
Hallo Welt
In der Zwischenzeit ist das Element eine weitere Möglichkeit, Bilder und Text anzuordnen. Es wird zusammen mit dem Element zum Markieren von Abbildungen, Diagrammen und Fotos verwendet. Im Folgenden finden Sie einen kurzen Codeausschnitt, der beide Elemente in Aktion enthält.
-
Neu und Elemente
Dies sind zwei wichtige Ergänzungen zum HTML5-Standard. Mit dem Audio-Tag können Entwickler wie mit dem Video-Tag Musik und Audio in ihre Website einbetten. Im Gegensatz zum vorherigen Standard können Sie nicht nur MIDI-Musik hinzufügen, auch wenn der verwendete Dateityp noch einige Einschränkungen aufweist. Die meisten Webkit-bezogenen Browser unterstützen normale MP3-Dateien, andere unterstützen jedoch nur das OGG-Format. Die gute Nachricht ist, dass es Unmengen von Dateikonvertern gibt und Sie einfach zwei Versionen der Audiodatei bereitstellen können. Die richtige Version wird automatisch abgeholt.
Sie können das Audio-Tag wie jedes andere Element verwenden. Hier ist ein Beispiel-Snippet:
Das Audio-Tag verfügt auch über eine Reihe von Attributen für zusätzliche Steuerelemente, einschließlich Ereignisattributen, und die Ereignisse umfassen Fensterereignisse, Formularereignisse, Medienereignisse und Mausereignisse. Das Videoelement verfügt auch über eine Reihe von Inhaltsattributen, einschließlich SRC, globale Attribute, Schleife, Steuerung, Vorspannung und Poster. Die Attribute SRC, Loop, Autoplay und Controls sind ziemlich selbsterklärend und für alle Medienelemente gleich, während die globalen Attribute für alle Elemente gleich sind. Dazu gehören dir, hidden, Kontextmenü und vieles mehr.
Es gibt einige andere Multimedia-Attribute und -Elemente, die mit HTML5 geliefert werden, z. B. das Spurelement, das Textspuren für das Videoelement bereitstellt.
-
Neue Formen
HTML5 kommt jetzt mit Form und Elementen. Wenn Sie nicht vorhaben, viele Tabellen auf der Seite zu verwenden, können Sie auch das Attribut entfernen und die vorgenommenen Änderungen überprüfen, bevor Sie fortfahren.
-
Nicht mehr und Elemente
Dies bedeutet, dass alle Attribute, mit denen Entwickler eine perfekt angelegte, getönte Tabelle erstellen können, z. B. Rahmen, Hintergrundfarbe, Ausrichtung, Höhe, Regeln und mehr. Alle diese Attribute werden durch CSS ersetzt.
-
Nicht mehr und
Dies ist ideal für Entwickler, die die Anfänge von HTML durchgearbeitet haben. Die Attribute frameset, frame und noframes sowie andere wie blink, basefont und mehr wurden vollständig entfernt. Sie müssen ohne Tabellen für das Layout auskommen. Tabellen sind immer noch Teil von HTML5, aber nicht mehr für Pixel gedacht. Die Spezifikationen besagen, dass Tabellen nicht für Layouthilfen und zur Steuerung des Seitenlayouts verwendet werden sollten.
Fazit
Wie Sie deutlich sehen können, gibt es viele Änderungen an HTML5, und Sie müssen es mit Sorgfalt und Vorsicht verwenden. Sie müssen auch Ihre Kenntnisse in der Sprache aktualisieren, da sie sich im Laufe der Zeit ändern und mehr Aktualisierungen erhalten. Sie müssen die Verwendung von Elementen beenden, die HTML5 von sich selbst entfernt hat, und die neuen HTML5-Elemente verwenden, die auf jeden Fall beibehalten werden, wie z. B. die Header- oder Footer-Tags.
Was Sie oben gesehen haben, ist die vereinfachte Version der Änderungen, die HTML5 seit dem Start vorgenommen hat. Aber seien wir doch mal ehrlich. Die Einführung von HTML5 ist weder einfach noch langsam, und der neue Standard bietet zahlreiche Funktionen, die für ein modernes Benutzererlebnis von entscheidender Bedeutung sind. Sie müssen mit der neuen Sprache Schritt halten und auch etwas CSS lernen, das eine größere Rolle als zuvor spielt.
Das Gute an diesen Veränderungen ist, dass sie, auch wenn sie groß sind, zum Besseren sind und dies von allen Beteiligten verstanden wird. Browser werden leistungsfähiger, wenn sie sich auf die Cloud zubewegen, und können mehr selbst verwalten. Mit Dingen wie Ajax und der Einbettung von Video und Audio und so weiter wird es viel einfacher sein, auf einfache Weise zu programmieren und dem Browser die Möglichkeit zu geben, schwere Aufgaben zu übernehmen. Beispielsweise beziehen sich neue Strukturelemente wie Abbildung, Fußzeile, Zusammenfassung und Abschnitt auf die Dokumentstruktur, und das Rendern bleibt dem Browser überlassen.
In Verbindung stehende Artikel:-
In den folgenden Artikeln erfahren Sie mehr über HTML und HTML5. Gehen Sie also einfach den Link durch.
- HTML und XML
- HTML5 vs Flash Top 9 Unterschiede (mit Infografiken)
- HTML gegen XHTML
- HTML5 vs Flash
- Erstaunliche Unterschiede HTML5 vs JavaScript
- 10 tolle nützliche Tipps zur Python-Programmierung (Tricks)