HTML5-Einführung
HTML5 ist nicht nur eine neue Version von HTML, angereichert mit neuen Elementen und Attributen, sondern eine Sammlung von Technologien zum Erstellen leistungsfähigerer und vielfältigerer Websites und Anwendungen, die Multimedia unterstützen und mit Software-Schnittstellen usw. interagieren.
Vorteile von HTML5
Die wichtigsten Vorteile von HTML5 sind unten aufgeführt:
- HTML5 wird von allen modernen Browsern unterstützt.
- HTML5 ist gerätefreundlicher. Es ist einfach zu verwenden.
- HTML5 kann dabei helfen, ansprechende Websites mit CSS, JavaScript usw. zu erstellen.
- HTML5 unterstützt SVG (Scalable Vector Graphics - Wikipedia) und andere Vektorgrafiken. In früheren Versionen war die Verwendung von Vektorgrafiken nur in Kombination mit Technologien wie Flash, VML usw. möglich.
- Der Code wird sauberer, vor allem 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 Geolokalisierung, wodurch es möglich ist, den Standort der Benutzer zu bestimmen.
- Die neuen Standards wurden für die Wiedergabe von Multimedia (Animation, Audio, Video) direkt im Browser festgelegt, ohne dass zusätzliche Plug-ins installiert werden müssen.
- Die in HTML5 eingeführte Unterstützung für Web Storage macht es möglich, große Mengen an Anwendungsdaten lokal zu speichern, ohne die Leistung Ihrer Webanwendung zu beeinträchtigen. Die Daten im lokalen Speicher bleiben erhalten, auch wenn der Browser des Benutzers geschlossen und erneut geöffnet wird.
Nachteile von HTML5:
- Es wird von älteren Browsern nicht unterstützt.
HTML5-Inhaltsmodelle
In HTML5 kann der Inhalt einer Webseite in semantische Gruppen unterteilt werden, die ihren Inhalt beschreiben. Diese Gruppen werden Inhaltsmodelle genannt. Jedes dieser Modelle beschreibt den Typ der Elemente, die es enthält. Das Inhaltsmodell kann Text und untergeordnete Elemente enthalten. Das Element kann zu einer oder mehreren Inhaltskategorien gehören.
Die HTML5-Inhaltsmodelle sind unten aufgeführt:
- Metadateninhalt
- Flussinhalt
- Abschnittsinhalt
- Überschrifteninhalt
- Phraseninhalt
- Eingebetteter Inhalt
- Interaktiver Inhalt
- Wahrnehmbarer Inhalt
Inhaltsmodelle können sich überschneiden, und das bedeutet, dass Elemente gleichzeitig zu mehreren Kategorien gehören. Zum Beispiel beziehen sich Abschnitts-, Überschriften-, Phrasen-, eingebetteter, interaktiver und ein Teil des Metadateninhalts auf Flussinhalt. Metadaten- und interaktiver Inhalt können sich in bestimmten Fällen auf Phraseninhalt beziehen.
Es gibt auch Elemente, die für bestimmte Zwecke verwendet werden, zum Beispiel zur Definition von Formularen. Solche Elemente beziehen sich auf keines der oben genannten Inhaltsmodelle.
Metadateninhalt
Elemente, die zur Kategorie Metadateninhalt gehören, enthalten Informationen über HTML-Dokumente, richten Verknüpfungen zu anderen Ressourcen ein oder definieren deren Darstellung oder Verhalten. Diese Elemente werden auf der Webseite nicht angezeigt.
Zu dieser Kategorie gehören: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> und <title>.
Beispiel für Elemente, die zum Metadateninhalt gehören:
Beispiel für Elemente, die zum Metadateninhalt gehören:
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<style>
* {
color: #1c87c9;
}
</style>
</head>Flussinhalt
Elemente, die zur Kategorie Flussinhalt gehören, sind typischerweise diejenigen, die im Body eines HTML-Dokuments verwendet werden (innerhalb der <body>-Tags).
Zu dieser Kategorie gehören: <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>.
Beispiel für Elemente, die zum Flussinhalt gehören:
Beispiel für Elemente, die zur Kategorie Flussinhalt gehören
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
<hr/>
<div>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<hr/>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</div>
</body>
</html>Die folgenden Elemente gehören zum Flussinhalt, jedoch nur, wenn eine bestimmte Bedingung erfüllt ist:
<area>, nur innerhalb von<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.
Abschnittsinhalt
Elemente, die zum Abschnittsinhalt gehören, sind solche, die unabhängige Abschnitte in der Struktur eines HTML-Dokuments erzeugen (zum Beispiel Header, Footer usw.). Beachten Sie, dass jeder Abschnitt seine eigene Überschrift und Gliederung haben kann.
Die Elemente des Abschnittsinhaltsmodells sind: <article>, <aside>, <nav> und <section>.
Beispiel für Elemente, die zum Abschnittsinhalt gehören:
Beispiel für Elemente, die zum Abschnittsinhalt gehören:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Article about flower</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
</section>
</body>
</html>Überschrifteninhalt
Elemente, die zum Abschnittsinhaltmodell gehören, erzeugen einen Abschnitt in der aktuellen Gliederung, der den Geltungsbereich von <header>-Elementen, <footer>-Elementen und Überschrifteninhalt definiert.
Die Elemente des Überschrifteninhalts sind: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> und <hgroup>.
Beispiel für Elemente, die zum Überschrifteninhalt gehören:
Beispiel für Elemente, die zum Überschrifteninhalt gehören:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<hgroup>
<h1>Welcome to W3Docs</h1>
<h2>Here you can learn HTML Bases.</h2>
<h3>Some text or subtitle.</h3>
</hgroup>
</body>
</html>Phraseninhalt
Elemente, die zum Phraseninhalt gehören, definieren und markieren den Text. Sie sind <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> und <wbr>.
Beispiel für Elemente, die zum Phraseninhalt gehören:
Beispiel für Elemente, die zum Phraseninhalt gehören:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example with HTML tags</h1>
<p>
Here is some text <sub> with the sup tag</sub>.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
<p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
<p>We’ve used <strong> tag to highlight <strong> this important part of the text</strong>.</p>
<p>The important part of the text is highlighted by the <em> in italic</em>.</p>
</body>
</html>Die folgenden Elemente gehören zum Phraseninhalt, jedoch nur, wenn eine bestimmte Bedingung erfüllt ist:
<a>, wenn es nur Phraseninhalt enthält,<area>nur innerhalb des Elements<map>,<del>, wenn es nur Phraseninhalt enthält,<ins>, wenn es nur Phraseninhalt enthält,<link>, wenn das Attribut itemprop angegeben ist,<map>, wenn es nur Phraseninhalt enthält,<meta>, wenn das Attribut itemprop angegeben ist.
Eingebetteter Inhalt
Eingebetteter Inhalt importiert eine andere Ressource oder fügt Inhalte aus einer anderen Auszeichnungssprache oder einem anderen Namensraum in das Dokument ein. Dieses Inhaltsmodell umfasst die folgenden Elemente: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg> und <video>.
Beispiele für Elemente, die zum eingebetteten Inhalt gehören:
Beispiele für Elemente, die zum eingebetteten Inhalt gehören
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Examples of the HTML elements:</h1>
<h2>Example of the HTML<canvas> tag:</h2>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
<h2>Example of the HTML<img> tag:</h2>
<img src="https://www.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> tag:</h2>
<svg width="350" height="150">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
</svg>
<br />
</body>
</html>Interaktiver Inhalt
Das interaktive Inhaltsmodell umfasst Elemente, die speziell für die Benutzerinteraktion entwickelt wurden. Dazu gehören <a> (wenn das Attribut href angegeben ist), <button>, <details>, <embed>, <iframe>, <label>, <select> und <textarea>.
Beispiel für Elemente, die zum interaktiven Inhalt gehören:
Beispiel für interaktiven Inhalt:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of Interactive content</h1>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<br /><br />
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
<br />
<button type="button">Send</button>
</form>
</body>
</html>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 hidden ist,<menu>, wenn der Wert des Attributs type „toolbar“ ist,<object>, wenn das Attribut usemap angegeben ist,<video>, wenn das Attribut controls angegeben ist.
Wahrnehmbarer Inhalt
Inhalt ist wahrnehmbar, wenn er weder leer noch verborgen ist; das ist der Inhalt, der gerendert wird und substanziell ist. Elemente, deren Modell Flussinhalt oder Phraseninhalt ist, sollten mindestens einen wahrnehmbaren Knoten haben, und dieser Knoten sollte kein hidden-Attribut haben.
Dies ist keine erforderliche Bedingung; es gibt Fälle, in denen das Element leer sein kann. Zum Beispiel kann es nach Ausführung eines externen Skripts gefüllt werden.
Die sekundären Inhaltskategorien
Die sekundären Inhaltskategorien sind diejenigen, die Skripte unterstützen. Die skriptunterstützenden Elemente tragen nicht direkt zur gerenderten Ausgabe eines Dokuments bei, unterstützen aber 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 <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> und <td>-Elemente werden als Abschnittswurzeln bezeichnet. Elemente, die zum transparenten Inhaltsmodell gehören, sind <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> und <video>. Diese Elemente erben den Typ des Elternelements und können Inhalte enthalten, die im Elternelement erlaubt sind.
Übung
Was sind einige der neuen Elemente, die in HTML5 eingeführt wurden?