path: root/files/de/web/guide/html/html5/index.html

---
title: HTML5
slug: Web/HTML/HTML5
tags:
  - HTML
  - HTML5
  - References
  - Web Development
translation_of: Web/Guide/HTML/HTML5
---
<p><span class="seoSummary"><strong>HTML5</strong> ist die aktuellste Entwicklung des Web Standards, der <a href="/en-US/docs/HTML" title="HTML">HTML</a> definiert.</span> Der Begriff repräsentiert zwei verschiedene Konzepte:</p>

<ul>
 <li><span class="seoSummary">Es ist eine neue Version der <em>Sprache</em> HTML, mit neuen Elementen, Attributen und Verhaltensweisen,</span></li>
 <li><span class="seoSummary">und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen.</span> Diese Kombination wird manchmal <em>HTML5 &amp; Freunde</em> genannt und oft zu <em>HTML5</em> abgekürzt.</li>
</ul>

<p>Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.</p>

<ul>
 <li><em>Semantik</em>: Erlaubt präziser zu beschreiben, was der Inhalt ist.</li>
 <li><em>Konnektivität</em>: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.</li>
 <li><em>Offline &amp; Speicherung</em>: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.</li>
 <li><em>Multimedia</em>: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.</li>
 <li><em>2D/3D Graphiken &amp; Effekte</em>: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.</li>
 <li><em>Leistung &amp; Integration</em>: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.</li>
 <li><em>Gerätezugriff</em>: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.</li>
 <li><em>Styling</em>: Lässt Autoren anspruchsvollere Designs schreiben.</li>
</ul>

<div class="cleared row topicpage-table">
<div class="section">
<h2 id="SemantiK" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemantiK</h2>

<dl>
 <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Gliederungen und Abschnitte in HTML5</a></dt>
 <dd>Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.</dd>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt>
 <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd>
 <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formulare in HTML5</a></dt>
 <dd>Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (<em>Überprüfung von Wertbeschränkungen</em>), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.</dd>
 <dt>Neue semantische Elemente</dt>
 <dd>Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">gültiger HTML5 Elemente</a>.</dd>
 <dt>Verbesserung bei {{HTMLElement("iframe")}}</dt>
 <dd>Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.</dd>
 <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
 <dd>Erlaubt das direkte Einbinden mathematischer Formeln.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Einführung in HTML5</a></dt>
 <dd>Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5-konformer Parser</a></dt>
 <dd>Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.</dd>
</dl>

<h2 id="Konnektivität" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Konnektivität</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt>
 <dd>Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-gesendete Ereignisse</a></dt>
 <dd>Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd>
</dl>

<h2 id="Offline_Speicherung" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Offline &amp; Speicherung</h2>

<div class="note">
<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Offline-Ressourcen: der Anwendungs-Cache</a></dt>
 <dd>Firefox unterstützt vollständig die HTML5 <em>offline resource</em> Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt>
 <dd>Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)</a></dt>
 <dd>Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Dateien aus Webanwendungen benutzen</a></dt>
 <dd>Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> Attribut von <span style="font-family: monospace;">{{HTMLElement("input")}} </span>Elementen des <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>Typs</strong></a><span style="font-family: monospace;"> </span><span style="font-family: courier new;">file</span> ein. Außerdem gibt es <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>
</div>

<h2 id="Multimedia" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimedia</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Audio und Video benutzen</a></dt>
 <dd>Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Diese Technologie, wobei RTC für Real-Time Communication (<em>Echtzeit-Kommunikation</em>) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Camera API benutzen</a></dt>
 <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd>
 <dt>Untertitel und WebVTT</dt>
 <dd>Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> ist ein Texttitel-Format.</dd>
</dl>

<h2 id="3D_graphiKEN_effeKtE" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, graphiKEN &amp; effeKtE</h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas-Tutorial</a></dt>
 <dd>Lerne mehr über das neue <code>{{HTMLElement("canvas")}}</code> Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 Text-API für <code>&lt;canvas&gt;</code> Elemente</a></dt>
 <dd>Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt>
 <dd>Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.</dd>
 <dt> </dt>
</dl>
</div>

<div class="section">
<h2 id="Leistung_integration" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Leistung &amp; integration</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Worker</a></dt>
 <dd>Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt>
 <dd>Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter <a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd>
 <dt>JIT-kompilierende JavaScript-Engines</dt>
 <dd>Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt>
 <dd>Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!</a></dt>
 <dd>In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag und Drop</a></dt>
 <dd>Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Fokus-Kontrolle in HTML</a></dt>
 <dd>Die neuen HTML5 <code>activeElement</code> und <code>hasFocus</code> Attribute werden unterstützt.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web-basierte Protokoll-Handler</a></dt>
 <dd>Sie können jetzt Webanwendungen als Protokoll-Handler mit der <code>navigator.registerProtocolHandler()</code> Methode registrieren.</dd>
 <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
 <dd>Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Vollbild-API</a></dt>
 <dd>Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Online- und Offline-Ereignisse</a></dt>
 <dd>Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.</dd>
</dl>

<h2 id="Gerätezugriff" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gerätezugriff</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Die Kamera-API benutzen</a></dt>
 <dd>Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Touch-Ereignisse</a></dt>
 <dd>Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolocation benutzen</a></dt>
 <dd>Lässt Browser die Position des Benutzers mittels geolocation herausfinden.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Geräte-Orientierung ermitteln</a></dt>
 <dd>Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt>
 <dd>Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.</dd>
</dl>

<h2 id="Styling" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Styling</h2>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a> bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.</p>

<dl>
 <dt>Neue Funktionen für Hintergründe</dt>
 <dd>Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">mehrere Hintergründe</a> zu setzen.</dd>
 <dt>Ausgefallenere Ränder</dt>
 <dd>Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.</dd>
 <dt>Stile animierbar machen</dt>
 <dd>Mit <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Übergängen</a>, um zwischen unterschiedlichen Zuständen zu animieren, oder <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animationen</a>, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.</dd>
 <dt>Typographie-Verbesserungen</dt>
 <dd>Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">Silbentrennung</a> kontrollieren, aber sie können auch <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">Schatten</a> zuweisen und noch präziser seine <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">Dekorationen</a> kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.</dd>
 <dt>Neue Präsentations-Layouts</dt>
 <dd>Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS Mehr-Spalten-Layout</a> und das <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS Flexible-Box-Layout</a>.</dd>
</dl>
</div>
</div>

<p> </p>