W3docs
de
Anmelden

HTML5-Einführung

HTML5 ist mehr als eine neue HTML-Version — es ist ein Technologie-Set für leistungsfähigere und vielfältigere Websites und Anwendungen.

HTML5 ist nicht nur eine neue Version von HTML, die um neue Elemente und Attribute erweitert wurde, sondern ein Technologie-Set zum Erstellen leistungsfähigerer und vielfältigerer Websites und Anwendungen, die Multimedia unterstützen und mit Software-Schnittstellen interagieren können, usw.

Diese Seite behandelt, was sich HTML5 im Vergleich zu HTML4 geändert hat, die neuen semantischen Elemente, die neuen Formulareingabetypen, die neuen JavaScript-APIs sowie die Einbettung von nativem Audio und Video. Wenn Sie noch keine Vorkenntnisse in HTML haben, beginnen Sie zunächst mit der HTML-Einführung.

HTML5 vs. der HTML Living Standard

HTML5 wurde 2014 als stabile W3C-Empfehlung veröffentlicht. Seitdem wird die Sprache nicht mehr in nummerierten Versionen eingefroren. Sie wird nun vom WHATWG als HTML Living Standard gepflegt — eine einzige Spezifikation, die kontinuierlich aktualisiert wird, anstatt als „HTML6" neu veröffentlicht zu werden. Im alltäglichen Sprachgebrauch bedeutet „HTML5" einfach modernes HTML: der Standard, den Ihr Browser heute implementiert.

HTML5-Vorteile

Die wichtigsten Vorteile von HTML5 sind nachfolgend aufgeführt:

  • Es wird von jedem aktuellen Browser unterstützt, sowohl auf Desktop- als auch auf Mobilgeräten, und das seit über einem Jahrzehnt.
  • Es ist gerätefreundlicher und einfacher zu erstellen dank einer wesentlich einfacheren <!DOCTYPE html>- und <meta charset="UTF-8">-Deklaration.
  • Es arbeitet Hand in Hand mit CSS und JavaScript, um ansprechende, interaktive Websites zu erstellen.
  • Es unterstützt SVG (Scalable Vector Graphics) und <canvas> für Grafiken. In früheren Versionen waren für Vektorgrafiken Plug-ins wie Flash oder VML erforderlich.
  • Der Markup-Code wird sauberer, indem generische <div>-Container durch semantische Elemente ersetzt werden, die die Seite besser strukturieren und die Lesbarkeit sowie die Barrierefreiheit verbessern.
  • Es ermöglicht den Zugriff auf den Standort des Nutzers über die Geolocation-API.
  • Es gibt Multimedia (Audio, Video) direkt im Browser über native <audio>- und <video>-Elemente wieder, ohne zusätzliche Plug-ins. Weitere Informationen finden Sie unter HTML-Multimedia.
  • Es führt Web Storage ein, sodass Anwendungen Daten lokal speichern können, die auch nach dem Schließen und erneuten Öffnen des Browsers erhalten bleiben.

Was sich von HTML4 zu HTML5 geändert hat

In HTML5 entfernte und veraltete Elemente

Mehrere präsentationale Funktionen von HTML4 wurden entfernt, da Styling zu CSS gehört. Die folgenden sind veraltet und sollten nicht mehr verwendet werden:

  • Präsentationale Elemente wie <font>, <center>, <big>, <strike> und die alte Styling-Rolle von <u>.
  • Das Frame-Modell: <frameset>, <frame> und <noframes> (verwenden Sie <iframe>, wenn eine Einbettung tatsächlich benötigt wird).
  • Präsentationale Attribute wie align, bgcolor, border bei Tabellen sowie cellpadding/cellspacing — ersetzen Sie diese durch CSS.

In HTML5 hinzugefügte Elemente

  • Semantische Elemente — <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure> und mehr.
  • Natives Multimedia — die <audio>- und <video>-Elemente.
  • Neue Formulareingabetypen und -attribute — email, date, range und weitere.
  • Grafiken — das <canvas>-Element für 2D-Zeichnungen und eingebettetes <svg>.
  • JavaScript-APIs — Web Storage, Geolocation, Web Workers, WebSockets und mehr (siehe unten).

Neue semantische Elemente

Anstatt jeden Bereich einer Seite mit einem generischen <div> zu markieren, stellt HTML5 Elemente bereit, die die Rolle des Inhalts beschreiben. Dies hilft Suchmaschinen, Screenreadern und anderen Entwicklern, die Seitenstruktur zu verstehen.

ElementZweck
<header>Einleitender Inhalt oder eine Gruppe von Navigationslinks
<nav>Ein Block mit wichtigen Navigationslinks
<main>Der dominante Inhalt des Dokuments
<article>Ein eigenständiger, unabhängig verteilbarer Inhaltsteil
<section>Eine thematische Gruppierung von Inhalten, in der Regel mit einer Überschrift
<aside>Inhalt, der tangential mit dem umgebenden Inhalt zusammenhängt, wie eine Seitenleiste
<footer>Fußzeile für den nächsten Abschnitt oder die Seite
<figure> / <figcaption>Eigenständige Medien mit optionaler Bildunterschrift

Für eine vollständige Anleitung mit Beispielen lesen Sie Semantische Elemente in HTML5.

Neue Formulareingabetypen und -attribute

HTML5 hat Eingabetypen hinzugefügt, die Benutzern zweckgerichtete Steuerelemente (Datumsauswahl, Schieberegler, Farbräder) bieten und dem Browser ermöglichen, Eingaben für Sie zu validieren. Häufige Typen sind email, url, tel, search, number, range, date und color.

Neue Attribute wie placeholder, required, autofocus und pattern reduzieren die Menge an JavaScript, die Sie für Hinweise und Validierungen benötigen.

<form>
  <label>Email: <input type="email" placeholder="[email protected]" required></label>
  <label>Birthday: <input type="date"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Quantity: <input type="number" min="1" max="10"></label>
  <label>Favorite color: <input type="color"></label>
  <label>Website: <input type="url" autofocus></label>
  <button type="submit">Submit</button>
</form>

Weitere Informationen finden Sie auf der Seite zum <input>-Tag.

Neue JavaScript-APIs

HTML5 hat auch eine Reihe von Browser-APIs standardisiert, die Webseiten in vollständige Anwendungen verwandeln:

  • Canvas 2D — Zeichnen Sie Grafiken, Diagramme und Spiele Pixel für Pixel auf dem <canvas>-Element.
  • Web Storage — localStorage und sessionStorage speichern Schlüssel/Wert-Daten im Browser zwischen Besuchen.
  • Geolocation — Fragen Sie den Nutzer nach seiner geografischen Position.
  • Web Workers — Führen Sie Skripte in einem Hintergrund-Thread aus, damit die Benutzeroberfläche reaktionsfähig bleibt.
  • WebSockets — Öffnen Sie eine dauerhafte, bidirektionale Verbindung zu einem Server für Echtzeitdaten.
  • History API — Ändern Sie die URL und den Navigationsverlauf ohne vollständiges Neuladen der Seite.

Natives Audio und Video

Die Elemente <audio> und <video> geben Medien direkt wieder, ohne Plug-ins. Verwenden Sie das controls-Attribut, um die Wiedergabe-Benutzeroberfläche des Browsers anzuzeigen, geben Sie ein oder mehrere <source>-Elemente an, damit der Browser ein unterstütztes Format auswählen kann, und fügen Sie Fallback-Text für sehr alte Browser hinzu.

<!DOCTYPE html>
<html>
  <head>
    <title>Native audio and video</title>
  </head>
  <body>
    <video width="320" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>

    <audio controls>
      <source src="sound.mp3" type="audio/mpeg">
      <source src="sound.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Weitere Informationen zu Formaten und Attributen finden Sie unter HTML-Multimedia.

HTML5-Inhaltsmodelle

In HTML5 kann der Inhalt einer Webseite in semantische Gruppen unterteilt werden, die dessen 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. Ein Element kann einer oder mehreren Inhaltskategorien angehören.

HTML5-Inhaltsmodelle sind nachfolgend aufgeführt:

  • Metadaten-Inhalt (Metadata content)
  • Fluss-Inhalt (Flow content)
  • Gliederungs-Inhalt (Sectioning content)
  • Überschriften-Inhalt (Heading content)
  • Phrasierungs-Inhalt (Phrasing content)
  • Eingebetteter Inhalt (Embedded content)
  • Interaktiver Inhalt (Interactive content)
  • Greifbarer Inhalt (Palpable content)

Inhaltsmodelle können sich überschneiden, was bedeutet, dass Elemente gleichzeitig mehreren Kategorien angehören. Zum Beispiel verweisen Gliederungs-, Überschriften-, Phrasierungs-, eingebetteter, interaktiver und einige Metadaten-Inhalt auf den Fluss-Inhalt. Metadaten- und interaktiver Inhalt können in bestimmten Fällen auf den Phrasierungs-Inhalt verweisen.

Es gibt auch Elemente, die für bestimmte Zwecke verwendet werden, z. B. zum Definieren von Formularen. Solche Elemente gehören keinem der oben genannten Inhaltsmodelle an.

Metadaten-Inhalt

Elemente, die zur Kategorie Metadaten-Inhalt gehören, enthalten Informationen über HTML-Dokumente, richten Links zu anderen Ressourcen ein, definieren die Präsentation oder das Verhalten. Diese Elemente werden auf der Webseite nicht angezeigt.

Elemente in dieser Kategorie sind: <base>, <link>, <meta>, <noscript>, <script>, <style>, <template> und <title>.

Beispiel für Elemente des Metadaten-Inhalts:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

Fluss-Inhalt

Elemente, die zur Kategorie Fluss-Inhalt gehören, sind in der Regel diejenigen, die im Rumpf eines HTML-Dokuments verwendet werden (eingeschlossen in den <body>-Tags).

Elemente in dieser Kategorie 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>.

Beispiel für Elemente des Fluss-Inhalts:

Beispielelemente der Kategorie Fluss-Inhalt

<!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>
Probier es selbst »

Die folgenden Elemente gehören zum Fluss-Inhalt, jedoch nur wenn eine bestimmte Bedingung erfüllt ist:

  • <area>, nur innerhalb von <map>,
  • <link>, nur wenn das itemprop-Attribut angegeben ist,
  • <meta>, nur wenn das itemprop-Attribut angegeben ist.

Gliederungs-Inhalt

Elemente, die zum Gliederungs-Inhalt gehören, erstellen unabhängige Abschnitte in der Struktur eines HTML-Dokuments (z. B. Kopfzeile, Fußzeile usw.). Beachten Sie, dass jeder Abschnitt seine eigene Überschrift und Gliederung haben kann.

Die Elemente des Gliederungs-Inhaltsmodells sind: <article>, <aside>, <nav> und <section>.

Beispiel für Elemente des Gliederungs-Inhalts:

<!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>
Probier es selbst »

Überschriften-Inhalt

Elemente, die zum Gliederungs-Inhaltsmodell gehören, erstellen einen Abschnitt in der aktuellen Gliederung, der den Geltungsbereich von <header>-Elementen, <footer>-Elementen und Überschriften-Inhalt definiert.

Die Elemente des Überschriften-Inhalts sind: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> und <hgroup>.

Beispiel für Elemente des Überschriften-Inhalts:

<!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>
Probier es selbst »

Phrasierungs-Inhalt

Die Elemente, die zum Phrasierungs-Inhalt gehören, definieren und markieren den Text. Das 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 des Phrasierungs-Inhalts:

Beispiel für Elemente des Phrasierungs-Inhalts:

<!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 &lt;strong&gt; 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>
Probier es selbst »

Die folgenden Elemente gehören zum Phrasierungs-Inhalt, jedoch nur wenn eine bestimmte Bedingung erfüllt ist:

  • <a>, wenn es nur Phrasierungs-Inhalt enthält,
  • <area>, nur innerhalb des <map>-Elements,
  • <del>, wenn es nur Phrasierungs-Inhalt enthält,
  • <ins>, wenn es nur Phrasierungs-Inhalt enthält,
  • <link>, wenn das itemprop-Attribut angegeben ist,
  • <map>, wenn es nur Phrasierungs-Inhalt enthält,
  • <meta>, wenn das itemprop-Attribut angegeben ist.

Eingebetteter Inhalt

Eingebetteter Inhalt importiert eine andere Ressource oder fügt Inhalt 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 des eingebetteten Inhalts:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; 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&lt;img&gt; tag:</h2>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br />
  </body>
</html>
Probier es selbst »

Interaktiver Inhalt

Das interaktive Inhaltsmodell umfasst Elemente, die speziell für die Benutzerinteraktion konzipiert sind. Das sind <a> (wenn das href-Attribut angegeben ist), <button>, <details>, <embed>, <iframe>, <label>, <select> und <textarea>.

Beispiel für Elemente des interaktiven Inhalts:

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>
Probier es selbst »

Die folgenden Elemente gehören zum interaktiven Inhaltsmodell, jedoch nur wenn eine bestimmte Bedingung erfüllt ist:

  • <audio>, wenn das controls-Attribut angegeben ist,
  • <img>, wenn das usemap-Attribut angegeben ist,
  • <input>, wenn das type-Attribut nicht hidden ist,
  • <object>, wenn das usemap-Attribut angegeben ist,
  • <video>, wenn das controls-Attribut angegeben ist.

Greifbarer Inhalt

Inhalt ist greifbar, wenn er weder leer noch ausgeblendet ist; dies ist der Inhalt, der gerendert wird und substanziell ist. Elemente, deren Modell Fluss-Inhalt oder Phrasierungs-Inhalt ist, sollten mindestens einen greifbaren Knoten haben, und dieser Knoten sollte kein hidden-Attribut haben.

Dies ist keine zwingende Bedingung; es gibt Fälle, in denen das Element leer sein kann. Zum Beispiel kann es 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 skriptunterstützenden Elemente tragen nicht direkt zur gerenderten Ausgabe eines Dokuments bei, sondern unterstützen Skripte, entweder durch das Enthalten oder direkte Angeben von Skriptcode oder durch das Angeben von Daten, die von Skripten verwendet werden. Die skriptunterstützenden Elemente sind <script> und <template>. Die Elemente <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> und <td> werden als Gliederungswurzeln bezeichnet. 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 Inhalt enthalten, der in ihrem übergeordneten Element erlaubt ist.

Übungen

Übung
Welches Element wurde in HTML5 eingeführt, um Medien ohne ein Plug-in abzuspielen?
Welches Element wurde in HTML5 eingeführt, um Medien ohne ein Plug-in abzuspielen?
Übung
Welcher DOCTYPE deklariert ein HTML5-Dokument?
Welcher DOCTYPE deklariert ein HTML5-Dokument?
Was this page helpful?