Die HTML-Elementreferenz

Hier bekommt jedes wichtige HTML-Element eine eigene Seite: was es bedeutet, wie die Syntax aussieht, welche Attribute es kennt, was gern schiefgeht und wie es sich auf Barrierefreiheit und Suchmaschinen auswirkt. Dazu wo immer möglich eine Live-Demo, denn Code versteht man am besten wenn man das Ergebniss daneben sieht.

Text und Struktur

Element	Kurz gesagt
<p>	Der Absatz, das Arbeitstier für Fließtext.
<h1> bis <h6>	Überschriften. Haben eine eigene ausführliche Seite in den Grundlagen.
<div>	Der neutrale Block-Container ohne Bedeutung.
<span>	Der neutrale Inline-Container, das Gegenstück zum div.
<nav>	Der Navigationsblock mit den wichtigen Links.

Links und Bilder

Element	Kurz gesagt
<a>	Der Link. Das Element das aus Text ein Web macht.
<img>	Bindet ein Bild ein, inklusive dem berühmten alt-Attribut.
<picture>	Liefert je nach Bildschirm und Format das passende Bild aus.
<figure>	Bild oder Grafik mit zugehöriger Beschriftung.

Listen und Tabellen

Element	Kurz gesagt
<ul>	Die ungeordnete Liste mit Aufzählungspunkten.
<ol>	Die nummerierte Liste für Reihenfolgen.
<li>	Der einzelne Listenpunkt in beiden Listenarten.
<table>	Die Tabelle für echte Daten in Zeilen und Spalten.

Formulare

Element	Kurz gesagt
<form>	Der Rahmen ums Formular, regelt das Absenden.
<input>	Das Eingabefeld mit seinen vielen Typen.
<button>	Die Schaltfläche für Aktionen und das Absenden.
<textarea>	Das mehrzeilige Textfeld.
<select>	Die aufklappbare Auswahlliste.
<label>	Die Beschriftung, die Felder erst bedienbar macht.

Medien und Interaktives

Element	Kurz gesagt
<iframe>	Bettet ein fremdes Dokument als Fenster ein.
<video>	Videos abspielen, ganz ohne Plugin.
<audio>	Ton und Musik für die Seite.
<canvas>	Die Zeichenfläche für JavaScript-Grafik.
<details>	Aufklappbare Bereiche ohne JavaScript.
<summary>	Die sichtbare Kopfzeile der Klappe.
<dialog>	Echte Dialogfenster mit eingebauter Logik.

So liest du die Referenz: Jede Seite folgt grob demselben Aufbau, aber nicht sklavisch. Bei einem simplen Element wie li gibt es weniger zu sagen als bei table, und das ist okay so. Alle Beispiele kannst du direkt in die Spielwiese kopiern und verändern.

Grundlagen fehlen noch? Der Lernpfad bringt dich auf Stand. Fachbegriffe erklärt das Glossar.