Zum Nachschlagen & Ausdrucken

Der HTML-Spickzettel

Alle wichtigen HTML-Elemente und Attribute mit Kurzerklärung und Beispiel – von <a> bis <video>. Tipp: Mit der Suchbox findest du jedes Element in Sekunden, und über die Druckfunktion deines Browsers wird daraus ein Nachschlagewerk für den Schreibtisch.

Nichts gefunden – probiere einen anderen Begriff, z. B. „link“, „formular“ oder „video“.

Grundgerüst

<!doctype html>

Erste Zeile jeder Seite: aktiviert den Standard-Modus des Browsers.

<!doctype html>

<html>

Wurzelelement – umschließt alles. Sprache immer angeben.

<html lang="de"> … </html>

<head>

Unsichtbare Metadaten: Titel, Zeichensatz, Beschreibung.

<head>
  <meta charset="utf-8">
  <title>Seitentitel</title>
</head>

<body>

Alles Sichtbare der Seite.

<body> … </body>

<meta charset>

Zeichencodierung – immer UTF-8, möglichst früh im head.

<meta charset="utf-8">

<meta viewport>

Pflicht für Mobilgeräte: Seite an Bildschirmbreite anpassen.

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

Titel im Browser-Tab und in Suchergebnissen.

<title>Rezepte – Mein Blog</title>

Kommentar – für Menschen, nicht für den Browser.

<!-- Hier beginnt der Hauptteil -->

Text

<h1> … <h6>

Überschriften in 6 Ebenen. Eine h1 pro Seite, keine Ebene überspringen.

<h1>Seitenthema</h1>
<h2>Kapitel</h2>
<h3>Unterkapitel</h3>

<p>

Absatz – das Brot-und-Butter-Element für Fließtext.

<p>Ein ganz normaler Absatz.</p>

<strong>

Wichtiger Inhalt (nicht nur fett – Bedeutung!).

<strong>Achtung, heiß!</strong>

<em>

Betonung, wie beim Sprechen.

Das war <em>wirklich</em> gut.

<br>

Zeilenumbruch. Sparsam einsetzen – nie für Abstände.

Zeile eins<br>Zeile zwei

<hr>

Thematischer Bruch zwischen Abschnitten.

<hr>

<blockquote>

Abgesetztes Zitat; Quelle per cite-Element im footer.

<blockquote>
  <p>Weniger ist mehr.</p>
</blockquote>

<q>

Kurzes Zitat im Fließtext – der Browser setzt die Anführungszeichen.

Sie sagte <q>bis morgen</q> und ging.

<code>

Quelltext im Fließtext.

Das Element <code>&lt;p&gt;</code> erzeugt Absätze.

<pre>

Vorformatierter Text – Leerzeichen und Umbrüche bleiben erhalten.

<pre>
  eingerückt
    bleibt eingerückt
</pre>

<abbr>

Abkürzung mit Erklärung im title-Attribut.

<abbr title="zum Beispiel">z. B.</abbr>

<time>

Maschinenlesbare Zeitangabe.

<time datetime="2026-12-24">Heiligabend</time>

<mark>

Hervorgehobene Fundstelle (z. B. Suchtreffer).

Treffer: <mark>HTML</mark>-Kurs

<small>

Kleingedrucktes: rechtliche Hinweise, Nebenbemerkungen.

<small>Alle Angaben ohne Gewähr.</small>

<span>

Bedeutungsloser Inline-Container – nur als Styling-Haken.

<span class="preis">9,99 €</span>

Links

<a href>

Der Link – das wichtigste Element des Webs.

<a href="https://example.org">Sprechender Linktext</a>

Relativer Link

Ziel relativ zur aktuellen Datei.

<a href="rezepte/brot.html">Brotrezept</a>

Sprungmarke

Zu einem Element mit id auf derselben oder einer anderen Seite springen.

<a href="#kontakt">Zum Kontakt</a>
<section id="kontakt">…</section>

mailto: / tel:

E-Mail-Programm bzw. Telefon-App öffnen.

<a href="mailto:post@example.org">Schreib mir</a>

target="_blank"

Neuer Tab – immer mit rel="noopener".

<a href="…" target="_blank" rel="noopener">Extern</a>

download

Datei herunterladen statt anzeigen.

<a href="preisliste.pdf" download>Preisliste (PDF)</a>

Bilder & Medien

<img>

Bild einbinden – alt ist Pflicht, width/height verhindern Springen.

<img src="hund.jpg" alt="Schlafender Labrador" width="640" height="427">

<figure> + <figcaption>

Bild (oder Grafik/Code) mit Bildunterschrift.

<figure>
  <img src="turm.jpg" alt="Eiffelturm bei Nacht">
  <figcaption>Paris im Dezember</figcaption>
</figure>

srcset + sizes

Responsive Bilder: Browser wählt die passende Größe.

<img src="m.jpg"
  srcset="s.jpg 480w, m.jpg 960w, l.jpg 1920w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="…">

<picture>

Moderne Formate mit Fallback oder Art Direction.

<picture>
  <source srcset="foto.avif" type="image/avif">
  <img src="foto.jpg" alt="…">
</picture>

loading="lazy"

Bilder/iframes erst laden, wenn sie in Sichtweite kommen.

<img src="…" alt="…" loading="lazy">

<video>

Video mit Bedienelementen und Vorschaubild.

<video controls poster="vorschau.jpg">
  <source src="film.mp4" type="video/mp4">
</video>

<audio>

Audio-Player.

<audio controls src="podcast.mp3"></audio>

<iframe>

Fremde Seite einbetten – title ist Pflicht, sandbox zähmt sie.

<iframe src="…" title="Anfahrtskarte" sandbox loading="lazy"></iframe>

<svg>

Vektorgrafik direkt im HTML – verlustfrei skalierbar.

<svg viewBox="0 0 20 20" width="20" aria-hidden="true">
  <circle cx="10" cy="10" r="8"/>
</svg>

Listen

<ul> + <li>

Ungeordnete Liste – Reihenfolge egal.

<ul>
  <li>Mehl</li>
  <li>Wasser</li>
</ul>

<ol> + <li>

Geordnete Liste – Reihenfolge zählt. start/reversed möglich.

<ol>
  <li>Teig kneten</li>
  <li>Ruhen lassen</li>
</ol>

<dl> <dt> <dd>

Beschreibungsliste: Begriff + Erläuterung (Glossar, FAQ).

<dl>
  <dt>HTML</dt>
  <dd>Auszeichnungssprache des Webs</dd>
</dl>

Tabellen

<table>

Tabelle für tabellarische Daten – nie fürs Layout.

<table>
  <tr><th scope="col">Tag</th><th scope="col">Zeit</th></tr>
  <tr><td>Montag</td><td>9–18 Uhr</td></tr>
</table>

<caption>

Titel der Tabelle – erstes Kind, wichtig für Screenreader.

<caption>Öffnungszeiten im Sommer</caption>

<thead> <tbody> <tfoot>

Kopf-, Rumpf- und Fußbereich der Tabelle.

<thead> … </thead>
<tbody> … </tbody>

scope

Sagt, wofür eine Kopfzelle gilt: Spalte oder Zeile.

<th scope="row">Zeilenkopf</th>

colspan / rowspan

Zelle über mehrere Spalten/Zeilen strecken.

<td colspan="2">gilt für zwei Spalten</td>

Formulare

<form>

Umschließt das Formular; action = Ziel, method = get/post.

<form action="/senden" method="post"> … </form>

<label> + <input>

Das Pflicht-Duo: label beschreibt, for/id verbindet.

<label for="mail">E-Mail</label>
<input type="email" id="mail" name="mail" required>

input-Typen

text, email, password, number, date, checkbox, radio, file …

<input type="date" id="geb" name="geburtstag">

<textarea>

Mehrzeilige Texteingabe.

<textarea id="msg" name="msg" rows="5"></textarea>

<select> + <option>

Auswahlliste.

<select id="land" name="land">
  <option>Deutschland</option>
  <option>Österreich</option>
</select>

<fieldset> + <legend>

Gruppierung zusammengehöriger Felder – Pflicht bei Radio-Gruppen.

<fieldset>
  <legend>Zahlungsart</legend>
  …
</fieldset>

<button>

Schaltfläche; type="submit" sendet, type="button" tut erst mal nichts.

<button type="submit">Absenden</button>

Validierung

required, minlength, min/max, pattern – eingebaut, ohne JavaScript.

<input type="text" name="plz" pattern="[0-9]{5}" required>

<datalist>

Vorschläge zur freien Eingabe.

<input list="staedte" name="stadt">
<datalist id="staedte">
  <option value="Berlin">
</datalist>

Struktur & Semantik

<header>

Kopfbereich einer Seite oder eines Abschnitts.

<header><h1>Mein Blog</h1></header>

<nav>

Wesentliche Navigations-Linkblöcke.

<nav aria-label="Hauptnavigation">
  <a href="/">Start</a>
</nav>

<main>

Der Hauptinhalt – genau einmal pro Seite.

<main> … </main>

<article>

In sich abgeschlossener, eigenständiger Inhalt.

<article><h2>Blogbeitrag</h2>…</article>

<section>

Thematischer Abschnitt – verdient immer eine eigene Überschrift.

<section><h2>Kapitel 1</h2>…</section>

<aside>

Randinformation: Sidebar, „Mehr zum Thema“.

<aside>Verwandte Artikel …</aside>

<footer>

Fußbereich einer Seite oder eines Abschnitts.

<footer><p>© 2026</p></footer>

<div>

Bedeutungsloser Block-Container – der ehrliche Styling-Helfer.

<div class="karten-raster"> … </div>

data-*

Eigene Daten fürs eigene JavaScript/CSS – nicht für Suchmaschinen.

<li data-produkt-id="4711">…</li>

Interaktiv (ohne JavaScript)

<details> + <summary>

Auf-/zuklappbarer Bereich; gleiche name-Werte = exklusives Akkordeon.

<details name="faq">
  <summary>Frage?</summary>
  <p>Antwort.</p>
</details>

popover

Overlay komplett ohne JavaScript – öffnen per popovertarget.

<button popovertarget="info">Info</button>
<div id="info" popover>Hallo!</div>

<dialog>

Modaler Dialog; Fokus und ESC regelt der Browser (Öffnen: 1 Zeile JS).

<dialog id="hinweis">
  <p>Gespeichert!</p>
</dialog>

<progress>

Fortschritt eines Vorgangs.

<progress max="100" value="70">70 %</progress>

<meter>

Messwert in einem bekannten Bereich (Füllstand, Bewertung).

<meter min="0" max="10" low="3" optimum="9" value="8">8/10</meter>

hidden

Element komplett verstecken – für alle, auch Screenreader.

<p hidden>Noch nicht sichtbar.</p>

Head & Metadaten

meta description

Beschreibung fürs Suchergebnis (150–160 Zeichen).

<meta name="description" content="Kurz gesagt, worum es hier geht.">

canonical

Die „offizielle“ URL bei doppelt erreichbaren Inhalten.

<link rel="canonical" href="https://example.org/seite">

Open Graph

Link-Vorschau in sozialen Netzwerken und Messengern.

<meta property="og:title" content="Titel">
<meta property="og:image" content="https://…/bild.jpg">

Favicon

Das Tab-Symbol – heute am besten als SVG.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<script defer>

JavaScript laden, ohne das Rendern zu blockieren.

<script defer src="app.js"></script>

preload / preconnect

Dem Browser wichtige Ressourcen früh ankündigen.

<link rel="preload" href="hero.webp" as="image">

JSON-LD

Strukturierte Daten für Suchmaschinen (schema.org).

<script type="application/ld+json">
{ "@type": "Article", … }
</script>

Ein Element vermisst oder Lust auf mehr Tiefe? In den Kursen wird jedes davon ausführlich erklärt: Anfänger-Kurs · Fortgeschrittenen-Kurs