HTML5 ist keine nächste Version der Hypertext-Auszeichnungssprache (HTML), sie ist eine neue offene Plattform (Web Applications 1.0) für die Erstellung von mächtigen Webseiten und Anwendungen, die multimediales Content unterstützt, mit den Program-Interfaces arbeitet, mit den Formen zusammenwirkt, die Dokumente usw. strukturiert.
Vorteile von HTML5
Die wichtigsten Vorteile von HTML5 sind unten aufgeführt:
- HTML5 unterstützt SVG (Scalable Vector Graphics) und andere virtuelle Vektorgrafiken. In den frühen Versionen war die Nutzung von Vektorgrafiken nur in der Kombination mit solchen Technologien, wie Flash, VML usw. möglich.
- Der Code wurde sauberer, hauptsächlich durch das Ersetzen von div-Tags durch Semantische Elemente, die helfen, den Inhalt der Webseite besser zu strukturieren und die Lesbarkeit zu verbessern.
- HTML5 unterstützt die Geolokalisierung, wodurch es möglich ist, den Standort der Benutzer zu bestimmen.
- Die neuen Standards wurden festgelegt, um Multimedia (Animation, Audio, Video) direkt im Browser abzuspielen, ohne zusätzliche Plug-Ins installieren zu müssen.
- Die in HTML5 eingeführte Unterstützung für Webspeicher ermöglicht es, große Mengen an Anwendungsdaten lokal zu speichern, ohne die Leistung Ihrer Webanwendung zu beeinträchtigen. Die Daten im lokalen Speicher bleiben auch dann erhalten, wenn der Browser des Benutzers geschlossen und wieder geöffnet wird.
Die Inhaltsmodelle von HTML5
In HTML5 kann der Inhalt einer Webseite in semantische Gruppen unterteilt werden, die ihren Inhalt beschreiben. Diese Gruppen werden als Content-Modelle bezeichnet. Jedes dieser Modelle beschreibt den Typ der darin enthaltenen Elemente. Das Content-Modell kann Text- und Child-Elemente enthalten. Das Element kann einer oder mehreren Inhaltskategorien angehören.
Die Inhaltsmodelle von HTML5 sind nachfolgend aufgeführt:
- Metadateninhalt
- Flow-Inhalt
- Schnitt-Inhalt
- Überschrifteninhalt
- Phrasen-Inhalt
- Eingebetteter Inhalt
- Interaktiver Inhalt
- Greifbarer Inhalt
Um besser zu verstehen, wie sich die Content-Modelle auf einer Webseite befinden und wie sie interagieren, schauen Sie sich einfach die folgende Abbildung an.
Wie Sie sehen können, können sich die Content-Modelle überschneiden, und das bedeutet, dass es in der Zwischenzeit Elemente gibt, die zu mehreren Kategorien gehören. Beispielsweise beziehen sich Segmentierung, Überschrift, Phrasierung, eingebettet, interaktiv und ein Teil des Metadateninhalts auf Flow-Inhalte. Die Metadaten und interaktive Inhalte können sich in bestimmten Fällen auf Formulierungsinhalte beziehen.
Es gibt auch Elemente, die für bestimmte Zwecke verwendet werden, z. B. zur Definition von Formularen. Solche Elemente beziehen sich nicht auf eines der oben genannten Content-Modelle.
Metadateninhalt
Die Elemente der Kategorie Metadateninhalt enthalten Informationen über das HTML-Dokument, richten Links zu anderen Dokumenten ein, definieren die Präsentation oder das Verhalten des Dokuments. Diese Elemente werden auf der Webseite nicht angezeigt.
Die Elemente der Content-Modellkategorie sind: <base> , <link> , <meta>, <noscript>, <script>, <style>, <template> and <title>.
Flow-Inhalt
Die Elemente, die zur Flow-Inhaltskategorie gehören, sind typischerweise diejenigen, die im Body eines HTML-Dokuments verwendet werden (eingeschlossen in den Tags <body></body>).
Die Elemente des Flow-Modelltyps sind: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.
Die folgenden Elemente gehören zum Flow-Inhalt, jedoch nur, wenn eine bestimmte Bedingung erfüllt ist:
- <area> nur innerhalb des Tages <map>
- <link> nur, wenn das Attribut itemprop angegeben ist
- <meta> nur, wenn das Attribut itemprop angegeben ist
- <style> nur, wenn das Attribut scoped angegeben ist
Schnitt-Inhalt
Die Elemente, die zum Inhalt der Segmentierung gehören, sind diejenigen, die unabhängige Abschnitte in der Struktur eines HTML-Dokuments erstellen (z. B. Kopfzeile, Fußzeile usw.). Beachten Sie bitte, dass jeder Abschnitt seine Überschrift und Gliederung haben könnte.
Die Elemente der Segmentierung Inhaltsmodell sind: <article>, <aside>, <nav> und <section>.
Überschrifteninhalt
Die Elemente, die zum Inhaltsmodell der Aufteilung gehören, erstellen einen Abschnitt in der aktuellen Gliederung, der den Umfang der Elemente <header> elements, <footer> und des Inhalts der Überschrift definiert.
Die Elemente des Inhalts der Überschrift sind: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> und <hgroup>.
Phrasen-Inhalt
Die Elemente, die zum Phraseninhalt gehören, definieren und markieren den Text. Sie sind: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr>.
Die folgenden Elemente gehören zum Phraseninhalt, jedoch nur, wenn eine bestimmte Bedingung erfüllt ist:
- <a>, wenn es nur Phraseninhalte enthält
- <area> nur innerhalb des Elementes <map>
- <del>, wenn es nur Phraseninhalte enthält
- <ins>, wenn es nur Phraseninhalte enthält
- <link>, wenn das Attribut itemprop angegeben ist
- <map>, wenn es nur Phraseninhalte enthält
- <meta>, wenn das Attribut itemprop angegeben ist
Eingebetteter Inhalt
Eingebettete Inhalte importieren eine andere Ressource oder fügen Inhalte aus einer anderen Markup-Sprache oder einem anderen Namensraum in das Dokument ein. Dieses Content-Modell beinhaltet die folgenden Elemente: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, und <video>.
Interaktiver Inhalt
as Modell für interaktive Inhalte enthält Elemente, die speziell für die Benutzerinteraktion entwickelt wurden. Sie sind <a> (falls das Attribut href angegeben ist), <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> und <textarea>.
Die folgenden Elemente gehören zum interaktiven Inhaltsmodell, jedoch nur, wenn eine bestimmte Bedingung erfüllt ist:
- <audio>, wenn das Attribut controls angegeben ist
- <img>, wenn das Attribut usemap angegeben ist
- <input>, wenn das Attribut type nicht ausgeblendet ist
- <menu>, wenn der Wert des Attributes type “toolbar” ist
- <object>, wenn das Attribut usemap angegeben ist
- <video>, wenn das Attribut controls angegeben ist
Greifbarer Inhalt
Die Inhalte sind greifbar, wenn sie weder leer noch verborgen sind; sie sind Inhalte, die gerendert werden und inhaltlich sind. Die Elemente, deren Modell Flow-Inhalt oder Phrasen-Inhalt ist, sollten mindestens einen Knoten haben, der greifbar ist und kein Attribut hat, dessen Wert hidden ist.
Das ist keine erforderliche Bedingung, es gibt Fälle, in denen das Element leer sein kann. Beispielsweise kann das Element gefüllt werden, nachdem ein externes Skript ausgeführt wurde.
Die sekundären Inhaltskategorien
Die sekundären Inhaltskategorien sind diejenigen, die Skripte unterstützen. Die scriptunterstützenden Elemente tragen nicht direkt zur gerenderten Ausgabe eines Dokuments bei, sondern unterstützen Skripte, entweder indem sie Skriptcode direkt enthalten oder angeben oder indem sie Daten angeben, die von Skripten verwendet werden. Die skriptunterstützenden Elemente sind <script> und <template>. Die Elemente <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> and <td> werden als Schnittwurzeln bezeichnet. Die Elemente, die zum transparenten Inhaltsmodell gehören, sind <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> und <video>. Diese Elemente erben den Typ des übergeordneten Elements und können Inhalte enthalten, die in ihrem übergeordneten Element erlaubt sind.
Übe dein Wissen
