Ratgeber
HTML-Befehle: alle HTML-Tags als Liste, mit Beispiel und PDF (HTML5)
113 Elemente nach dem aktuellen HTML-Standard, sortiert nach Aufgabe. Geprüft am .
HTML-Befehle, genauer HTML-Elemente oder Tags, sagen dem Browser, was ein Inhalt ist: eine Überschrift (<h1>), ein Absatz (<p>), ein Link (<a>) oder ein Bild (<img>). Der aktuelle Standard, der HTML Living Standard der WHATWG, umfasst 113 Elemente; für eine normale Website reichen gut 40 davon. Unten stehen alle, sortiert nach Aufgabe, mit Beispiel, Status und dem Hinweis, welche für Google und KI-Systeme wichtig sind.
Zählweise: <h1> bis <h6> einzeln gezählt, ohne SVG und MathML, die als eigene Sprachen in HTML eingebettet werden. Nicht mitgezählt sind experimentelle Elemente wie <geolocation>, die noch nicht zum Standard gehören.
Quellen: HTML Living Standard der WHATWG und MDN-Referenz der HTML-Elemente, Abruf 25.09.2026
Die Übersicht aller Befehle als PDF zum Ausdrucken: HTML-Befehle als PDF herunterladen
01
Wie sieht das HTML-Grundgerüst einer Seite aus?
Jede HTML-Seite besteht aus der Dokumenttyp-Angabe, dem <html>-Element mit Sprachangabe, einem <head> mit Metadaten und einem <body> mit dem sichtbaren Inhalt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seitentitel: erscheint im Browser-Tab und bei Google</title>
<meta name="description" content="Kurzbeschreibung für das Suchergebnis">
<link rel="canonical" href="https://www.ihredomain.de/seite">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav><!-- Menü --></nav>
</header>
<main>
<h1>Die eine Hauptüberschrift der Seite</h1>
<p>Der erste Absatz beantwortet die Frage, wegen der jemand hier ist.</p>
</main>
<footer><!-- Impressum, Kontakt --></footer>
</body>
</html>Drei Zeilen davon entscheiden mehr über Ihre Sichtbarkeit als jedes Design: lang="de", der <title> und die eine <h1>.
02
Welche HTML-Befehle braucht man wirklich?
Mit den 46 Elementen dieser Tabelle, h1 bis h6 einzeln gezählt, bauen Sie eine vollständige, saubere Website; alle weiteren brauchen Sie nur für Sonderfälle.
| Befehl | Wofür | Beispiel |
|---|---|---|
<html> | Wurzel der Seite, trägt die Sprache | <html lang="de"> |
<head> | Kopf mit Metadaten | <head>…</head> |
<title> | Seitentitel im Tab und im Suchergebnis | <title>Webdesign Offenbach</title> |
<meta> | Zeichensatz, Ansicht, Beschreibung | <meta name="description" content="…"> |
<link> | CSS, Favicon, kanonische Adresse | <link rel="canonical" href="…"> |
<body> | sichtbarer Inhalt | <body>…</body> |
<header> | Kopfbereich | <header>Logo und Menü</header> |
<nav> | Navigation | <nav><a href="/">Start</a></nav> |
<main> | Hauptinhalt, einmal je Seite | <main>…</main> |
<section> | Abschnitt mit eigener Überschrift | <section><h2>Preise</h2>…</section> |
<article> | in sich geschlossener Beitrag | <article><h2>Referenz</h2>…</article> |
<footer> | Fußbereich | <footer>Impressum</footer> |
<h1> bis <h6> | Überschriften, Ebene 1 bis 6 | <h2>Was kostet das?</h2> |
<p> | Absatz | <p>Text</p> |
<a> | Link | <a href="/kontakt">Kontakt</a> |
<img> | Bild | <img src="team.webp" alt="Team im Büro" width="800" height="600"> |
<picture> | Bild in mehreren Formaten oder Größen | <picture><source …><img …></picture> |
<ul>, <ol>, <li> | Liste ohne und mit Nummern | <ul><li>Punkt</li></ul> |
<strong> | wichtig | <strong>Achtung</strong> |
<em> | betont | <em>nicht</em> |
<br> | Zeilenumbruch | Zeile 1<br>Zeile 2 |
<table>, <tr>, <th>, <td> | Tabelle, Zeile, Kopfzelle, Zelle | siehe Abschnitt Tabellen |
<form>, <label>, <input>, <button> | Formular | siehe Abschnitt Formulare |
<details>, <summary> | aufklappbarer Bereich | <details><summary>Frage</summary>Antwort</details> |
<figure>, <figcaption> | Abbildung mit Bildunterschrift | <figure><img …><figcaption>…</figcaption></figure> |
<time> | Datum maschinenlesbar | <time datetime="2026-09-25">25. September 2026</time> |
<span>, <div> | neutrale Container ohne Bedeutung | für Gestaltung mit CSS |
<script> | JavaScript oder strukturierte Daten | <script type="application/ld+json">…</script> |
<iframe> | fremde Inhalte einbetten | Karte, Video |
<video> | Video | <video controls src="film.mp4"></video> |
03
Alle HTML-Elemente nach Aufgabe: die vollständige Liste der HTML-Tags
Die 113 Elemente des HTML-Standards lassen sich elf Aufgaben zuordnen; jede Tabelle unten nennt Element, Bedeutung, Beispiel und Hinweise.
Legende in der Spalte Status: neu = mit HTML5 eingeführt (2008 bis 2014), neu 2023 oder später = seither in den Standard aufgenommen, SEO/KI = für Google und KI-Systeme besonders wichtig.
Dokument und Metadaten 8
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<html> | Wurzelelement der Seite | <html lang="de"> | SEO/KI: Sprache angeben |
<head> | Bereich für Metadaten | <head>…</head> | |
<title> | Titel im Tab und im Suchergebnis | <title>…</title> | SEO/KI |
<meta> | Metadaten wie Zeichensatz, Beschreibung, Robots | <meta name="robots" content="noindex"> | SEO/KI |
<link> | Verweis auf CSS, Favicon, Canonical, Sprachversionen | <link rel="alternate" hreflang="en" href="…"> | SEO/KI |
<style> | CSS direkt im Dokument | <style>h1{…}</style> | |
<base> | Basisadresse für alle relativen Links | <base href="https://…/"> | mit Vorsicht verwenden |
<body> | sichtbarer Inhalt | <body>…</body> |
Seitenaufbau und Gliederung 16
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<header> | Kopfbereich der Seite oder eines Abschnitts | <header>…</header> | neu |
<nav> | Hauptnavigation oder Linkgruppe | <nav>…</nav> | neu |
<main> | Hauptinhalt, einmal sichtbar je Seite | <main>…</main> | neu, SEO/KI |
<article> | in sich geschlossener Inhalt: Beitrag, Produkt, Referenz | <article>…</article> | neu, SEO/KI |
<section> | thematischer Abschnitt mit Überschrift | <section>…</section> | neu |
<aside> | Ergänzung neben dem Hauptinhalt | <aside>Tipp</aside> | neu |
<footer> | Fußbereich | <footer>…</footer> | neu |
<address> | Kontaktangaben zum Betreiber oder Autor | <address>Drela GmbH, Frankfurt</address> | |
<h1> bis <h6> | Überschriften in sechs Ebenen | <h2>…</h2> | SEO/KI: eine H1, keine Sprünge |
<hgroup> | Überschrift mit Unterzeile | <hgroup><h1>…</h1><p>…</p></hgroup> | 2022 neu gefasst |
<search> | Bereich mit Suche oder Filter | <search><form>…</form></search> | neu 2023 |
Textblöcke 14
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<p> | Absatz | <p>…</p> | |
<div> | neutraler Block ohne Bedeutung | <div class="karte">…</div> | |
<hr> | thematischer Wechsel | <hr> | |
<pre> | vorformatierter Text, Leerzeichen bleiben | <pre>…</pre> | |
<blockquote> | längeres Zitat | <blockquote cite="…">…</blockquote> | |
<ul> | Liste ohne Reihenfolge | <ul><li>…</li></ul> | |
<ol> | nummerierte Liste | <ol start="3">…</ol> | |
<li> | Listeneintrag | <li>…</li> | |
<menu> | Liste von Befehlen, etwa eine Werkzeugleiste | <menu><li><button>…</button></li></menu> | |
<dl> | Beschreibungsliste | <dl><dt>SEO</dt><dd>…</dd></dl> | SEO/KI: gut für Definitionen |
<dt> | Begriff in der Beschreibungsliste | <dt>…</dt> | |
<dd> | Beschreibung zum Begriff | <dd>…</dd> | |
<figure> | Abbildung, Grafik, Codebeispiel | <figure>…</figure> | neu |
<figcaption> | Beschriftung einer Abbildung | <figcaption>…</figcaption> | neu, SEO/KI |
Text im Fließtext 29
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<a> | Link | <a href="/preise">Webdesign Preise</a> | SEO/KI: sprechender Linktext |
<strong> | besondere Wichtigkeit | <strong>…</strong> | |
<em> | Betonung | <em>…</em> | |
<b> | hervorgehoben ohne Wichtigkeit, etwa Stichworte | <b>…</b> | |
<i> | abweichende Stimme, Fachbegriff, fremdes Wort | <i lang="en">…</i> | |
<u> | nicht sprachliche Anmerkung, etwa Rechtschreibmarkierung | <u>…</u> | selten sinnvoll |
<s> | nicht mehr zutreffend | <s>99 €</s> 79 € | |
<small> | Kleingedrucktes | <small>zzgl. MwSt.</small> | |
<mark> | markierter Text, etwa Suchtreffer | <mark>…</mark> | neu |
<cite> | Titel eines Werks | <cite>Offenbacher Wirtschaft</cite> | |
<q> | kurzes Zitat im Satz | <q>…</q> | |
<dfn> | Stelle, an der ein Begriff definiert wird | <dfn>Crawling</dfn> ist … | SEO/KI |
<abbr> | Abkürzung | <abbr title="Suchmaschinenoptimierung">SEO</abbr> | |
<time> | Datum oder Uhrzeit, maschinenlesbar | <time datetime="2026-09-25">…</time> | neu, SEO/KI |
<data> | Wert mit maschinenlesbarer Entsprechung | <data value="4711">Artikel 4711</data> | neu |
<code> | Programmcode | <code><p></code> | |
<var> | Variable | <var>x</var> | |
<samp> | Ausgabe eines Programms | <samp>Fehler 404</samp> | |
<kbd> | Tastatureingabe | <kbd>Strg</kbd> + <kbd>C</kbd> | |
<sub> | tiefgestellt | H<sub>2</sub>O | |
<sup> | hochgestellt | m<sup>2</sup> | |
<span> | neutraler Container im Text | <span class="…">…</span> | |
<br> | Zeilenumbruch | …<br>… | |
<wbr> | mögliche Trennstelle in langen Wörtern | Suchmaschinen<wbr>optimierung | neu |
<bdi> | Text mit unbekannter Schreibrichtung isolieren | <bdi>…</bdi> | neu |
<bdo> | Schreibrichtung erzwingen | <bdo dir="rtl">…</bdo> | |
<ruby> | Aussprachehilfe für ostasiatische Schriften | <ruby>漢<rt>kan</rt></ruby> | neu |
<rt> | Ausspracheangabe in ruby | <rt>…</rt> | neu |
<rp> | Ersatzklammern für Browser ohne ruby | <rp>(</rp> | neu |
Zeilenumbruch und Leerzeichen in HTML
Einen Zeilenumbruch innerhalb eines Absatzes setzt <br>, etwa in einer Adresse. Ein geschütztes Leerzeichen schreiben Sie als : Es verhindert, dass zwei Wörter am Zeilenende getrennt werden, etwa zwischen Zahl und Einheit. Abstände zwischen Absätzen regeln Sie mit CSS, nicht mit mehreren <br> oder Leerzeichen.
Änderungen im Text 2
| Element | Bedeutung | Beispiel |
|---|---|---|
<ins> | eingefügter Text | <ins datetime="2026-09-25">…</ins> |
<del> | gelöschter Text | <del>…</del> |
Bilder, Audio und Video 9
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<img> | Bild | <img src="…" alt="…" width="…" height="…" loading="lazy"> | SEO/KI: Alt-Text, Größe angeben |
<picture> | Bild in mehreren Formaten oder Größen | <picture><source type="image/avif" srcset="…"><img …></picture> | neu |
<source> | Quelle für picture, audio, video | <source src="…" type="video/mp4"> | neu |
<audio> | Tondatei | <audio controls src="…"></audio> | neu |
<video> | Video | <video controls poster="…">…</video> | neu |
<track> | Untertitel oder Kapitel für Video | <track kind="subtitles" srclang="de" src="…"> | neu |
<map> | klickbare Bildbereiche | <map name="…">…</map> | |
<area> | einzelner Bereich in map | <area shape="rect" coords="…" href="…" alt="…"> | |
<canvas> | Zeichenfläche für JavaScript | <canvas width="300" height="150"></canvas> | neu |
Eingebettete Inhalte 3
| Element | Bedeutung | Beispiel | Hinweis |
|---|---|---|---|
<iframe> | fremde Seite einbetten, etwa Karte oder Video | <iframe src="…" title="…" loading="lazy"></iframe> | Datenschutz: Dienste erst nach Einwilligung laden |
<embed> | externe Anwendung | <embed src="…" type="…"> | mit HTML5 standardisiert, selten nötig |
<object> | externe Ressource | <object data="…" type="…"></object> | selten nötig |
Tabellen 10
| Element | Bedeutung | Beispiel |
|---|---|---|
<table> | Tabelle | <table>…</table> |
<caption> | Überschrift der Tabelle | <caption>Preise 2026</caption> |
<thead> | Kopfbereich | <thead><tr>…</tr></thead> |
<tbody> | Datenbereich | <tbody>…</tbody> |
<tfoot> | Fußbereich, etwa Summen | <tfoot>…</tfoot> |
<tr> | Zeile | <tr>…</tr> |
<th> | Kopfzelle | <th scope="col">Preis</th> |
<td> | Datenzelle | <td>59,90 €</td> |
<colgroup> | Gruppe von Spalten | <colgroup><col span="2"></colgroup> |
<col> | Spalte zur gemeinsamen Gestaltung | <col class="…"> |
Zahlen und Vergleiche gehören in eine echte Tabelle, nicht in ein Bild. Google und KI-Systeme lesen Tabellen zuverlässig aus; ein Bild mit Zahlen ist für sie eine Fläche ohne Inhalt.
HTML-Tabelle erstellen
<table>
<caption>Öffnungszeiten</caption>
<thead>
<tr><th scope="col">Tag</th><th scope="col">Uhrzeit</th></tr>
</thead>
<tbody>
<tr><td>Montag bis Freitag</td><td>9 bis 18 Uhr</td></tr>
<tr><td>Samstag</td><td>10 bis 14 Uhr</td></tr>
</tbody>
</table>Formulare 15
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<form> | Formular | <form action="/senden" method="post"> | |
<label> | Beschriftung eines Feldes | <label for="mail">E-Mail</label> | Pflicht für Barrierefreiheit |
<input> | Eingabefeld, Art über type | <input type="email" id="mail" required> | |
<button> | Schaltfläche | <button type="submit">Senden</button> | |
<select> | Auswahlliste | <select name="paket">…</select> | |
<option> | Eintrag einer Auswahlliste | <option>Basis</option> | |
<optgroup> | Gruppe in einer Auswahlliste | <optgroup label="…">…</optgroup> | |
<textarea> | mehrzeiliges Textfeld | <textarea rows="5"></textarea> | |
<fieldset> | Gruppe zusammengehöriger Felder | <fieldset>…</fieldset> | |
<legend> | Titel einer Feldgruppe | <legend>Kontaktdaten</legend> | |
<datalist> | Vorschläge für ein Eingabefeld | <datalist id="orte">…</datalist> | neu |
<output> | Ergebnis einer Berechnung | <output for="a b">…</output> | neu |
<progress> | Fortschritt | <progress value="70" max="100"></progress> | neu |
<meter> | Messwert in einem Bereich | <meter value="0.6">60 %</meter> | neu |
<selectedcontent> | zeigt die gewählte Option in einer gestaltbaren Auswahlliste | <select><button><selectedcontent></selectedcontent></button>…</select> | neu 2025, noch nicht in allen Browsern |
Die wichtigsten Werte für type bei <input>: text, email, tel, url, number, password, search, date, time, datetime-local, month, week, color, range, file, checkbox, radio, hidden, submit, reset, button, image.
Interaktive Elemente 3
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<details> | aufklappbarer Bereich | <details name="faq"><summary>Frage</summary>Antwort</details> | neu; mit name öffnet sich immer nur einer (seit 2024 in allen großen Browsern) |
<summary> | sichtbare Zeile von details | <summary>…</summary> | neu |
<dialog> | Dialogfenster | <dialog id="d">…</dialog> | neu |
Inhalt in <details> steht vollständig im HTML, auch wenn er zugeklappt ist. Suchmaschinen und KI-Crawler können ihn deshalb lesen.
Skripte und Komponenten 4
| Element | Bedeutung | Beispiel | Status |
|---|---|---|---|
<script> | JavaScript oder Daten | <script type="application/ld+json">{…}</script> | SEO/KI: strukturierte Daten |
<noscript> | Inhalt, wenn JavaScript fehlt | <noscript>…</noscript> | |
<template> | Vorlage, wird nicht angezeigt | <template id="karte">…</template> | neu |
<slot> | Platzhalter in Web Components | <slot name="titel"></slot> | neu |
04
Welche HTML-Elemente sind neu?
Mit HTML5 kamen vor allem Elemente für die Gliederung (header, nav, main, article, section, aside, footer), für Medien (audio, video, picture) und für Formulare (datalist, output, progress, meter); seit 2023 sind search und selectedcontent dazugekommen.
| Zeitraum | Neu im Standard |
|---|---|
| HTML5, 2008 bis 2014 | article, aside, audio, bdi, canvas, data, datalist, details, dialog, embed (standardisiert), figcaption, figure, footer, header, main, mark, meter, nav, output, picture (2014), progress, rp, rt, ruby, section, source, summary, template, time, track, video, wbr |
| 2022 | hgroup neu gefasst: Überschrift plus Unterzeile |
| 2023 | search; Attribut inert für ganze Bereiche |
| 2024 | Attribut popover für Einblendungen ohne JavaScript; details mit name als Akkordeon, in allen großen Browsern nutzbar |
| 2025 | selectedcontent für gestaltbare Auswahllisten; Attribute command und commandfor für Schaltflächen; closedby für dialog. Noch nicht überall unterstützt, vor dem Einsatz Browserunterstützung prüfen |
Experimentell und nicht Teil des Standards: <geolocation>, eine Schaltfläche zum Teilen des Standorts, als Vorschlag der WICG. Stand MDN, 25.09.2026.
Quelle: MDN Web Docs, HTML-Elemente, Abruf 25.09.2026
05
Welche HTML-Befehle sind veraltet, und was nimmt man stattdessen?
Veraltete Befehle wie <center>, <font> oder <frame> funktionieren teils noch, gehören aber nicht mehr in neue Seiten; Gestaltung erledigt heute CSS, Bedeutung erledigen die neuen Elemente.
| Veraltet | Stattdessen |
|---|---|
<center> | CSS text-align: center oder Flexbox |
<font>, <basefont> | CSS für Schrift, Größe, Farbe |
<big> | CSS font-size |
<strike> | <s> oder <del> |
<tt> | <code>, <kbd> oder <samp> |
<acronym> | <abbr> |
<frame>, <frameset>, <noframes> | <iframe> oder Layout mit CSS |
<dir> | <ul> |
<marquee>, <blink> | CSS-Animation, sparsam |
<applet> | JavaScript |
<isindex> | <form> mit <input> |
<keygen> | Web Crypto API |
<menuitem> | <button> in <menu> |
<nobr> | CSS white-space: nowrap |
<listing>, <plaintext>, <xmp> | <pre> mit maskierten Zeichen |
<param> | entfällt; Angaben als Attribute |
<rb>, <rtc> | <ruby> mit <rt> |
<noembed>, <image>, <spacer> | entfallen; <img> und CSS |
06
Welche HTML-Attribute gelten für alle Elemente?
Globale Attribute wie id, class, lang, title und hidden funktionieren an jedem Element; dazu kommen elementeigene Attribute wie href bei Links oder alt bei Bildern.
| Attribut | Wofür | Beispiel |
|---|---|---|
id | eindeutiger Name, auch für Sprungmarken | <h2 id="preise"> |
class | Klasse für CSS und JavaScript | class="karte" |
style | CSS direkt am Element | style="color:#333" |
title | Zusatzinformation als Tooltip | title="…" |
lang | Sprache des Inhalts | lang="en" |
dir | Schreibrichtung | dir="rtl" |
hidden | ausblenden; hidden="until-found" bleibt über die Seitensuche auffindbar, noch nicht in allen Browsern | hidden |
tabindex | Reihenfolge bei Tastaturbedienung | tabindex="0" |
accesskey | Tastenkürzel | accesskey="k" |
contenteditable | Inhalt im Browser bearbeitbar | contenteditable="true" |
draggable | Element ziehbar | draggable="true" |
spellcheck | Rechtschreibprüfung | spellcheck="false" |
translate | Übersetzungsdienste auslassen | translate="no" |
data-* | eigene Daten für Skripte | data-paket="basis" |
inert | Bereich weder klickbar noch fokussierbar | <div inert> |
popover | Einblendung ohne JavaScript | <div popover id="info">, geöffnet mit <button popovertarget="info"> |
autofocus | Fokus beim Laden | autofocus |
inputmode, enterkeyhint | passende Bildschirmtastatur auf dem Handy | inputmode="numeric" |
role, aria-* | Angaben für Screenreader, wo HTML selbst nicht reicht | aria-label="Menü öffnen" |
itemscope, itemtype, itemprop | strukturierte Daten als Microdata | itemprop="name" |
Wichtige Attribute einzelner Elemente:
| Element | Attribute |
|---|---|
<a> | href, target, rel (nofollow, sponsored, ugc, noopener), download, hreflang |
<img> | src, alt, width, height, loading="lazy", srcset, sizes, decoding, fetchpriority |
<link> | rel (stylesheet, canonical, alternate, preload, preconnect, icon), href, hreflang |
<meta> | name (description, robots, viewport), content, charset, property (Open Graph) |
<script> | src, type (module, application/ld+json), defer, async |
<input> | type, name, value, placeholder, required, pattern, min, max, step, autocomplete |
<button> | type, popovertarget, command und commandfor (neu 2025) |
<iframe> | src, title, loading, allow, sandbox |
<video>, <audio> | controls, autoplay, muted, loop, poster, preload, playsinline |
<th>, <td> | scope, colspan, rowspan |
<details> | open, name |
<dialog> | open, closedby (neu 2025, noch nicht überall) |
07
Welche Event-Attribute gibt es für Maus, Tastatur, Formular, Medien und Fenster?
Event-Attribute wie onclick starten JavaScript, wenn etwas passiert; heute setzt man sie besser im Skript mit addEventListener, das Prinzip bleibt dasselbe.
| Bereich | Ereignisse |
|---|---|
| Maus | onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmouseenter, onmouseleave, onmousemove, oncontextmenu, onwheel |
| Zeiger (Maus, Stift, Finger) | onpointerdown, onpointerup, onpointermove, onpointerenter, onpointerleave, onpointercancel |
| Tastatur | onkeydown, onkeyup; onkeypress ist veraltet |
| Formular | onsubmit, onreset, onchange, oninput, oninvalid, onfocus, onblur, onselect |
| Fenster und Seite | onload, onbeforeunload, onpagehide, onpageshow, onresize, onscroll, onhashchange, onpopstate, ononline, onoffline, onerror; onunload gilt als unzuverlässig |
| Medien | onplay, onpause, onended, ontimeupdate, onvolumechange, onloadeddata, oncanplay, onwaiting, onseeking, onseeked, onratechange |
| Ziehen und Ablegen | ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend |
| Zwischenablage | oncopy, oncut, onpaste |
Warum wir addEventListener empfehlen: Code in Attributen vermischt Inhalt und Verhalten und wird von strengen Sicherheitsrichtlinien (Content Security Policy) blockiert.
08
Welche Canvas-Befehle gibt es für Zeichnungen und Grafiken?
Auf ein <canvas>-Element zeichnen Sie mit JavaScript über den 2D-Kontext, den getContext("2d") liefert.
| Aufgabe | Befehle |
|---|---|
| Kontext holen | canvas.getContext("2d") |
| Rechtecke | fillRect, strokeRect, clearRect, roundRect (neuer) |
| Pfade | beginPath, moveTo, lineTo, arc, arcTo, bezierCurveTo, quadraticCurveTo, ellipse, closePath, fill, stroke, clip |
| Text | fillText, strokeText, measureText; Eigenschaften font, textAlign, textBaseline |
| Farben und Stil | fillStyle, strokeStyle, lineWidth, lineCap, lineJoin, globalAlpha, globalCompositeOperation |
| Verläufe und Muster | createLinearGradient, createRadialGradient, createConicGradient, createPattern |
| Schatten | shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY |
| Bilder und Pixel | drawImage, getImageData, putImageData, createImageData |
| Umwandlung | translate, rotate, scale, transform, setTransform, resetTransform |
| Zustand | save, restore, reset (neuer) |
09
Welche HTML-Befehle sind für Google und KI-Systeme wichtig?
Google und KI-Systeme lesen vor allem Titel, Überschriften, Linktexte, Alt-Texte, Tabellen, Datumsangaben und strukturierte Daten; entscheidend ist, dass diese Inhalte im ausgelieferten HTML stehen und nicht erst per JavaScript nachgeladen werden.
| Befehl | Was Google und KI-Systeme daraus lesen | Häufiger Fehler |
|---|---|---|
<title> | Thema der Seite, Titel im Suchergebnis | gleicher Titel auf vielen Seiten |
<meta name="description"> | Vorschlag für den Text im Suchergebnis | fehlt oder ist überall gleich |
<meta name="robots"> | ob die Seite in den Index darf | noindex aus der Bauphase bleibt aktiv |
<link rel="canonical"> | welche Adresse das Original ist | zeigt auf die falsche Seite |
<h1> bis <h6> | Gliederung und Kernaussagen | mehrere H1, Überschriften nur zur Gestaltung |
<a> | worum es auf der Zielseite geht | „hier klicken“ statt sprechendem Linktext |
<img alt> | was auf dem Bild zu sehen ist | leer oder mit Suchbegriffen vollgestopft |
<table> | Zahlen und Vergleiche, gut zitierbar | Tabelle als Bild |
<time datetime> | Aktualität | Datum nur als Text ohne Maschinenwert |
<script type="application/ld+json"> | Unternehmen, Leistungen, Fragen und Antworten | Werte, die nicht sichtbar auf der Seite stehen |
<main>, <article> | wo der eigentliche Inhalt steht | Hauptinhalt in namenlosen div-Blöcken |
lang | Sprache der Seite | fehlt oder falsch |
Eine Auswertung von Vercel vom Dezember 2024 zeigte, dass die Crawler von OpenAI, Anthropic, Meta, ByteDance und Perplexity JavaScript nicht ausführen. Was erst im Browser per Skript entsteht, sehen diese Systeme nicht.
Quellen: Vercel, The rise of the AI crawler, Dezember 2024 · Google Search Central, Einführung in strukturierte Daten
Genau hier trennt sich eine schöne Website von einer, die gefunden wird. Wir bauen Seiten so, dass der Kerninhalt ohne JavaScript im HTML steht. Wie wir das umsetzen: Website erstellen lassen. Wie Inhalte in KI-Antworten landen: GEO Agentur für KI-Sichtbarkeit. Wie eine Seite überhaupt in den Index kommt: Webseite bei Google anmelden.
Wie ein SEO-Check fehlende oder doppelte Meta-Angaben findet, zeigt unser Test: Seobility Erfahrungen.
Selbst prüfen: der kostenlose SEO-Check von Seobility (Partnerlink).
Partnerlink: Wenn Sie darüber ein Paket buchen, erhalten wir eine Provision. Für Sie ändert sich am Preis nichts.
10
HTML, HTML5 oder HTML Living Standard: was gilt heute?
Heute gilt der HTML Living Standard der WHATWG; „HTML5“ ist der gebräuchliche Name für diese Generation von HTML, eine Version 6 gibt es nicht.
Das W3C hat HTML5 im Oktober 2014 als Empfehlung veröffentlicht. Seit 2019 arbeiten W3C und WHATWG an einer gemeinsamen Fassung, dem Living Standard, der laufend ergänzt wird. Neue Elemente wie <search> (2023) kommen deshalb ohne neue Versionsnummer.
Quellen: W3C, Mitteilung zu HTML und WHATWG, Mai 2019 · HTML Living Standard der WHATWG
11
Häufige Fragen zu HTML-Befehlen
Was ist der Unterschied zwischen HTML-Befehl, Tag und Element?
Ein Element ist die Einheit, etwa ein Absatz. Ein Tag ist die Schreibweise im Code,
<p>als Start-Tag und</p>als End-Tag. „HTML-Befehl“ ist der umgangssprachliche Begriff für beides.Wie viele HTML-Befehle gibt es?
Der aktuelle Standard umfasst 113 Elemente, wenn man h1 bis h6 einzeln zählt. Dazu kommen dutzende Attribute. Für eine normale Website reichen gut 40.
Ist HTML eine Programmiersprache?
Nein, HTML ist eine Auszeichnungssprache. Sie beschreibt, was ein Inhalt ist, rechnet aber nicht und trifft keine Entscheidungen. Das übernimmt JavaScript.
Was ist der Unterschied zwischen
<b>und<strong>?<strong>kennzeichnet im Code, dass etwas wichtig ist.<b>hebt nur optisch hervor, etwa Stichworte. Dasselbe gilt für<em>(Betonung) und<i>(andere Stimme, Fachbegriff).Wie mache ich einen Zeilenumbruch oder eine Leerzeile in HTML?
Einen Zeilenumbruch setzt
<br>. Für Abstand zwischen Absätzen nutzen Sie zwei<p>-Elemente und regeln den Abstand mit CSS, nicht mit mehreren<br>.Wie mache ich in HTML ein Leerzeichen, das nicht umbricht?
Mit dem geschützten Leerzeichen
, zum Beispiel10 km. Der Browser trennt die beiden Wörter dann nicht am Zeilenende. Mehrere hintereinander als Abstand zu nutzen ist dagegen ein Notbehelf; Abstände gehören ins CSS.Wie füge ich ein Bild ein?
Mit
<img src="bild.webp" alt="Beschreibung" width="800" height="600">. Der Alt-Text beschreibt, was zu sehen ist; Breite und Höhe verhindern, dass die Seite beim Laden springt.Wie erstelle ich einen Link?
Mit
<a href="https://…">Linktext</a>. Der Linktext sollte sagen, wohin der Link führt. Links zu fremden Seiten in neuem Tab öffnen Sie mittarget="_blank".Wie erstelle ich eine Tabelle in HTML?
Mit
<table>, darin Zeilen<tr>, Kopfzellen<th>und Datenzellen<td>. Das Beispiel steht im Abschnitt Tabellen oben.Wo kann ich HTML-Befehle testen?
Speichern Sie den Code als Datei mit der Endung .html und öffnen Sie sie im Browser. Schneller geht es mit den Entwicklerwerkzeugen des Browsers (Taste F12) oder mit Online-Editoren wie CodePen.
Gibt es ein HTML Cheat Sheet auf Deutsch?
Ja, die Befehlsliste dieser Seite gibt es als PDF zum Ausdrucken, auf Deutsch und nach Aufgaben sortiert: HTML-Befehle als PDF herunterladen. Zum Nachschlagen im Browser dient die Liste der HTML-Tags oben.
Gibt es die HTML-Befehle als PDF?
Ja, die Liste dieser Seite gibt es als PDF zum Ausdrucken. HTML-Befehle als PDF herunterladen
Welche Meta-Tags braucht eine HTML-Seite?
Drei gehören in jeden
<head>:<meta charset="utf-8">für die Zeichenkodierung,<meta name="viewport" content="width=device-width, initial-scale=1">für die Darstellung auf dem Smartphone und<meta name="description" content="…">für den Text unter dem Titel in den Suchergebnissen. Der<title>ist kein Meta-Tag, gehört aber ebenso in jede Seite. Das vollständige Beispiel steht im HTML-Grundgerüst.Welche HTML-Befehle sind für SEO wichtig?
Vor allem
<title>, die Meta-Beschreibung, eine<h1>, sauber gegliederte Überschriften, sprechende Linktexte, Alt-Texte und strukturierte Daten. Die Tabelle „Welche HTML-Befehle sind für Google und KI-Systeme wichtig?“ zeigt je Befehl den häufigsten Fehler.
12
Nächster Schritt
Sie möchten nicht selbst programmieren, sondern eine Website, die sauber gebaut ist und gefunden wird? Im Erstgespräch von 15 Minuten schauen wir auf Ihre heutige Website und sagen Ihnen, was technisch fehlt.
Wer hinter diesem Ratgeber steht: Team
