{"id":11968,"date":"2026-10-28T20:04:26","date_gmt":"2026-10-28T17:04:26","guid":{"rendered":"https:\/\/webmister.pro\/html-5-2\/"},"modified":"2026-10-28T20:34:12","modified_gmt":"2026-10-28T17:34:12","slug":"html-5","status":"publish","type":"post","link":"https:\/\/webmister.pro\/de\/html-5\/","title":{"rendered":"HTML5-Tags: Referenz mit Beispielen"},"content":{"rendered":"<p>HTML-Tags sind keine Liste zum Auswendiglernen, sondern ein Werkzeug, um Bedeutung auszuzeichnen. Browser, Suchmaschinen-Crawler und Screenreader lesen dieselbe Seite auf unterschiedliche Weise, und das Einzige, worauf sie sich alle st\u00fctzen, sind die gew\u00e4hlten Tags. Im Folgenden stehen alle aktuellen HTML5-Tags: was jedes bedeutet, wann es passt, welches Tag ein veraltetes abgel\u00f6st hat und welche Fehler im Markup am h\u00e4ufigsten vorkommen.<\/p>\n<nav class=\"wppub-toc\" aria-label=\"Inhaltsverzeichnis\">\n<p class=\"wppub-toc__title\">Inhaltsverzeichnis<\/p>\n<ul class=\"wppub-toc__list\">\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#wie-ein-html-dokument-aufgebaut-ist\">Wie ein HTML-Dokument aufgebaut ist<\/a>\n<ul class=\"wppub-toc__list wppub-toc__list--sub\">\n<li class=\"wppub-toc__item wppub-toc__item--sub\"><a class=\"wppub-toc__link\" href=\"#block-und-inline-elemente\">Block- und Inline-Elemente<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#semantische-seitenstruktur\">Semantische Seitenstruktur<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#text-uberschriften-absatze-und-hervorhebungen\">Text: \u00dcberschriften, Abs\u00e4tze und Hervorhebungen<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#listen\">Listen<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#links-und-navigation\">Links und Navigation<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#bilder-video-und-audio\">Bilder, Video und Audio<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#tabellen\">Tabellen<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#formulare-und-eingabefelder\">Formulare und Eingabefelder<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#interaktive-elemente-ohne-javascript\">Interaktive Elemente ohne JavaScript<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#technische-tags-im\">Technische Tags im &lt;head&gt;<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#veraltete-tags-und-ihr-ersatz\">Veraltete Tags und ihr Ersatz<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#haufige-fehler-im-markup\">H\u00e4ufige Fehler im Markup<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#wie-man-das-markup-pruft\">Wie man das Markup pr\u00fcft<\/a><\/li>\n<li class=\"wppub-toc__item\"><a class=\"wppub-toc__link\" href=\"#das-wichtigste-in-kurze\">Das Wichtigste in K\u00fcrze<\/a><\/li>\n<\/ul>\n<\/nav>\n<h2 id=\"wie-ein-html-dokument-aufgebaut-ist\">Wie ein HTML-Dokument aufgebaut ist<\/h2>\n<p>Jede Seite ist ein Baum. Der Baum hat eine Wurzel, <code>&lt;html&gt;<\/code>, und zwei \u00c4ste: <code>&lt;head&gt;<\/code> mit technischen Angaben und <code>&lt;body&gt;<\/code> mit dem, was der Besucher sieht. Alles Weitere verschachtelt sich in diese beiden \u00c4ste, und genau die Verschachtelung bestimmt, wie der Browser das DOM aufbaut und worauf CSS seine Stile anwendet.<\/p>\n<p>Ein minimales g\u00fcltiges HTML5-Dokument sieht so aus:<\/p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"de\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n    &lt;title&gt;Seitentitel&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hallo&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Vier Zeilen daraus sollte man verstehen. <code>&lt;!DOCTYPE html&gt;<\/code> schaltet den Browser in den Standardmodus \u2014 ohne ihn greift der Kompatibilit\u00e4tsmodus f\u00fcr zwanzig Jahre alte Dokumente, und die Berechnung der Boxgr\u00f6\u00dfen \u00e4ndert sich. Das Attribut <code>lang<\/code> nennt Suchmaschine und Sprachausgabe die Sprache des Textes. <code>&lt;meta charset=\"UTF-8\"&gt;<\/code> muss innerhalb der ersten 1024 Bytes stehen, sonst werden Sonderzeichen zu Fragezeichen. <code>&lt;meta name=\"viewport\"&gt;<\/code> sorgt daf\u00fcr, dass die Seite auf dem Handy nicht als \u201egesamte Desktop-Breite in Winzschrift\u201c erscheint.<\/p>\n<figure><svg viewbox=\"0 0 900 446\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0414\u0435\u0440\u0435\u0432\u043e HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430: \u043a\u043e\u0440\u0435\u043d\u044c html, \u0432\u0435\u0442\u0432\u0438 head \u0438 body \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><rect fill=\"#1B2B33\" stroke=\"#30738E\" stroke-width=\"1.5\" x=\"350\" y=\"14\" width=\"200\" height=\"46\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"36\" text-anchor=\"middle\">&lt;html lang=\"ru\"&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"52\" text-anchor=\"middle\">Dokumentwurzel<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M450 60 L450 86 M230 86 L670 86 M230 86 L230 110 M670 86 L670 110\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"130\" y=\"110\" width=\"200\" height=\"44\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"230\" y=\"131\" text-anchor=\"middle\">&lt;head&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"230\" y=\"147\" text-anchor=\"middle\">technische Angaben<\/text><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"570\" y=\"110\" width=\"200\" height=\"44\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"670\" y=\"131\" text-anchor=\"middle\">&lt;body&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"670\" y=\"147\" text-anchor=\"middle\">sichtbarer Inhalt<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M160 154 L160 384 M160 182 L200 182 M160 232 L200 232 M160 282 L200 282 M160 332 L200 332 M160 382 L200 382\"><\/path><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"164\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"187\">&lt;meta charset&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"214\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"237\">&lt;meta viewport&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"264\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"287\">&lt;title&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"314\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"337\">&lt;link rel&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"200\" y=\"364\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"214\" y=\"387\">&lt;script&gt;<\/text><path stroke=\"#4A4A4A\" stroke-width=\"1.5\" fill=\"none\" d=\"M600 154 L600 334 M600 182 L640 182 M600 232 L640 232 M600 282 L640 282 M600 332 L640 332\"><\/path><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"164\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"187\">&lt;header&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"214\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"237\">&lt;main&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"264\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"287\">&lt;aside&gt;<\/text><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"640\" y=\"314\" width=\"180\" height=\"36\" rx=\"2\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"17px\" font-family=\"Roboto, Arial, sans-serif\" x=\"654\" y=\"337\">&lt;footer&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"430\" text-anchor=\"middle\">Die Verschachtelung ist die DOM-Struktur: genau danach baut der Browser den Baum<\/text><\/svg><figcaption>Der Baum des HTML-Dokuments: eine Wurzel und zwei \u00c4ste \u2014 technisch und sichtbar<\/figcaption><\/figure>\n<h3 id=\"block-und-inline-elemente\">Block- und Inline-Elemente<\/h3>\n<p>Historisch wurden Tags in Block- (<code>div<\/code>, <code>p<\/code>, <code>section<\/code>) und Inline-Elemente (<code>span<\/code>, <code>a<\/code>, <code>strong<\/code>) geteilt. Die HTML5-Spezifikation ersetzte das durch Inhaltskategorien, in der Praxis bleibt der Unterschied aber bestehen: ein Blockelement nimmt die volle verf\u00fcgbare Breite und beginnt in einer neuen Zeile, ein Inline-Element flie\u00dft im Text mit. Eine Verschachtelungsregel ist wichtig: ein Inline-Element darf kein Blockelement enthalten. Die einzige Ausnahme ist <code>&lt;a&gt;<\/code>, das in HTML5 ganze Bl\u00f6cke umschlie\u00dfen darf \u2014 praktisch, wenn eine komplette Produktkarte ein Link sein soll.<\/p>\n<h2 id=\"semantische-seitenstruktur\">Semantische Seitenstruktur<\/h2>\n<p>Vor HTML5 bestand eine typische Seite aus ineinander verschachtelten <code>&lt;div&gt;<\/code>-Elementen mit Klassen wie <code>header<\/code>, <code>menu<\/code>, <code>content<\/code>, <code>sidebar<\/code>. Eine Maschine wusste nicht, was diese Klassen bedeuten \u2014 f\u00fcr sie waren es gleiche, namenlose Kisten. Semantische Tags gaben jedem Seitenteil einen eigenen Namen.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Tabelle, horizontal scrollbar\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>Was es auszeichnet<\/th>\n<th>Wie oft pro Seite<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;header&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Seitenkopf oder einleitender Teil eines Abschnitts: Logo, \u00dcberschrift, Suche<\/td>\n<td data-label=\"Wie oft pro Seite\">Beliebig oft \u2014 einer f\u00fcr die Seite, einer je Artikel<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;nav&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Navigationsblock: Hauptmen\u00fc, Brotkrumen, Seitenzahlen<\/td>\n<td data-label=\"Wie oft pro Seite\">Mehrere, aber nur f\u00fcr bedeutsame Linkgruppen<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;main&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Der Hauptinhalt der Seite, f\u00fcr sie einzigartig<\/td>\n<td data-label=\"Wie oft pro Seite\">Genau einmal<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;article&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Eigenst\u00e4ndige Einheit: Artikel, Produktkarte, Kommentar<\/td>\n<td data-label=\"Wie oft pro Seite\">Beliebig oft<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;section&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Thematischer Abschnitt mit eigener \u00dcberschrift<\/td>\n<td data-label=\"Wie oft pro Seite\">Beliebig oft<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;aside&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Nebeninhalt: Sidebar, Randnotiz, Block \u201eLesen Sie auch\u201c<\/td>\n<td data-label=\"Wie oft pro Seite\">Beliebig oft<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;footer&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Seitenfu\u00df oder Abschluss eines Abschnitts: Copyright, Autor, Datum<\/td>\n<td data-label=\"Wie oft pro Seite\">Beliebig oft<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;div&gt;<\/code><\/td>\n<td data-label=\"Was es auszeichnet\">Block ohne eigene Bedeutung \u2014 nur f\u00fcr Layout und Gruppierung<\/td>\n<td data-label=\"Wie oft pro Seite\">Wenn kein semantisches Tag passt<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Der Unterschied zwischen <code>&lt;article&gt;<\/code> und <code>&lt;section&gt;<\/code> verwirrt am meisten. Die Pr\u00fcfung ist einfach: L\u00e4sst sich ein Fragment aus der Seite schneiden, separat ver\u00f6ffentlichen und beh\u00e4lt es seinen Sinn, dann ist es ein <code>&lt;article&gt;<\/code>. Ist es nur ein inhaltlicher Teil von etwas Gr\u00f6\u00dferem, dann ein <code>&lt;section&gt;<\/code>. Ein Blogbeitrag ist ein article. Der Abschnitt \u201eTechnische Daten\u201c in einer Produktbeschreibung ist eine section.<\/p>\n<p>Eine typische Blogseite wird so ausgezeichnet:<\/p>\n<pre><code>&lt;body&gt;\n  &lt;header&gt;\n    &lt;a href=\"\/\"&gt;Logo&lt;\/a&gt;\n    &lt;nav&gt;&lt;a href=\"\/blog\/\"&gt;Blog&lt;\/a&gt; &lt;a href=\"\/contacts\/\"&gt;Kontakt&lt;\/a&gt;&lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;main&gt;\n    &lt;article&gt;\n      &lt;h1&gt;Artikel\u00fcberschrift&lt;\/h1&gt;\n      &lt;p&gt;Artikeltext\u2026&lt;\/p&gt;\n      &lt;section&gt;\n        &lt;h2&gt;Abschnitt des Artikels&lt;\/h2&gt;\n        &lt;p&gt;\u2026&lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;footer&gt;Autor, Ver\u00f6ffentlichungsdatum&lt;\/footer&gt;\n    &lt;\/article&gt;\n  &lt;\/main&gt;\n\n  &lt;aside&gt;\u00c4hnliche Beitr\u00e4ge&lt;\/aside&gt;\n\n  &lt;footer&gt;\u00a9 2026&lt;\/footer&gt;\n&lt;\/body&gt;<\/code><\/pre>\n<figure><svg viewbox=\"0 0 900 560\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0421\u0445\u0435\u043c\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b: header \u0441 nav, main \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u0451\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u043c\u0438, aside, footer\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"20\" y=\"14\" width=\"860\" height=\"76\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"38\">&lt;header&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"56\">Kopfbereich<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"430\" y=\"28\" width=\"434\" height=\"48\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"446\" y=\"50\">&lt;nav&gt;<\/text><rect fill=\"#2E404F\" x=\"520\" y=\"44\" width=\"70\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"604\" y=\"44\" width=\"90\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"708\" y=\"44\" width=\"60\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"782\" y=\"44\" width=\"66\" height=\"16\" rx=\"2\"><\/rect><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1.5\" x=\"20\" y=\"104\" width=\"600\" height=\"356\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"128\">&lt;main&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"92\" y=\"128\">\u2014 einmal pro Seite<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"36\" y=\"140\" width=\"568\" height=\"304\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"52\" y=\"164\">&lt;article&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"128\" y=\"164\">\u2014 eigenst\u00e4ndige Einheit<\/text><rect fill=\"#2E404F\" x=\"52\" y=\"178\" width=\"340\" height=\"22\" rx=\"2\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"400\" y=\"195\">&lt;h1&gt;<\/text><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"52\" y=\"214\" width=\"536\" height=\"100\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"68\" y=\"238\">&lt;section&gt;<\/text><rect fill=\"#2E404F\" x=\"68\" y=\"250\" width=\"220\" height=\"14\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"272\" width=\"504\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"290\" width=\"440\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"52\" y=\"326\" width=\"536\" height=\"100\" rx=\"2\"><\/rect><text fill=\"#CBCBCB\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"68\" y=\"350\">&lt;section&gt;<\/text><rect fill=\"#2E404F\" x=\"68\" y=\"362\" width=\"260\" height=\"14\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"384\" width=\"504\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"68\" y=\"402\" width=\"470\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"636\" y=\"104\" width=\"244\" height=\"356\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"128\">&lt;aside&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"146\">Nebeninhalt<\/text><rect fill=\"#2E404F\" x=\"652\" y=\"166\" width=\"212\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"652\" y=\"188\" width=\"180\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"652\" y=\"210\" width=\"196\" height=\"12\" rx=\"2\"><\/rect><rect fill=\"#1B1E22\" stroke=\"#4A4A4A\" stroke-width=\"1\" x=\"652\" y=\"244\" width=\"212\" height=\"90\" rx=\"2\"><\/rect><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"668\" y=\"268\">Lesen Sie auch<\/text><rect fill=\"#2E404F\" x=\"668\" y=\"282\" width=\"180\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#2E404F\" x=\"668\" y=\"300\" width=\"150\" height=\"10\" rx=\"2\"><\/rect><rect fill=\"#16181B\" stroke=\"#3B3B3B\" stroke-width=\"1\" x=\"20\" y=\"474\" width=\"860\" height=\"66\" rx=\"2\"><\/rect><text fill=\"#30738E\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"500\">&lt;footer&gt;<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"520\">Fu\u00dfbereich: Copyright, Kontakte, Service-Links<\/text><\/svg><figcaption>Semantisches Markup einer typischen Seite: jeder Bereich mit eigenem Tag benannt<\/figcaption><\/figure>\n<p>Der Gewinn ist nicht abstrakt. Ein Screenreader l\u00e4sst blinde Besucher direkt zu <code>main<\/code> springen und das Men\u00fc \u00fcberspringen. Der Lesemodus des Browsers erkennt <code>article<\/code> und zeigt nur den Text. Der Crawler erkennt genauer, wo der eigentliche Inhalt steht und wo das auf allen Seiten wiederholte Beiwerk beginnt.<\/p>\n<h2 id=\"text-uberschriften-absatze-und-hervorhebungen\">Text: \u00dcberschriften, Abs\u00e4tze und Hervorhebungen<\/h2>\n<p>Diese Tags nutzt man t\u00e4glich \u2014 und gerade bei ihnen wird Aussehen am h\u00e4ufigsten mit Bedeutung verwechselt.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Tabelle, horizontal scrollbar\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>Zweck<\/th>\n<th>Anmerkung<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;h1&gt;<\/code>\u2026<code>&lt;h6&gt;<\/code><\/td>\n<td data-label=\"Zweck\">\u00dcberschriften in sechs Ebenen<\/td>\n<td data-label=\"Anmerkung\">Ein <code>h1<\/code> pro Seite, keine Ebene \u00fcberspringen<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;p&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Textabsatz<\/td>\n<td data-label=\"Anmerkung\">Darf keine Blockelemente enthalten<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;br&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Zeilenumbruch<\/td>\n<td data-label=\"Anmerkung\">Nur innerhalb einer Zeile \u2014 Abst\u00e4nde macht CSS<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;hr&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Inhaltlicher Bruch zwischen Themen<\/td>\n<td data-label=\"Anmerkung\">Keine Zierlinie, daf\u00fcr gibt es <code>border<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;strong&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Wichtigkeit des Inhalts<\/td>\n<td data-label=\"Anmerkung\">Sieht aus wie <code>b<\/code>, bedeutet aber \u201edas z\u00e4hlt\u201c<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;em&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Betonung<\/td>\n<td data-label=\"Anmerkung\">Die Sprachausgabe \u00e4ndert die Intonation<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;b&gt;<\/code>, <code>&lt;i&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Hervorhebung ohne zus\u00e4tzliche Bedeutung<\/td>\n<td data-label=\"Anmerkung\">Fachbegriff, Schiffsname, Fremdwort<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;mark&gt;<\/code><\/td>\n<td data-label=\"Zweck\">F\u00fcr den Leser relevante Markierung<\/td>\n<td data-label=\"Anmerkung\">Treffer bei der Suche auf der Seite<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;small&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Kleingedrucktes<\/td>\n<td data-label=\"Anmerkung\">Haftungsausschluss, Copyright<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;s&gt;<\/code>, <code>&lt;del&gt;<\/code>, <code>&lt;ins&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Nicht mehr g\u00fcltig, gel\u00f6scht und eingef\u00fcgt<\/td>\n<td data-label=\"Anmerkung\">Alter Preis ist <code>s<\/code>, Dokument\u00e4nderungen <code>del<\/code> und <code>ins<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;sub&gt;<\/code>, <code>&lt;sup&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Tief- und Hochstellung<\/td>\n<td data-label=\"Anmerkung\">Formeln, Fu\u00dfnoten<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;abbr&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Abk\u00fcrzung mit Erkl\u00e4rung im <code>title<\/code><\/td>\n<td data-label=\"Anmerkung\">Die Erkl\u00e4rung erscheint beim \u00dcberfahren<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;time&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Datum oder Uhrzeit maschinenlesbar<\/td>\n<td data-label=\"Anmerkung\">Attribut <code>datetime=\"2026-10-28\"<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;blockquote&gt;<\/code>, <code>&lt;q&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Block- und Inline-Zitat<\/td>\n<td data-label=\"Anmerkung\">Quelle im Attribut <code>cite<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;code&gt;<\/code>, <code>&lt;pre&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Codefragment und vorformatierter Text<\/td>\n<td data-label=\"Anmerkung\">Zusammen ergeben sie einen Codeblock mit Einr\u00fcckung<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;kbd&gt;<\/code>, <code>&lt;samp&gt;<\/code>, <code>&lt;var&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Tasten, Programmausgabe, Variable<\/td>\n<td data-label=\"Anmerkung\">Dokumentation und technische Texte<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;span&gt;<\/code><\/td>\n<td data-label=\"Zweck\">Inline-Container ohne Bedeutung<\/td>\n<td data-label=\"Anmerkung\">Wenn nur ein Angriffspunkt f\u00fcr Stile n\u00f6tig ist<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Der Unterschied zwischen <code>&lt;strong&gt;<\/code> und <code>&lt;b&gt;<\/code> liegt in der Bedeutung, nicht im Schnitt. \u201eAchtung: der Server startet neu\u201c ist <code>strong<\/code>, weil der Satz wichtig ist. Ein Produktname, aus typografischer Gewohnheit fett gesetzt, ist <code>b<\/code>. Ebenso bei <code>&lt;em&gt;<\/code> und <code>&lt;i&gt;<\/code>: das erste \u00e4ndert den Sinn des Satzes, das zweite neigt nur die Schrift.<\/p>\n<p>F\u00fcr \u00dcberschriften gilt eine Regel, die st\u00e4ndig gebrochen wird: die Ebenen bilden die Gliederung des Dokuments, nicht eine Auswahl von Schriftgr\u00f6\u00dfen. Folgt auf <code>h2<\/code> ein <code>h4<\/code>, entsteht ein Loch in der Struktur. Kleinere Schrift ist Aufgabe von CSS und kein Grund, eine Ebene tiefer zu greifen.<\/p>\n<h2 id=\"listen\">Listen<\/h2>\n<p>HTML kennt drei Listen, jede f\u00fcr ihren Zweck.<\/p>\n<pre><code>&lt;ul&gt;                        &lt;!-- ungeordnet, Reihenfolge egal --&gt;\n  &lt;li&gt;Erster Punkt&lt;\/li&gt;\n  &lt;li&gt;Zweiter Punkt&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;ol start=\"3\" reversed&gt;      &lt;!-- geordnet, Reihenfolge z\u00e4hlt --&gt;\n  &lt;li&gt;Der dritte&lt;\/li&gt;\n&lt;\/ol&gt;\n\n&lt;dl&gt;                         &lt;!-- Beschreibungsliste --&gt;\n  &lt;dt&gt;HTML&lt;\/dt&gt;\n  &lt;dd&gt;Auszeichnungssprache f\u00fcr Dokumente&lt;\/dd&gt;\n  &lt;dt&gt;CSS&lt;\/dt&gt;\n  &lt;dd&gt;Sprache zur Beschreibung der Darstellung&lt;\/dd&gt;\n&lt;\/dl&gt;<\/code><\/pre>\n<p><code>&lt;ol&gt;<\/code> hat n\u00fctzliche Attribute, die oft vergessen werden: <code>start<\/code> setzt den Anfang der Nummerierung, <code>reversed<\/code> dreht sie um, <code>type<\/code> wechselt zu Buchstaben oder r\u00f6mischen Zahlen. Die Beschreibungsliste <code>&lt;dl&gt;<\/code> passt hervorragend zu Glossaren, Produktdaten und FAQ-Bl\u00f6cken: Paare aus Begriff und Beschreibung liest die Maschine als zusammengeh\u00f6rig, anders als zwei benachbarte Abs\u00e4tze.<\/p>\n<p>Ein Seitenmen\u00fc ist ebenfalls eine Liste. Nur durch Leerzeichen getrennte Links liest ein Screenreader als fortlaufenden Text; eine Liste k\u00fcndigt er als \u201eNavigation, 5 Eintr\u00e4ge\u201c an.<\/p>\n<h2 id=\"links-und-navigation\">Links und Navigation<\/h2>\n<p><code>&lt;a&gt;<\/code> ist das zentrale Tag des Hypertexts, und einige Attribute sollte man auswendig kennen.<\/p>\n<pre><code>&lt;a href=\"\/blog\/\"&gt;Interner Link&lt;\/a&gt;\n&lt;a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener noreferrer\"&gt;Extern&lt;\/a&gt;\n&lt;a href=\"#section-2\"&gt;Anker auf derselben Seite&lt;\/a&gt;\n&lt;a href=\"mailto:info@example.com\"&gt;E-Mail&lt;\/a&gt;\n&lt;a href=\"tel:+380675024584\"&gt;Anrufen&lt;\/a&gt;\n&lt;a href=\"\/price.pdf\" download&gt;Preisliste laden&lt;\/a&gt;<\/code><\/pre>\n<p><code>target=\"_blank\"<\/code> ohne <code>rel=\"noopener\"<\/code> ist eine alte Sicherheitsl\u00fccke: die ge\u00f6ffnete Seite erh\u00e4lt Zugriff auf <code>window.opener<\/code> und kann den urspr\u00fcnglichen Tab austauschen. Moderne Browser erg\u00e4nzen <code>noopener<\/code> selbst, sich in fremder Umgebung darauf zu verlassen ist dennoch unklug.<\/p>\n<p><code>rel<\/code> tr\u00e4gt auch SEO-Bedeutung: <code>rel=\"nofollow\"<\/code> sagt der Suchmaschine, kein Gewicht weiterzugeben, <code>rel=\"sponsored\"<\/code> kennzeichnet bezahlte Links, <code>rel=\"ugc\"<\/code> solche aus Nutzerinhalten. Der Linktext selbst muss aussagekr\u00e4ftig sein: \u201emehr\u201c und \u201ehier\u201c sind f\u00fcr Suchmaschine wie f\u00fcr jemanden, der die Seite per Screenreader h\u00f6rt und eine Linkliste ohne umgebenden Text bekommt, gleicherma\u00dfen nutzlos.<\/p>\n<h2 id=\"bilder-video-und-audio\">Bilder, Video und Audio<\/h2>\n<p>Ein Bild in HTML ist mehr als <code>&lt;img&gt;<\/code>. Um es herum steht eine ganze Tag-Familie, die zwei Aufgaben l\u00f6st: das Bild zu beschriften und dem Browser eine passend schwere Datei zu liefern.<\/p>\n<pre><code>&lt;figure&gt;\n  &lt;img src=\"\/img\/scheme.webp\"\n       alt=\"Schema der Struktur eines HTML-Dokuments\"\n       width=\"1200\" height=\"630\"\n       loading=\"lazy\" decoding=\"async\"&gt;\n  &lt;figcaption&gt;Der Dokumentbaum: eine Wurzel und zwei \u00c4ste&lt;\/figcaption&gt;\n&lt;\/figure&gt;<\/code><\/pre>\n<p>Das Attribut <code>alt<\/code> ist immer Pflicht. Es beschreibt den Inhalt f\u00fcr alle, die das Bild nicht sehen, und erscheint, wenn die Datei nicht l\u00e4dt. F\u00fcr rein dekorative Bilder schreibt man ein leeres <code>alt=\"\"<\/code> \u2014 dann \u00fcberspringt der Screenreader es, w\u00e4hrend ein fehlendes Attribut ihn den Dateinamen vorlesen l\u00e4sst. <code>width<\/code> und <code>height<\/code> dienen nicht der Gr\u00f6\u00dfe, sondern der Platzreservierung: ohne sie springt die Seite beim Laden, was den Cumulative Layout Shift in den Core Web Vitals direkt verschlechtert. <code>loading=\"lazy\"<\/code> verschiebt Bilder au\u00dferhalb des Sichtbereichs.<\/p>\n<p>Wenn verschiedene Bildschirme verschiedene Dateien brauchen, kommt <code>&lt;picture&gt;<\/code> ins Spiel:<\/p>\n<pre><code>&lt;picture&gt;\n  &lt;source srcset=\"\/img\/hero.avif\" type=\"image\/avif\"&gt;\n  &lt;source srcset=\"\/img\/hero.webp\" type=\"image\/webp\"&gt;\n  &lt;img src=\"\/img\/hero.jpg\" alt=\"Beschreibung\"&gt;\n&lt;\/picture&gt;<\/code><\/pre>\n<p>Der Browser nimmt das erste Format, das er versteht, und h\u00f6rt dort auf. Ein alter Browser landet bei <code>&lt;img&gt;<\/code> und bekommt das JPEG. Derselbe Kniff mit dem Attribut <code>media<\/code> zeigt am Handy ein Hochformat und am Desktop ein Querformat.<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Tabelle, horizontal scrollbar\">\n<table>\n<thead>\n<tr>\n<th>Tag<\/th>\n<th>Wof\u00fcr<\/th>\n<th>Wichtige Attribute<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Tag\"><code>&lt;img&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Bild<\/td>\n<td data-label=\"Wichtige Attribute\"><code>src<\/code>, <code>alt<\/code>, <code>srcset<\/code>, <code>sizes<\/code>, <code>loading<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;picture&gt;<\/code>, <code>&lt;source&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Dateiwahl nach Format und Bildschirm<\/td>\n<td data-label=\"Wichtige Attribute\"><code>type<\/code>, <code>media<\/code>, <code>srcset<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;figure&gt;<\/code>, <code>&lt;figcaption&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Abbildung mit Bildunterschrift<\/td>\n<td data-label=\"Wichtige Attribute\">\u2014<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;video&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Video in der Seite<\/td>\n<td data-label=\"Wichtige Attribute\"><code>controls<\/code>, <code>poster<\/code>, <code>muted<\/code>, <code>playsinline<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;audio&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Ton<\/td>\n<td data-label=\"Wichtige Attribute\"><code>controls<\/code>, <code>preload<\/code>, <code>loop<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;track&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Untertitel zum Video<\/td>\n<td data-label=\"Wichtige Attribute\"><code>kind<\/code>, <code>srclang<\/code>, <code>label<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;canvas&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Zeichenfl\u00e4che f\u00fcr Skripte<\/td>\n<td data-label=\"Wichtige Attribute\"><code>width<\/code>, <code>height<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;svg&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Vektorgrafik direkt im Markup<\/td>\n<td data-label=\"Wichtige Attribute\"><code>viewBox<\/code>, <code>role<\/code>, <code>aria-label<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Tag\"><code>&lt;iframe&gt;<\/code><\/td>\n<td data-label=\"Wof\u00fcr\">Eingebettetes fremdes Dokument<\/td>\n<td data-label=\"Wichtige Attribute\"><code>loading<\/code>, <code>sandbox<\/code>, <code>allow<\/code>, <code>title<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Autoplay funktioniert nur als <code>autoplay muted playsinline<\/code> \u2014 ohne <code>muted<\/code> blockiert der mobile Browser es. Einem <code>&lt;iframe&gt;<\/code> sollte stets ein <code>title<\/code> mitgegeben werden: der Screenreader k\u00fcndigt den Rahmen damit an, sonst h\u00f6rt der Besucher einen namenlosen \u201eeingebetteten Bereich\u201c.<\/p>\n<h2 id=\"tabellen\">Tabellen<\/h2>\n<p>Tabellen sind zur\u00fcck im Einsatz, seit man sie nicht mehr f\u00fcr Layout verwendet. F\u00fcr echte tabellarische Daten gibt es keine Alternative \u2014 ausgezeichnet werden m\u00fcssen sie aber vollst\u00e4ndig.<\/p>\n<pre><code>&lt;table&gt;\n  &lt;caption&gt;Hosting-Tarife&lt;\/caption&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;&lt;th scope=\"col\"&gt;Tarif&lt;\/th&gt;&lt;th scope=\"col\"&gt;Speicher&lt;\/th&gt;&lt;th scope=\"col\"&gt;Preis&lt;\/th&gt;&lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;&lt;th scope=\"row\"&gt;Start&lt;\/th&gt;&lt;td&gt;10 GB&lt;\/td&gt;&lt;td&gt;3 $&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;th scope=\"row\"&gt;Business&lt;\/th&gt;&lt;td&gt;50 GB&lt;\/td&gt;&lt;td&gt;9 $&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;\/tbody&gt;\n  &lt;tfoot&gt;\n    &lt;tr&gt;&lt;td colspan=\"3\"&gt;Preise ohne MwSt.&lt;\/td&gt;&lt;\/tr&gt;\n  &lt;\/tfoot&gt;\n&lt;\/table&gt;<\/code><\/pre>\n<p>Drei Dinge unterscheiden eine ausgezeichnete Tabelle von einem Raster aus Zellen. <code>&lt;caption&gt;<\/code> gibt ihr einen Namen, der zuerst vorgelesen wird. <code>&lt;th&gt;<\/code> mit <code>scope<\/code> erkl\u00e4rt die Zelle zur Spalten- oder Zeilen\u00fcberschrift, sodass der Screenreader beim Wandern durch die Zellen sagt: \u201eBusiness, Preis, 9 Dollar\u201c. Die Trennung in <code>&lt;thead&gt;<\/code>, <code>&lt;tbody&gt;<\/code> und <code>&lt;tfoot&gt;<\/code> erlaubt dem Browser, den Kopf beim Druck langer Tabellen zu wiederholen und den K\u00f6rper getrennt zu scrollen.<\/p>\n<p>Auf schmalem Bildschirm ist eine breite Tabelle stets ein Problem. Zwei L\u00f6sungen funktionieren: in einen Container mit <code>overflow-x: auto<\/code> packen und scrollen lassen, oder die Zeilen per CSS zu Karten umbauen und die Spalten\u00fcberschriften aus <code>data-label<\/code> holen. Beides h\u00e4lt das Markup korrekt \u2014 kaputt macht die Tabelle erst der Versuch, sie durch kleinere Schrift in die Bildschirmbreite zu quetschen.<\/p>\n<h2 id=\"formulare-und-eingabefelder\">Formulare und Eingabefelder<\/h2>\n<p>Formulare sind die gr\u00f6\u00dfte Tag-Gruppe und der einzige Ort, an dem HTML nicht nur zeigt, sondern Daten sammelt.<\/p>\n<pre><code>&lt;form action=\"\/send\/\" method=\"post\"&gt;\n  &lt;fieldset&gt;\n    &lt;legend&gt;Anfrage&lt;\/legend&gt;\n\n    &lt;label for=\"name\"&gt;Name&lt;\/label&gt;\n    &lt;input type=\"text\" id=\"name\" name=\"name\" required autocomplete=\"name\"&gt;\n\n    &lt;label for=\"mail\"&gt;E-Mail&lt;\/label&gt;\n    &lt;input type=\"email\" id=\"mail\" name=\"email\" required\n           placeholder=\"you@example.com\" autocomplete=\"email\"&gt;\n\n    &lt;label for=\"plan\"&gt;Tarif&lt;\/label&gt;\n    &lt;select id=\"plan\" name=\"plan\"&gt;\n      &lt;optgroup label=\"Hosting\"&gt;\n        &lt;option value=\"start\"&gt;Start&lt;\/option&gt;\n        &lt;option value=\"pro\" selected&gt;Business&lt;\/option&gt;\n      &lt;\/optgroup&gt;\n    &lt;\/select&gt;\n\n    &lt;label for=\"msg\"&gt;Nachricht&lt;\/label&gt;\n    &lt;textarea id=\"msg\" name=\"message\" rows=\"5\"&gt;&lt;\/textarea&gt;\n\n    &lt;button type=\"submit\"&gt;Senden&lt;\/button&gt;\n  &lt;\/fieldset&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Die Verbindung von <code>&lt;label for&gt;<\/code> mit der <code>id<\/code> des Feldes ist keine Formalie. Sie vergr\u00f6\u00dfert die Klickfl\u00e4che \u2014 ein Klick auf die Beschriftung setzt den Cursor ins Feld \u2014 und sagt dem Screenreader, wonach gefragt wird. Ein Feld ohne Beschriftung, bei dem der <code>placeholder<\/code> diese Rolle \u00fcbernimmt, ist ein verbreiteter Fehler: der Hinweis verschwindet beim ersten Zeichen, und der Besucher wei\u00df nicht mehr, was er ausf\u00fcllt.<\/p>\n<figure><svg viewbox=\"0 0 900 470\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0422\u0438\u043f\u044b \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430 HTML5: text, email, tel, number, date, color, range, checkbox \u0438 radio, file\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"22\">type=\"text\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"42\">Name<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"32\" y=\"75\">Maxim<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"22\">type=\"email\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"42\">E-Mail<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"75\">you@example.com<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"22\">type=\"tel\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"42\">Telefon<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"50\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"632\" y=\"75\">+38 067 502-45-84<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"132\">type=\"number\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"152\">Menge<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"32\" y=\"185\">12<\/text><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M252 174 l8 -8 l8 8 M252 184 l8 8 l8 -8\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"132\">type=\"date\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"152\">Datum<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"185\">28.10.2026<\/text><rect stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" x=\"548\" y=\"170\" width=\"18\" height=\"18\"><\/rect><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M548 176 h18\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"132\">type=\"color\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"152\">Farbe<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"160\" width=\"260\" height=\"38\" rx=\"0\"><\/rect><rect x=\"632\" y=\"168\" width=\"60\" height=\"22\" fill=\"#30738E\" stroke=\"#B3B3B3\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"706\" y=\"185\">#30738E<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"242\">type=\"range\"<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"262\">Budget<\/text><rect x=\"20\" y=\"282\" width=\"260\" height=\"4\" fill=\"#2E404F\"><\/rect><rect x=\"20\" y=\"282\" width=\"150\" height=\"4\" fill=\"#30738E\"><\/rect><circle cx=\"170\" cy=\"284\" r=\"10\" fill=\"#30738E\"><\/circle><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"242\">type=\"checkbox\"<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"262\" width=\"20\" height=\"20\"><\/rect><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M324 272 l5 6 l9 -11\"><\/path><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"352\" y=\"279\">Newsletter erhalten<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"292\" width=\"20\" height=\"20\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"352\" y=\"309\">Einwilligung zur Verarbeitung<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"242\">type=\"radio\"<\/text><circle fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" cx=\"630\" cy=\"272\" r=\"10\"><\/circle><circle cx=\"630\" cy=\"272\" r=\"5\" fill=\"#30738E\"><\/circle><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"278\">Tarif \u201eStart\u201c<\/text><circle fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" cx=\"630\" cy=\"302\" r=\"10\"><\/circle><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"652\" y=\"308\">Tarif \u201eBusiness\u201c<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"352\">type=\"file\"<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"20\" y=\"370\" width=\"260\" height=\"38\"><\/rect><rect x=\"28\" y=\"378\" width=\"118\" height=\"22\" fill=\"#2E404F\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"40\" y=\"395\">Datei w\u00e4hlen<\/text><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"158\" y=\"395\">keine ausgew\u00e4hlt<\/text><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"320\" y=\"352\">&lt;select&gt;<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"320\" y=\"370\" width=\"260\" height=\"38\"><\/rect><text fill=\"#DDDDDD\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"332\" y=\"395\">Business<\/text><path stroke=\"#30738E\" stroke-width=\"2\" fill=\"none\" d=\"M552 384 l8 8 l8 -8\"><\/path><text fill=\"#30738E\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"620\" y=\"352\">&lt;textarea&gt;<\/text><rect fill=\"#232323\" stroke=\"#B3B3B3\" stroke-width=\"1\" x=\"620\" y=\"370\" width=\"260\" height=\"60\"><\/rect><text fill=\"#6E6E6E\" font-weight=\"200\" font-size=\"15px\" font-family=\"Roboto, Arial, sans-serif\" x=\"632\" y=\"392\">Beschreiben Sie die Aufgabe\u2026<\/text><text fill=\"#848484\" font-weight=\"300\" font-size=\"13px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"458\" text-anchor=\"middle\">Der Feldtyp bestimmt die Tastatur am Handy und die eingebaute Pr\u00fcfung<\/text><\/svg><figcaption>Die wichtigsten Feldtypen und wie der Browser sie darstellt<\/figcaption><\/figure>\n<p>Der Feldtyp bestimmt sowohl die Tastatur am Handy als auch die eingebaute Pr\u00fcfung:<\/p>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Tabelle, horizontal scrollbar\">\n<table>\n<thead>\n<tr>\n<th>Wert von <code>type<\/code><\/th>\n<th>Was er bringt<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Wert von type\"><code>text<\/code><\/td>\n<td data-label=\"Was er bringt\">Gew\u00f6hnliche Zeichenkette<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>email<\/code><\/td>\n<td data-label=\"Was er bringt\">Formatpr\u00fcfung der Adresse, Tastatur mit \u201e@\u201c<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>tel<\/code><\/td>\n<td data-label=\"Was er bringt\">Zifferntastatur, keine Formatpr\u00fcfung<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>url<\/code><\/td>\n<td data-label=\"Was er bringt\">Pr\u00fcfung der Webadresse<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>number<\/code>, <code>range<\/code><\/td>\n<td data-label=\"Was er bringt\">Zahl mit Pfeilen und Schieberegler, Attribute <code>min<\/code>, <code>max<\/code>, <code>step<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>date<\/code>, <code>time<\/code>, <code>datetime-local<\/code>, <code>month<\/code>, <code>week<\/code><\/td>\n<td data-label=\"Was er bringt\">Eingebauter Kalender und Uhr<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>password<\/code><\/td>\n<td data-label=\"Was er bringt\">Verdeckte Eingabe<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>search<\/code><\/td>\n<td data-label=\"Was er bringt\">Suchfeld mit L\u00f6schkreuz<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>checkbox<\/code>, <code>radio<\/code><\/td>\n<td data-label=\"Was er bringt\">K\u00e4stchen und Auswahlknopf (gleicher <code>name<\/code> je Gruppe)<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>file<\/code><\/td>\n<td data-label=\"Was er bringt\">Datei-Upload, Attribute <code>accept<\/code> und <code>multiple<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>color<\/code><\/td>\n<td data-label=\"Was er bringt\">Farbw\u00e4hler<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Wert von type\"><code>hidden<\/code><\/td>\n<td data-label=\"Was er bringt\">Technischer Wert, vor dem Besucher verborgen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Die HTML-eigene Validierung l\u00e4uft ohne eine Zeile JavaScript: <code>required<\/code> verbietet das Absenden eines leeren Feldes, <code>minlength<\/code> und <code>maxlength<\/code> begrenzen die L\u00e4nge, <code>pattern<\/code> setzt einen regul\u00e4ren Ausdruck, <code>min<\/code> und <code>max<\/code> die Grenzen von Zahl und Datum. Das ist eine erste Linie, kein Schutz: die serverseitige Pr\u00fcfung ersetzt sie nicht, denn jede Anfrage l\u00e4sst sich am Formular vorbei senden.<\/p>\n<p>Zwei weitere Tags dieser Gruppe verdienen Beachtung. <code>&lt;datalist&gt;<\/code> gibt dem Feld Vorschl\u00e4ge und l\u00e4sst dennoch eigene Werte zu. <code>&lt;output&gt;<\/code> zeigt ein Rechenergebnis \u2014 etwa die Bestellsumme, neu berechnet bei ge\u00e4nderter Menge.<\/p>\n<h2 id=\"interaktive-elemente-ohne-javascript\">Interaktive Elemente ohne JavaScript<\/h2>\n<p>Ein Teil des Verhaltens, f\u00fcr das fr\u00fcher Skripte n\u00f6tig waren, steckt in HTML5 bereits drin.<\/p>\n<pre><code>&lt;details&gt;\n  &lt;summary&gt;Was geh\u00f6rt zur Website-Betreuung?&lt;\/summary&gt;\n  &lt;p&gt;Updates, Sicherungen, Verf\u00fcgbarkeits\u00fcberwachung.&lt;\/p&gt;\n&lt;\/details&gt;\n\n&lt;dialog id=\"modal\"&gt;\n  &lt;p&gt;Anfrage gesendet&lt;\/p&gt;\n  &lt;button onclick=\"modal.close()\"&gt;Schlie\u00dfen&lt;\/button&gt;\n&lt;\/dialog&gt;\n\n&lt;progress value=\"70\" max=\"100\"&gt;70%&lt;\/progress&gt;\n&lt;meter value=\"0.8\" low=\"0.3\" high=\"0.9\"&gt;80%&lt;\/meter&gt;<\/code><\/pre>\n<p><code>&lt;details&gt;<\/code> mit <code>&lt;summary&gt;<\/code> ist ein fertiges Akkordeon: klappt per Klick auf, funktioniert mit der Tastatur, wird von Suchmaschinen indexiert. Ein FAQ-Block auf dieser Basis braucht keine Zeile JavaScript. <code>&lt;dialog&gt;<\/code> ist ein Modalfenster mit korrektem Fokusverhalten: <code>showModal()<\/code> h\u00e4lt den Fokus im Fenster und schlie\u00dft per Escape. <code>&lt;progress&gt;<\/code> zeigt den Fortschritt, <code>&lt;meter&gt;<\/code> einen Wert in bekanntem Bereich, etwa die Speicherbelegung.<\/p>\n<h2 id=\"technische-tags-im\">Technische Tags im <code>&lt;head&gt;<\/code><\/h2>\n<p>Diese Tags sieht der Besucher nie, doch sie entscheiden, wie die Seite in den Suchergebnissen und in sozialen Netzen aussieht.<\/p>\n<pre><code>&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\n  &lt;title&gt;HTML5-Tags: Referenz&lt;\/title&gt;\n  &lt;meta name=\"description\" content=\"Alle aktuellen HTML5-Tags mit Beispielen\"&gt;\n  &lt;link rel=\"canonical\" href=\"https:\/\/example.com\/html5\/\"&gt;\n  &lt;link rel=\"alternate\" hreflang=\"uk\" href=\"https:\/\/example.com\/uk\/html5\/\"&gt;\n  &lt;link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"&gt;\n  &lt;link rel=\"stylesheet\" href=\"\/style.css\"&gt;\n  &lt;meta property=\"og:title\" content=\"HTML5-Tags: Referenz\"&gt;\n  &lt;meta property=\"og:image\" content=\"https:\/\/example.com\/img\/cover.webp\"&gt;\n  &lt;script src=\"\/app.js\" defer&gt;&lt;\/script&gt;\n&lt;\/head&gt;<\/code><\/pre>\n<p><code>&lt;title&gt;<\/code> ist das gewichtigste Textsignal f\u00fcr Suchmaschinen und das, was der Besucher im Tab sieht. <code>&lt;link rel=\"canonical\"&gt;<\/code> nennt die Hauptadresse einer Seite, wenn mehrere URLs mit Parametern zu ihr f\u00fchren. <code>hreflang<\/code> verkn\u00fcpft die Sprachversionen \u2014 f\u00fcr eine mehrsprachige Website Pflicht, sonst zeigt die Suchmaschine die falsche Fassung. Die <code>og:<\/code>-Angaben bestimmen, wie der Link im Messenger und im sozialen Netz erscheint.<\/p>\n<p>Zum Einbinden von Skripten eines: ein <code>&lt;script&gt;<\/code> ohne Attribute h\u00e4lt das Parsen des Dokuments an, bis die Datei geladen und ausgef\u00fchrt ist. <code>defer<\/code> verschiebt die Ausf\u00fchrung ans Ende des Parsens und bewahrt die Reihenfolge, <code>async<\/code> f\u00fchrt sofort nach dem Laden aus und garantiert keine Reihenfolge. F\u00fcr Z\u00e4hler passt <code>async<\/code>, f\u00fcr Anwendungscode <code>defer<\/code>.<\/p>\n<h2 id=\"veraltete-tags-und-ihr-ersatz\">Veraltete Tags und ihr Ersatz<\/h2>\n<p>Browser stellen diese noch dar, die Spezifikation hat sie jedoch gestrichen: ein Teil regelte Gestaltung, die l\u00e4ngst in CSS geh\u00f6rt, ein Teil schadete schlicht.<\/p>\n<figure><svg viewbox=\"0 0 900 430\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"\u0423\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0442\u0435\u0433\u0438 HTML \u0438 \u0438\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043c\u0435\u043d\u044b\" style=\"width:100%;height:auto;max-width:900px;display:block;margin:0 auto 20px\"><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"20\" y=\"24\">WAR \u2014 AUS DER SPEZIFIKATION ENTFERNT<\/text><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"520\" y=\"24\">JETZT \u2014 DER MODERNE ERSATZ<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"40\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"68\">&lt;font size color&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 62 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"40\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"68\">CSS: font-family, font-size, color<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"100\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"128\">&lt;center&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 122 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"100\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"128\">CSS: text-align, margin: 0 auto<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"160\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"188\">&lt;strike&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 182 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"160\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"188\">&lt;s&gt; \u2014 nicht mehr g\u00fcltig, &lt;del&gt; \u2014 gel\u00f6scht<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"220\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"248\">&lt;marquee&gt;, &lt;blink&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 242 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"220\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"248\">CSS-Animation \u2014 und besser ganz ohne<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"280\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"308\">&lt;frameset&gt;, &lt;frame&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 302 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"280\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"308\">Normales Layout, bei Bedarf &lt;iframe&gt;<\/text><rect fill=\"#1E1618\" stroke=\"#5A3B40\" stroke-width=\"1\" x=\"20\" y=\"340\" width=\"330\" height=\"44\"><\/rect><text fill=\"#A98086\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"36\" y=\"368\">&lt;acronym&gt;<\/text><path stroke=\"#30738E\" stroke-width=\"1.5\" fill=\"none\" d=\"M360 362 h150 m-12 -6 l12 6 l-12 6\"><\/path><rect fill=\"#15202A\" stroke=\"#30738E\" stroke-width=\"1\" x=\"520\" y=\"340\" width=\"360\" height=\"44\"><\/rect><text fill=\"#EEEEEE\" font-weight=\"300\" font-size=\"16px\" font-family=\"Roboto, Arial, sans-serif\" x=\"536\" y=\"368\">&lt;abbr title=\"Erkl\u00e4rung\"&gt;<\/text><text fill=\"#848484\" letter-spacing=\"1px\" font-weight=\"400\" font-size=\"14px\" font-family=\"Roboto, Arial, sans-serif\" x=\"450\" y=\"416\" text-anchor=\"middle\" style=\"letter-spacing:0\">Browser zeigen sie noch an, doch Validator und Suchmaschine werten solches Markup als Fehler<\/text><\/svg><figcaption>Die sechs h\u00e4ufigsten veralteten Tags und ihr heutiger Ersatz<\/figcaption><\/figure>\n<div class=\"wm-table-scroll wm-table-cards\" tabindex=\"0\" role=\"region\" aria-label=\"Tabelle, horizontal scrollbar\">\n<table>\n<thead>\n<tr>\n<th>Veraltetes Tag<\/th>\n<th>Was es tat<\/th>\n<th>Ersatz<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;font&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Schrift, Gr\u00f6\u00dfe und Farbe des Textes<\/td>\n<td data-label=\"Ersatz\">CSS: <code>font-family<\/code>, <code>font-size<\/code>, <code>color<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;center&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Zentrierung<\/td>\n<td data-label=\"Ersatz\">CSS: <code>text-align<\/code>, <code>margin: 0 auto<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;big&gt;<\/code>, <code>&lt;tt&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Gro\u00dfe und dicktengleiche Schrift<\/td>\n<td data-label=\"Ersatz\">CSS; f\u00fcr Code <code>&lt;code&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;strike&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Durchgestrichener Text<\/td>\n<td data-label=\"Ersatz\"><code>&lt;s&gt;<\/code> oder <code>&lt;del&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;marquee&gt;<\/code>, <code>&lt;blink&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Laufschrift und Blinken<\/td>\n<td data-label=\"Ersatz\">CSS-Animation, und besser ganz ohne<\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;frame&gt;<\/code>, <code>&lt;frameset&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Aufteilung des Fensters in Rahmen<\/td>\n<td data-label=\"Ersatz\">Normales Layout; bei Bedarf <code>&lt;iframe&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;applet&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Java-Applet<\/td>\n<td data-label=\"Ersatz\">Nicht n\u00f6tig; f\u00fcr externe Inhalte <code>&lt;iframe&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;acronym&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Akronym<\/td>\n<td data-label=\"Ersatz\"><code>&lt;abbr&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\"><code>&lt;dir&gt;<\/code><\/td>\n<td data-label=\"Was es tat\">Verzeichnisliste<\/td>\n<td data-label=\"Ersatz\"><code>&lt;ul&gt;<\/code><\/td>\n<\/tr>\n<tr>\n<td data-label=\"Veraltetes Tag\">Attribute <code>align<\/code>, <code>bgcolor<\/code>, <code>border<\/code>, <code>width<\/code> an Tabellen und Bl\u00f6cken<\/td>\n<td data-label=\"Was es tat\">Gestaltung im Markup<\/td>\n<td data-label=\"Ersatz\">Vollst\u00e4ndig in CSS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Eine eigene Geschichte ist <code>&lt;hgroup&gt;<\/code>. Es wurde aus der Spezifikation entfernt, sp\u00e4ter mit anderer Bedeutung zur\u00fcckgeholt; heute gen\u00fcgt f\u00fcr Titel und Untertitel ein gew\u00f6hnliches <code>&lt;p&gt;<\/code> neben der \u00dcberschrift.<\/p>\n<h2 id=\"haufige-fehler-im-markup\">H\u00e4ufige Fehler im Markup<\/h2>\n<ul>\n<li><strong>Mehrere <code>&lt;h1&gt;<\/code> auf einer Seite.<\/strong> Die \u00dcberschrift erster Ebene beschreibt die ganze Seite, und sie ist einzig. Alles andere liegt eine Ebene tiefer.<\/li>\n<li><strong>Ein Block im Absatz.<\/strong> Ein <code>&lt;div&gt;<\/code> in <code>&lt;p&gt;<\/code> korrigiert der Browser stillschweigend, indem er den Absatz fr\u00fcher schlie\u00dft \u2014 und das Layout verrutscht ohne sichtbaren Grund.<\/li>\n<li><strong><code>&lt;br&gt;<\/code> statt Abst\u00e4nden.<\/strong> Drei Umbr\u00fcche hintereinander versuchen im Markup, was <code>margin<\/code> sauber erledigt.<\/li>\n<li><strong>Bild ohne <code>alt<\/code>.<\/strong> Barrierefreiheit und Bildersuche-Traffic gehen beide verloren.<\/li>\n<li><strong>Ein Button aus <code>&lt;div&gt;<\/code>.<\/strong> So ein \u201eButton\u201c braucht Tastaturbehandlung, <code>role<\/code> und <code>tabindex<\/code>, w\u00e4hrend <code>&lt;button&gt;<\/code> das von Haus aus kann.<\/li>\n<li><strong>Ein Link ohne <code>href<\/code>.<\/strong> Das Element f\u00e4llt aus der Tastaturnavigation. Keine Adresse \u2014 dann <code>&lt;button&gt;<\/code>.<\/li>\n<li><strong>Tabelle als Layout.<\/strong> Auf dem Handy bricht solches Markup nicht um, und der Screenreader liest es als Datentabelle vor.<\/li>\n<li><strong><code>&lt;div&gt;<\/code> statt Semantik.<\/strong> Eine Seite aus lauter <code>div<\/code> funktioniert, verliert aber alles, was Markup mit Bedeutung bringt: schnelle Navigation, Lesemodus, klare Struktur f\u00fcr Suchmaschinen.<\/li>\n<\/ul>\n<h2 id=\"wie-man-das-markup-pruft\">Wie man das Markup pr\u00fcft<\/h2>\n<p>Drei Werkzeuge decken fast alle Fehler ab. Der <a href=\"https:\/\/validator.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">W3C-Validator<\/a> findet nicht geschlossene Tags, falsche Verschachtelung und nicht existierende Attribute. Der Reiter Accessibility in den Entwicklerwerkzeugen zeigt den Accessibility-Baum \u2014 das, was ein Screenreader \u201esieht\u201c. Lighthouse in Chrome pr\u00fcft Semantik zusammen mit Geschwindigkeit und liefert eine Liste konkreter Hinweise.<\/p>\n<p>Eine Selbstpr\u00fcfung ist mehr wert als alle drei: \u00f6ffnen Sie die Seite mit abgeschaltetem CSS. Liest sich das Dokument ohne Stile weiterhin von oben nach unten als sinnvoller Text mit \u00dcberschriften, Listen und Bildunterschriften, ist das Markup richtig. Wird es zum Brei, liegt es nicht an den Stilen, sondern an den Tags.<\/p>\n<h2 id=\"das-wichtigste-in-kurze\">Das Wichtigste in K\u00fcrze<\/h2>\n<p>Beh\u00e4lt man eine Handvoll Regeln im Kopf, ergibt sich der Rest von selbst:<\/p>\n<ul>\n<li><strong>Das Tag wird nach Bedeutung gew\u00e4hlt, nicht nach Aussehen.<\/strong> Das Aussehen jedes Elements \u00e4ndert eine Zeile CSS, die im Tag steckende Bedeutung lesen dagegen Maschinen \u2014 und kein Stylesheet \u00e4ndert sie.<\/li>\n<li><strong>Die Seitenstruktur ist <code>header<\/code>, <code>nav<\/code>, <code>main<\/code>, <code>article<\/code>, <code>section<\/code>, <code>aside<\/code>, <code>footer<\/code>.<\/strong> <code>&lt;div&gt;<\/code> bleibt f\u00fcr F\u00e4lle, in denen keines davon passt \u2014 nicht umgekehrt.<\/li>\n<li><strong>\u00dcberschriften bilden die Gliederung des Dokuments.<\/strong> Ein <code>h1<\/code>, danach der Reihe nach, ohne Ebenen zu \u00fcberspringen.<\/li>\n<li><strong>Drei Attribute, die am h\u00e4ufigsten vergessen werden:<\/strong> <code>alt<\/code> am Bild, <code>for<\/code> an der Feldbeschriftung und <code>title<\/code> am Rahmen. Jedes kostet zwei Minuten und bringt sp\u00fcrbar mehr Barrierefreiheit.<\/li>\n<li><strong>Ein Formular kann sich selbst pr\u00fcfen.<\/strong> Der richtige <code>type<\/code> plus <code>required<\/code> und <code>pattern<\/code> decken den Gro\u00dfteil der Validierung ohne JavaScript ab \u2014 die Pr\u00fcfung auf dem Server ersetzen sie nicht.<\/li>\n<li><strong>Alles zur Gestaltung geh\u00f6rt in CSS.<\/strong> Genau deshalb haben <code>font<\/code>, <code>center<\/code> und ihre Nachbarn die Spezifikation verlassen.<\/li>\n<\/ul>\n<p>Gutes Markup f\u00e4llt kaum auf: die Website funktioniert einfach \u2014 sie l\u00e4dt schnell, liest sich am Handy gut, sieht in den Suchergebnissen und im Messenger richtig aus und ist mit einem Screenreader bedienbar. Schlechtes Markup bemerkt man sofort, behandelt es aber meist an der falschen Stelle: Stile werden geflickt, Skripte eingebunden, Plugins installiert \u2014 w\u00e4hrend die Ursache in zwei, drei falsch gew\u00e4hlten Tags liegt.<\/p>\n<p>Pr\u00fcfen Sie Ihre Seite gleich jetzt: \u00f6ffnen Sie den Quelltext und z\u00e4hlen Sie, wie viele <code>&lt;div&gt;<\/code> darin stehen und wie viele Tags mit Bedeutung. \u00dcberwiegen die ersten im Verh\u00e4ltnis drei zu eins, arbeiten Sie diesen Artikel von oben nach unten durch. Die ganze Website muss daf\u00fcr nicht neu geschrieben werden: meist gen\u00fcgt es, einige Container umzubenennen und die fehlenden Attribute zu erg\u00e4nzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alle aktuellen HTML5-Tags mit Codebeispielen und Schemata: Dokumentstruktur, semantisches Markup, Formulare, Tabellen, Medien und veraltete Tags mit Ersatz.<\/p>\n","protected":false},"author":3,"featured_media":12017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[214],"tags":[],"class_list":["post-11968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts\/11968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/comments?post=11968"}],"version-history":[{"count":2,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts\/11968\/revisions"}],"predecessor-version":[{"id":11980,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/posts\/11968\/revisions\/11980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/media\/12017"}],"wp:attachment":[{"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/media?parent=11968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/categories?post=11968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webmister.pro\/de\/wp-json\/wp\/v2\/tags?post=11968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}