Was ist der Unterschied zwischen ` ` und ` `?

` ` ist ein semantisches Tag - es teilt Browsern und Screenreadern mit, dass sein Inhalt eine bedeutungsvolle, thematische Gruppe ist, und es hat in der Regel eine Überschrift. ` ` trägt keine Bedeutung und ist nur ein generischer Container zum Stylen oder Skripten. Greife zu einem semantischen Tag (` `, ` `, ` `), wenn eines passt, und nutze ` ` nur dann, wenn keines passt.

HTML Spickzettel

Q: Brauchen alle HTML-Tags ein schließendes Tag?

Die meisten ja (` ... `), aber einige „leere" Elemente nicht, weil sie nichts enthalten können: ` `, ` `, ` `, ` `, ` ` und ` `. In HTML5 kannst du sie mit oder ohne abschließenden Schrägstrich schreiben.

Zuletzt aktualisiert 27. Mai 2026

Live im Web-Playground ausprobieren HTML kostenlos lernen

Dokumentstruktur

Jede HTML-Seite beginnt mit diesem Gerüst.

Element	Funktion
`<!DOCTYPE html>`	Deklariert das Dokument als HTML5 (erste Zeile)
`<html lang="en">`	Wurzelelement; `lang` legt die Sprache fest
`<head>`	Metadaten: Titel, Links, Skripte - werden auf der Seite nicht angezeigt
`<meta charset="UTF-8">`	Zeichenkodierung (immer einbinden)
`<meta name="viewport" content="width=device-width, initial-scale=1">`	Responsive Skalierung auf Mobilgeräten
`<title>`	Seitentitel, der im Browser-Tab und in Suchergebnissen angezeigt wird
`<body>`	Alles auf der Seite Sichtbare gehört hierher

Text & Überschriften

Element	Funktion
`<h1>` … `<h6>`	Überschriften, `<h1>` am wichtigsten (eine pro Seite)
`<p>`	Textabsatz
`<br>`	Zeilenumbruch (kein schließendes Tag)
`<hr>`	Thematischer Trenner / horizontale Linie
`<strong>`	Wichtiger Text (fett)
`<em>`	Hervorgehobener Text (kursiv)
`<span>`	Inline-Container zum Stylen eines Textabschnitts
`<code>`	Inline-Code
`<pre>`	Vorformatierter Text (behält Leerzeichen bei)
`<blockquote>`	Zitierter Textblock

Links & Bilder

Element	Syntax
Link	`<a href="https://coddy.tech">Coddy</a>`
In neuem Tab öffnen	`<a href="..." target="_blank" rel="noopener">`
Anker (zu ID springen)	`<a href="#section">Jump</a>`
Bild	`<img src="cat.png" alt="A cat" width="200">`
Responsives Bild	`<img src="..." srcset="..." sizes="...">`
Abbildung mit Bildunterschrift	`<figure><img ...><figcaption>…</figcaption></figure>`

Listen

Element	Funktion
`<ul>`	Ungeordnete (Aufzählungs-)Liste
`<ol>`	Geordnete (nummerierte) Liste
`<li>`	Listenelement (innerhalb von `<ul>` oder `<ol>`)
`<dl>`	Beschreibungsliste
`<dt>` / `<dd>`	Beschreibungsbegriff / Beschreibungsdetail

Tabellen

Element	Funktion
`<table>`	Tabellen-Container
`<thead>` / `<tbody>` / `<tfoot>`	Gruppen für Tabellenkopf, -körper und -fuß
`<tr>`	Tabellenzeile
`<th>`	Kopfzelle (fett, zentriert)
`<td>`	Datenzelle
`colspan` / `rowspan`	Zellen über Spalten / Zeilen zusammenführen

Formulare & Eingaben

Die Bausteine jedes Formulars, das Eingaben erfasst.

Element	Syntax / Zweck
Formular	`<form action="/submit" method="post">`
Texteingabe	`<input type="text" name="q" placeholder="Search">`
E-Mail / Passwort	`<input type="email">`, `<input type="password">`
Checkbox / Radiobutton	`<input type="checkbox">`, `<input type="radio">`
Zahl / Datum	`<input type="number">`, `<input type="date">`
Beschriftung	`<label for="q">Search</label>`
Mehrzeilig	`<textarea rows="4"></textarea>`
Dropdown	`<select><option>One</option></select>`
Schaltfläche	`<button type="submit">Send</button>`
Pflichtfeld	`<input required>`

Semantische & Layout-Tags

Verwende diese statt generischer <div>s, damit Browser, Screenreader und Suchmaschinen deine Seite verstehen.

Element	Wozu es dient
`<header>`	Oberer Bereich einer Seite oder eines Abschnitts (Logo, Navigation)
`<nav>`	Navigationslinks
`<main>`	Der dominante Inhalt (einer pro Seite)
`<section>`	Eine thematische Gruppierung von Inhalten
`<article>`	Eigenständiger Inhalt (Beitrag, Karte)
`<aside>`	Seitenleiste / nebensächlicher Inhalt
`<footer>`	Unterer Bereich einer Seite oder eines Abschnitts
`<div>`	Generischer Block-Container (ohne Bedeutung)

Häufige globale Attribute

Attribut	Funktion
`id`	Eindeutiger Bezeichner für ein Element
`class`	Ein oder mehrere Klassennamen (für CSS / JS)
`style`	Inline-CSS (sparsam einsetzen)
`title`	Tooltip-Text beim Überfahren mit der Maus
`data-*`	Benutzerdefiniertes Datenattribut, z. B. `data-id="42"`
`hidden`	Blendet das Element aus

Jedes HTML-Tag und Attribut, das du brauchst, gruppiert nach Funktion. Dieser HTML-Spickzettel deckt das Seitengerüst, Text und Links, Bilder und Medien, Listen, Tabellen, Formulare und die semantischen Tags ab, die deinem Markup Bedeutung geben.

Alles davon ist Standard-HTML5 und funktioniert in jedem modernen Browser. Kopiere ein Tag oder öffne den HTML-Playground, um es mit einer Live-Vorschau zu bearbeiten - keine Einrichtung nötig.

HTML-Spickzettel FAQ

Ist dieser HTML-Spickzettel kostenlos?

Ja. Dieser HTML-Spickzettel ist ohne Anmeldung kostenlos nutzbar. Setze ein Lesezeichen und komm jederzeit wieder, wenn du ein Tag oder Attribut nachschlagen möchtest.

Was ist der Unterschied zwischen <section> und <div>?

<section> ist ein semantisches Tag - es teilt Browsern und Screenreadern mit, dass sein Inhalt eine bedeutungsvolle, thematische Gruppe ist, und es hat in der Regel eine Überschrift. <div> trägt keine Bedeutung und ist nur ein generischer Container zum Stylen oder Skripten. Greife zu einem semantischen Tag (<section>, <article>, <nav>), wenn eines passt, und nutze <div> nur dann, wenn keines passt.

Brauchen alle HTML-Tags ein schließendes Tag?

Die meisten ja (<p>...</p>), aber einige „leere" Elemente nicht, weil sie nichts enthalten können: <img>, <br>, <hr>, <input>, <meta> und <link>. In HTML5 kannst du sie mit oder ohne abschließenden Schrägstrich schreiben.

Kann ich HTML online üben?

Ja. Öffne den HTML-Playground, um HTML in deinem Browser mit einer Live-Vorschau zu schreiben - keine Installation nötig. Wenn du Struktur möchtest, vermittelt Coddys kostenloser interaktiver HTML-Kurs Tags, Formulare und Layout Schritt für Schritt.

Ist dieser Spickzettel für Anfänger geeignet?

Ja. Er beginnt mit dem Seitengerüst und den alltäglichen Tags, die du zuerst verwendest, und geht dann zu Formularen und semantischem Markup über, sodass du die oberen Abschnitte schon am ersten Tag nutzen kannst.