{"id":183702,"date":"2023-08-17T17:28:27","date_gmt":"2023-08-17T16:28:27","guid":{"rendered":"https:\/\/liora.io\/de\/?p=183702"},"modified":"2026-02-06T06:21:32","modified_gmt":"2026-02-06T05:21:32","slug":"html5-was-ist-das-vollstaendiger-leitfaden","status":"publish","type":"post","link":"https:\/\/liora.io\/de\/html5-was-ist-das-vollstaendiger-leitfaden","title":{"rendered":"HTML5: Was ist das? Vollst\u00e4ndiger Leitfaden"},"content":{"rendered":"<p><strong>Die Webentwicklung entwickelt sich st\u00e4ndig weiter. HTML5 hat sich als grundlegende und unverzichtbare Sprache etabliert. Seit seiner offiziellen Einf\u00fchrung am 28. Oktober 2014 hat HTML5 die Art und Weise, wie Websites erstellt werden, revolutioniert und bietet eine Vielzahl von erweiterten Funktionen, die das Nutzererlebnis verbessern.<\/strong><\/p>\n<h3>Die Entwicklung der grundlegenden Tags in HTML5<\/h3>\n<strong>HTML5<\/strong> hat die grundlegenden Tags eines HTML-Dokuments drastisch weiterentwickelt. Diese semantischen Tags bieten eine klarere und aussagekr\u00e4ftigere Struktur f\u00fcr den Inhalt einer Webseite und verbessern somit die Zug\u00e4nglichkeit, die <a href=\"https:\/\/liora.io\/de\/google-tag-manager-was-ist-das-wie-benutzt-man-ihn\">Indexierung durch Suchmaschinen<\/a> und das Gesamtverst\u00e4ndnis des Dokuments.\n<table>\n<thead>\n<tr>\n<th>Element<\/th>\n<th>Beschreibung<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>&lt;header&gt;<\/code><\/td>\n<td>Kopfbereich: Dieses neue Tag dient zur Definition des Kopfbereichs eines Dokuments. Es wird in der Regel verwendet, um den Titel, das Logo, die Hauptnavigation und andere Informationen einzuschlie\u00dfen. Dieses Tag erm\u00f6glicht Suchmaschinen und Browsern ein besseres Verst\u00e4ndnis der Seitenstruktur und verbessert die Zug\u00e4nglichkeit.<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;nav&gt;<\/code><\/td>\n<td>Navigation: Dieses Element wird verwendet, um die Hauptnavigation eines Dokuments zu umschlie\u00dfen, indem Men\u00fcs, Linklisten oder Navigationsleisten gruppiert werden. Dadurch wird die Navigation von anderen Elementen auf der Seite leichter unterscheidbar.<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;section&gt;<\/code><\/td>\n<td>Semantischer Abschnitt: Es dient dazu, eine Webseite in thematische Abschnitte oder Gruppen von Inhalten zu unterteilen. Dies erleichtert die logische Organisation des Inhalts und macht die Struktur f\u00fcr Entwickler und durch Technologie unterst\u00fctzte Leser klarer.<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;article&gt;<\/code><\/td>\n<td>Unabh\u00e4ngiger Inhalt: Es wird verwendet, um unabh\u00e4ngigen und eigenst\u00e4ndigen Inhalt zu umschlie\u00dfen. Dies kann Blogartikel, Nachrichten, Kommentare usw. einschlie\u00dfen.<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;footer&gt;<\/code><\/td>\n<td>Fu\u00dfbereich: Dieses neue Element wird verwendet, um den Fu\u00dfbereich eines Dokuments oder eines Abschnitts zu definieren. Es enth\u00e4lt in der Regel Informationen wie Kontaktdaten, Kontaktlinks, Urheberrechte, Credits usw.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Wozu dienen die Formulare?<\/h3>\nSie sind ein wesentlicher Bestandteil vieler Webseiten. Sie erm\u00f6glichen es den Nutzern, mit vielen Elementen zu interagieren und Informationen zu \u00fcbermitteln.\n\n<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}<br \/>\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;<br \/>\n  text-align:left;vertical-align:top}<br \/>\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;<br \/>\n  vertical-align:top}<br \/>\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n<tr>\n<th>Eingabetypen<\/th>\n<th>Neue Eingabetypen wurden implementiert (&#8218;email&#8216;, &#8218;url&#8216;, &#8217;number&#8216;, usw.), die es den Browsern erm\u00f6glichen, automatisch eingegebene Daten zu validieren und bei falschen Informationen eine geeignete Nachricht bereitzustellen.<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Validierungsattribute<\/td>\n<td>HTML5 hat neue Validierungsattribute eingef\u00fchrt, um die Eingabedaten des Benutzers einzuschr\u00e4nken. Zum Beispiel gibt das Attribut &#8218;required&#8216; an, dass das Feld f\u00fcr das Absenden des Formulars erforderlich ist.<\/td>\n<\/tr>\n<tr>\n<td>Clientseitige Validierung<\/td>\n<td>Fr\u00fcher erforderte die Validierung oft die Verwendung von JavaScript, aber mit HTML k\u00f6nnen moderne Browser Formulare automatisch validieren.<\/td>\n<\/tr>\n<tr>\n<td>Automatisches Ausf\u00fcllen<\/td>\n<td>HTML5 erm\u00f6glicht es dem Benutzer, Formulare anhand zuvor eingegebener Informationen automatisch auszuf\u00fcllen.<\/td>\n<\/tr>\n<tr>\n<td>Formularsteuerelemente<\/td>\n<td>Formulare verbessern nun die Benutzererfahrung durch neue Steuerelemente wie &#8218;datalist&#8216;, das automatische Vorschl\u00e4ge w\u00e4hrend der Eingabe bietet.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex is-content-justification-center\"><div class=\"wp-block-button \"><a class=\"wp-block-button__link wp-element-button \" href=\"https:\/\/liora.io\/de\/unsere-aus-und-weiterbildungen\">Lerne HTML5<\/a><\/div><\/div>\n\n<h3>HTML5 und die Medien<\/h3>\nEs gab bedeutende Entwicklungen bei der Integration und Manipulation von Medien in Webseiten.\n\n<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}<br \/>\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;<br \/>\n  text-align:left;vertical-align:top}<br \/>\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;<br \/>\n  vertical-align:top}<br \/>\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n<tr>\n<th>Videoeinbindung<\/th>\n<th>HTML5 f\u00fchrt das Element &lt;video&gt; ein, das die direkte Einbindung von Videos auf Webseiten erm\u00f6glicht, ohne externe Plugins wie Flash zu ben\u00f6tigen.<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Audiointegration<\/td>\n<td>\u00c4hnlich wie beim vorherigen Element erm\u00f6glicht &lt;audio&gt; die direkte Einbindung von Audiospuren auf Webseiten.<\/td>\n<\/tr>\n<tr>\n<td>Grafikerstellung<\/td>\n<td>Das Element &lt;canvas&gt; erm\u00f6glicht die Manipulation von Grafiken, Animationen und dynamischen Renderings mithilfe von Javascript.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nAndere Funktionen wie die <a href=\"https:\/\/liora.io\/de\/api-gateway-funktionsweise-und-vorteile\">Medien-API<\/a> und das &lt;track&gt;-Element erm\u00f6glichen auch eine reichhaltigere Verwaltung der in Webseiten eingebetteten Medien.\n<h3>Andere erweiterte Funktionen<\/h3>\nNeben den gerade erw\u00e4hnten Verbesserungen bietet HTML5 auch einige interessante Funktionen:\n\n<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}<br \/>\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;<br \/>\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}<br \/>\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;<br \/>\n  text-align:left;vertical-align:top}<br \/>\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;<br \/>\n  vertical-align:top}<br \/>\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n<tr>\n<th>Lokale Speicherung<\/th>\n<th>HTML5 f\u00fchrt APIs f\u00fcr die lokale Speicherung ein, die es Websites erm\u00f6glichen, Daten lokal im Browser des Benutzers zu speichern. Dies bietet eine Alternative zu Cookies f\u00fcr die persistente Datenspeicherung.<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Konnektivit\u00e4t<\/td>\n<td>Die WebSocket-API erm\u00f6glicht eine bidirektionale Echtzeitkommunikation zwischen Client und Server. Im Gegensatz zu herk\u00f6mmlichen HTTP-Aufrufen er\u00f6ffnet dies M\u00f6glichkeiten f\u00fcr Echtzeit-Webanwendungen wie Chatrooms, Dashboards, Mehrspieler-Spiele usw.<\/td>\n<\/tr>\n<tr>\n<td>Geolokalisierung<\/td>\n<td>Die Geolocation-API erm\u00f6glicht Websites den Zugriff auf den geografischen Standort des Benutzers \u00fcber den Browser.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Fazit<\/h3>\nHTML5 hat die Art und Weise, wie Webseiten heute gestaltet werden, revolutioniert. Moderne Webseiten sind jetzt viel dynamischer und \u00e4sthetischer, was mit den alten HTML-Versionen nicht m\u00f6glich war.\n\n<a href=\"https:\/\/liora.io\/de\/unsere-aus-und-weiterbildungen\">\nStarte deinen HTML5 Kurs mit uns\n<\/a>","protected":false},"excerpt":{"rendered":"<p>Die Webentwicklung entwickelt sich st\u00e4ndig weiter. HTML5 hat sich als grundlegende und unverzichtbare Sprache etabliert. Seit seiner offiziellen Einf\u00fchrung am 28. Oktober 2014 hat HTML5 die Art und Weise, wie Websites erstellt werden, revolutioniert und bietet eine Vielzahl von erweiterten Funktionen, die das Nutzererlebnis verbessern. Die Entwicklung der grundlegenden Tags in HTML5 HTML5 hat die [&hellip;]<\/p>\n","protected":false},"author":76,"featured_media":183704,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"editor_notices":[],"footnotes":""},"categories":[2476],"class_list":["post-183702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-dev"],"acf":[],"_links":{"self":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/183702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/comments?post=183702"}],"version-history":[{"count":1,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/183702\/revisions"}],"predecessor-version":[{"id":217234,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/posts\/183702\/revisions\/217234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/media\/183704"}],"wp:attachment":[{"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/media?parent=183702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liora.io\/de\/wp-json\/wp\/v2\/categories?post=183702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}