Visuelle HTML-Referenz
HTML-Elemente vollständig erklärt – mit Vorschau
Sechs Kapitel, jedes Element mit Code-Beispiel, Render-Vorschau und Erklärung.
Von der Dokumentstruktur bis zu Formularen – der komplette Überblick.
Dokumentstruktur
Das Grundgerüst jeder HTML-Seite. <!DOCTYPE html> teilt dem Browser mit, dass es sich um HTML5 handelt. <head> enthält Metadaten, <body> den sichtbaren Inhalt.
<!-- Pflicht: DOCTYPE immer in Zeile 1 --> <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seitentitel</title> <meta name="description" content="Beschreibung"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Sichtbarer Inhalt --> </body> </html>
lang="de" am <html>-Tag ist Pflicht für Barrierefreiheit und Suchmaschinen – Screenreader lesen damit die richtige Sprache vor.Head-Elemente steuern Metadaten, externe Ressourcen und Skripte. <script defer> lädt JS ohne die HTML-Verarbeitung zu blockieren.
<!-- Zeichensatz --> <meta charset="UTF-8"> <!-- Responsive: immer setzen --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SEO --> <meta name="description" content="…"> <meta name="robots" content="index,follow"> <!-- Open Graph --> <meta property="og:title" content="…"> <meta property="og:image" content="…"> <!-- Externe Ressourcen --> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.gstatic.com"> <!-- JS: defer = nach HTML-Parsing --> <script src="app.js" defer></script>
| Tag / Attribut | Wert (Beispiel) | Zweck |
|---|---|---|
| charset | "UTF-8" | Zeichenkodierung – immer setzen |
| viewport | width=device-width | Responsives Verhalten auf Mobilgeräten |
| description | "…" | Google Suchergebnis-Snippet (max. 160 Zeichen) |
| og:title/image | "…" | Vorschaukarte in Social Media |
| rel="icon" | favicon.ico | Browser-Tab-Icon |
| defer | (kein Wert) | JS lädt parallel, führt erst nach HTML aus |
preconnect für Google Fonts reduziert Ladezeit messbar – immer vor dem Font-Link setzen.<div> ist ein Block-Container ohne semantische Bedeutung – für Layout und Gruppierung. <span> ist das Inline-Äquivalent für Textabschnitte. Beide werden nur genutzt wenn kein semantisches Element passt.
<!-- Block-Container --> <div class="card"> <div class="card-header"> <h2>Titel</h2> </div> <div class="card-body"> <p>Inhalt der Karte</p> </div> </div> <!-- Inline-Container --> <p> Der Preis beträgt <span class="price">49 €</span> inkl. MwSt. </p>
<article>, <section>, <nav> statt lauter <div>s.Text & Inline-Elemente
Überschriften h1–h6 bilden die semantische Hierarchie der Seite. Pro Seite nur ein <h1>. <br> ist ein harter Zeilenumbruch, <hr> eine thematische Trennung.
<h1>Hauptüberschrift (einmalig)</h1> <h2>Abschnittsüberschrift</h2> <h3>Unterabschnitt</h3> <h4>Sub-Unterabschnitt</h4> <h5>Selten verwendet</h5> <h6>Kleinste Ebene</h6> <p> Ein Absatz. Text fließt bis zum Zeilenende und bricht dann um. </p> <!-- Harter Umbruch (sparsam nutzen) --> <p>Zeile 1<br>Zeile 2</p> <!-- Thematische Trennung --> <hr>
Semantische Inline-Auszeichnung. <strong> bedeutet hohe Wichtigkeit (bold), <em> Betonung (italic). <b> und <i> sind stilistisch ohne semantische Bedeutung.
<p> <strong>Wichtig</strong> – semantisch fett <em>Betont</em> – semantisch kursiv <b>Fett</b> – nur visuell, kein Sinn <i>Kursiv</i> – z.B. Fremdwörter <u>Unterstrichen</u> <s>Durchgestrichen</s> <mark>Markiert</mark> <small>Kleingedrucktes</small> <sub>2</sub> und H<sub>2</sub>O <sup>2</sup> und x<sup>2</sup> </p>
u – unterstrichen |
small – Kleingedrucktes | H2O – sub | x2 – sup
abbr – Abkürzung (hover für Tooltip) | kbd – Tastatureingabe
Das wichtigste Element des Web. href kann URLs, Anker, Tel- und Mailto-Links enthalten. target="_blank" öffnet in neuem Tab – immer mit rel="noopener" kombinieren.
<!-- Externer Link --> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> Externer Link </a> <!-- Seitenanker --> <a href="#kapitel2">Zu Kapitel 2</a> <!-- Tel / Mail --> <a href="tel:+4901234567">Anrufen</a> <a href="mailto:hi@example.de">Mail</a> <!-- Download-Link --> <a href="datei.pdf" download="mein-name.pdf"> PDF herunterladen </a>
| href-Wert | Beispiel | Verhalten |
|---|---|---|
| https://… | "https://google.de" | Externer absoluter Link |
| /pfad | "/kontakt" | Interner relativer Link |
| #id | "#kapitel2" | Springt zu Element mit id="kapitel2" |
| mailto: | "mailto:hi@…" | Öffnet E-Mail-Programm |
| tel: | "tel:+49…" | Wählt auf Mobilgeräten |
| download | (Attribut) | Erzwingt Download statt Navigation |
target="_blank" immer mit rel="noopener noreferrer" – verhindert Sicherheitslücke (Tab Hijacking).Spezialisierte Text-Container. <pre> bewahrt Whitespace. <blockquote cite="url"> für längere Zitate. <time datetime> macht Daten maschinenlesbar.
<!-- Inline Code --> <p>Nutze <code>const x = 1</code> …</p> <!-- Code-Block --> <pre><code> function greet(name) { return `Hallo, ${name}!`; } </code></pre> <!-- Blockzitat --> <blockquote cite="https://…"> <p>Gutes Design ist so wenig Design wie möglich.</p> <cite>— Dieter Rams</cite> </blockquote> <!-- Datum maschinenlesbar --> <time datetime="2025-01-15"> 15. Januar 2025 </time>
const x = 1 für unveränderliche Werte.return `Hallo, ${name}!`;
}
"Gutes Design ist so wenig Design wie möglich."
— Dieter Rams
Listen & Tabellen
<ul> für ungeordnete, <ol> für nummerierte Listen. <dl> ist eine Beschreibungsliste für Begriff-Erklärung-Paare – ideal für Glossare und Metadaten.
<!-- Ungeordnet --> <ul> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Verschachtelt <ul> <li>Unterpunkt</li> </ul> </li> </ul> <!-- Geordnet --> <ol start="1" type="1"> <li>Schritt eins</li> <li>Schritt zwei</li> </ol> <!-- Beschreibungsliste --> <dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>
- Erster Punkt
- Zweiter Punkt
- Verschachtelt
- Unterpunkt
- Schritt eins
- Schritt zwei
- Schritt drei
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JS
- JavaScript – Skriptsprache im Browser
Tabellen für tabellarische Daten – nie für Layout. colspan und rowspan verbinden Zellen. scope="col/row" macht Tabellen barrierefrei.
<table> <caption>Preisübersicht 2025</caption> <thead> <tr> <th scope="col">Produkt</th> <th scope="col">Preis</th> </tr> </thead> <tbody> <tr> <td>Starter</td> <td>0 €</td> </tr> <tr> <td>Pro</td> <td>29 €/Monat</td> </tr> <!-- colspan verbindet Spalten: --> <tr> <td colspan="2">Alle Preise inkl. MwSt.</td> </tr> </tbody> </table>
| Produkt | Nutzer | Preis |
|---|---|---|
| Starter | 1 | 0 € |
| Pro | 5 | 29 €/Monat |
| Business | 25 | 99 €/Monat |
| Alle Preise zzgl. MwSt. – colspan="3" | ||
scope="col" und scope="row" an <th> ist Pflicht für barrierefreie Tabellen – Screenreader ordnen Zellen damit korrekt zu.Medien
alt ist Pflicht – für Screenreader und wenn das Bild nicht lädt. <picture> erlaubt verschiedene Bildformate und Größen pro Viewport. loading="lazy" verzögert Laden außerhalb des Sichtbereichs.
<!-- Grundform --> <img src="bild.jpg" alt="Beschreibung des Bildes" width="800" height="600" loading="lazy" > <!-- Modernes Responsive-Bild --> <picture> <source media="(min-width: 800px)" srcset="gross.avif" type="image/avif" > <source srcset="klein.webp" type="image/webp" > <img src="fallback.jpg" alt="…"> </picture> <!-- Bild mit Bildunterschrift --> <figure> <img src="…" alt="…"> <figcaption>Bildunterschrift</figcaption> </figure>
width und height am <img> setzen – verhindert Layout-Shift (CLS) beim Laden und verbessert Core Web Vitals.Medienelemente für Video, Audio und eingebettete Inhalte. Immer Fallback-Text zwischen den Tags. <iframe> für externe Inhalte wie Maps oder YouTube.
<video src="film.mp4" controls poster="vorschau.jpg" width="100%" muted autoplay loop <!-- für Hero-Videos --> > <source src="film.webm" type="video/webm"> <source src="film.mp4" type="video/mp4"> Dein Browser unterstützt kein Video. </video> <audio controls src="audio.mp3"> Dein Browser unterstützt kein Audio. </audio> <iframe src="https://maps.google.com/…" title="Google Maps" loading="lazy" referrerpolicy="no-referrer" ></iframe>
muted autoplay loop playsinline – ohne muted blockieren Browser das Autoplay.Formulare
Das <label> muss immer mit dem Input verbunden sein – über for/id oder durch Verschachtelung. type="submit" sendet das Formular, type="button" tut es nicht.
<form action="/senden" method="post" novalidate > <!-- Label + Input verknüpft --> <label for="name">Name</label> <input type="text" id="name" name="name" placeholder="Max Mustermann" required autocomplete="name" > <label for="email">E-Mail</label> <input type="email" id="email" name="email" required> <button type="submit">Absenden</button> <button type="reset">Zurücksetzen</button> </form>
autocomplete setzen – Browser füllen Felder dann automatisch. Verbessert UX enorm, besonders auf Mobilgeräten.HTML5 brachte viele neue Input-Typen mit nativer Validierung und mobil-optimierten Tastaturen. Korrekte Typen verbessern UX auf Mobilgeräten erheblich.
<input type="text"> Standard-Text <input type="email"> E-Mail-Validierung <input type="password"> Versteckte Eingabe <input type="number"> Nur Zahlen <input type="tel"> Telefonnummer-Tastatur <input type="url"> URL-Validierung <input type="search"> Suchfeld mit × löschen <input type="date"> Datums-Picker <input type="time"> Zeit-Picker <input type="color"> Farbwähler <input type="range" min="0" max="100"> Schieberegler <input type="file" accept=".pdf,.jpg"> Datei-Upload <input type="checkbox"> Mehrfachauswahl <input type="radio"> Einzelauswahl <input type="hidden"> Unsichtbar (Daten)
<fieldset> gruppiert zusammengehörige Felder semantisch, <legend> benennt die Gruppe. <datalist> bietet Autocomplete-Vorschläge für freie Texteingaben.
<textarea name="nachricht" rows="4" cols="50" placeholder="Deine Nachricht …" ></textarea> <select name="land"> <optgroup label="DACH"> <option value="de">Deutschland</option> <option value="at">Österreich</option> </optgroup> </select> <!-- Autocomplete-Vorschläge --> <input list="browser" name="browser"> <datalist id="browser"> <option value="Chrome"> <option value="Firefox"> </datalist> <fieldset> <legend>Kontaktdaten</legend> <!-- Felder … --> </fieldset>
Semantische Elemente
Semantische Layout-Elemente ersetzen <div>-Suppen. Screenreader nutzen sie zur Navigation, Suchmaschinen verstehen die Seitenstruktur besser. <main> darf nur einmal pro Seite vorkommen.
<header> <nav> <ul> <li><a href="/">Home</a></li> </ul> </nav> </header> <main> <article> <header> <h1>Artikeltitel</h1> <time datetime="2025-01-01">2025</time> </header> <section> <h2>Abschnitt</h2> <p>Inhalt…</p> </section> </article> <aside> <h2>Verwandte Artikel</h2> </aside> </main> <footer> <p>© 2025 Meine Seite</p> </footer>
<article> / <section>
| Element | Bedeutung |
|---|---|
| <header> | Kopfbereich – Seite oder Artikel |
| <nav> | Hauptnavigation |
| <main> | Hauptinhalt (einmalig pro Seite) |
| <article> | Eigenständiger, teilbarer Inhalt |
| <section> | Thematischer Abschnitt |
| <aside> | Ergänzender Inhalt / Sidebar |
| <footer> | Fußbereich |
Moderne HTML-Elemente mit eingebautem Verhalten ohne JavaScript. <details> baut ein Akkordeon, <dialog> ein Modal-Fenster, <progress> einen Fortschrittsbalken.
<!-- Akkordeon ohne JS --> <details> <summary>Klick zum Aufklappen</summary> <p>Versteckter Inhalt …</p> </details> <!-- Modal-Dialog --> <dialog id="modal"> <h2>Modal-Titel</h2> <p>Inhalt …</p> <button onclick="modal.close()" >Schließen</button> </dialog> <button onclick="modal.showModal()" >Modal öffnen</button> <!-- Fortschrittsbalken --> <progress value="70" max="100"> 70% </progress>
▾ Klick zum Aufklappen
▾ Zweites Akkordeon
<dialog> unterstützt seit 2022 alle Browser. .showModal() öffnet als echtes Modal mit Backdrop-Layer, .show() als nicht-modaler Layer.Globale Attribute funktionieren an jedem HTML-Element. data-* speichert eigene Daten direkt im HTML. aria-*-Attribute sind unverzichtbar für Barrierefreiheit.
<!-- id: einmalig pro Seite --> <section id="kontakt"></section> <!-- class: wiederverwendbar --> <div class="card featured large"></div> <!-- data-*: eigene Daten --> <button data-product-id="42" data-action="add-to-cart" >In den Warenkorb</button> <!-- ARIA: Barrierefreiheit --> <button aria-label="Menü öffnen" aria-expanded="false" aria-controls="main-nav" >☰</button> <!-- tabindex: Tastaturreihenfolge --> <div tabindex="0">Per Tab erreichbar</div> <div tabindex="-1">Nur per JS fokussierbar</div> <!-- hidden: unsichtbar --> <div hidden>Unsichtbar + kein Platz</div>
| Attribut | Wert | Beschreibung |
|---|---|---|
| id | "einmalig" | Einzigartiger Bezeichner auf der Seite |
| class | "a b c" | CSS-Klassen, mehrere mit Leerzeichen |
| data-* | beliebig | Eigene Daten – per JS mit dataset.* lesbar |
| aria-label | "Text" | Barrierefreier Name für Screenreader |
| aria-expanded | true/false | Zustand für Akkordeons/Menüs |
| aria-hidden | true | Vor Screenreadern verbergen |
| tabindex | 0 / -1 | Tastatur-Fokus-Reihenfolge steuern |
| hidden | (Boolean) | Element komplett ausblenden |
| contenteditable | true | Inhalt direkt editierbar machen |
| lang | "de" | Sprache eines Abschnitts festlegen |
data-*-Werte per JavaScript lesen: element.dataset.productId – camelCase wird automatisch konvertiert.HTML Cheatsheet
Alle wichtigen HTML-Elemente auf einen Blick – zum Nachschlagen und Kopieren.
General
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
<!-- Das ist ein Kommentar -->
Text Tags
<h1>Hauptüberschrift</h1> <h2>Unterüberschrift</h2> <h3>Abschnittstitel</h3> <h4>Unterabschnitt</h4> <h5>Detail</h5> <h6>Kleinste Überschrift</h6>
<p>Das ist ein Textabsatz.</p>
<ul> <li>Erster Punkt</li> <li>Zweiter Punkt</li> <li>Dritter Punkt</li> </ul>
<ol> <li>Schritt eins</li> <li>Schritt zwei</li> <li>Schritt drei</li> </ol>
<ul>
<li>Hauptpunkt</li>
<li>
Punkt mit Unterliste
<ul>
<li>Unterpunkt A</li>
<li>Unterpunkt B</li>
</ul>
</li>
</ul>
<a href="https://example.com">Linktext</a> <a href="https://example.com" target="_blank">Neuer Tab</a> <a href="https://example.com" target="_blank" title="Beschreibung">Mit Tooltip</a>
target="_blank" öffnet den Link in einem neuen Tab.<a href="mailto:info@example.com"> E-Mail senden </a>
<a href="#abschnitt">Zum Abschnitt</a> <div id="abschnitt"> Hier ist der Zielbereich </div>
Separators
Erste Zeile <br /> Zweite Zeile
<p>Erster Abschnitt</p> <hr /> <p>Zweiter Abschnitt</p>
Attribute
<a href="#" class="nav-link">Link</a> <div class="card card-featured"> Inhalt </div>
<a href="#" id="main-cta"> Jetzt starten </a>
Container
<div class="wrapper"> Inhalt hier </div>
<p>Das ist <span class="highlight">hervorgehoben</span>. </p>
<header> <h1>Seitentitel</h1> <nav>...</nav> </header>
<footer> <p>© 2025 Unternehmen</p> </footer>
<section class="about"> <h2>Über uns</h2> <p>Beschreibung...</p> </section>
<nav> <a href="/">Start</a> <a href="/about">Über uns</a> <a href="/contact">Kontakt</a> </nav>
Medien
<img src="bild.jpg"
alt="Bildbeschreibung" />
<img src="bild.jpg"
alt="Bildbeschreibung"
width="600" />
alt-Attribut ist Pflicht.<video src="video.mp4" controls> </video>
<audio controls src="audio.mp3"> </audio>
<picture>
<source media="(min-width: 800px)"
srcset="gross.jpg" />
<img src="klein.jpg"
alt="Beschreibung" />
</picture>
Formulare
<form action="/submit">
<label for="name">Name:</label>
<input type="text" id="name"
name="name" required />
<input type="submit"
value="Absenden" />
</form>
<label for="vorname">Vorname:</label>
<input type="text" id="vorname"
placeholder="Dein Vorname" />
text, email, password, number, date, url<label for="msg">Nachricht:</label>
<textarea id="msg" rows="5"
placeholder="Deine Nachricht">
</textarea>
<button class="btn-primary"> Klick mich </button>
<input type="radio" name="farbe"
id="rot" value="rot" checked />
<label for="rot">Rot</label>
<input type="radio" name="farbe"
id="blau" value="blau" />
<label for="blau">Blau</label>
name-Wert gruppiert die Optionen.<input type="checkbox"
name="themen" id="design"
value="design" />
<label for="design">Design</label>
<input type="checkbox"
name="themen" id="code"
value="code" />
<label for="code">Entwicklung</label>
<label for="land">Land:</label> <select id="land"> <option value="">Bitte wählen</option> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option> </select>
<fieldset> <legend>Kontaktdaten</legend> <label for="tel">Telefon:</label> <input type="tel" id="tel" /> </fieldset>
Styling Tags
<strong>Wichtiger Text</strong>
<em>Betonter Text</em>
<small>Kleingedruckter Hinweis</small>
<mark>Hervorgehobener Text</mark>
CSS in HTML
<head>
<style>
body { background: #f8f8f8; }
h1 { color: #333; }
</style>
</head>
<head>
<link rel="stylesheet"
href="style.css" />
</head>
JavaScript in HTML
<body>
<h1>Titel</h1>
<script>
console.log("Hallo Welt");
</script>
</body>
<body> <h1>Titel</h1> <script src="app.js"></script> </body>
SEO
<title>Seitentitel – Marke</title>
<meta name="description"
content="Kurze Beschreibung
der Seite." />
Tabellen
<table>
<thead>
<tr>
<th>Name</th>
<th>Rolle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>Designerin</td>
</tr>
<tr>
<td>Tom</td>
<td>Entwickler</td>
</tr>
</tbody>
</table>
<dl> <dt>HTML</dt> <dd>Hypertext Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> </dl>
Was ist die HTML-Referenz?
Die HTML-Referenz ist ein strukturiertes Nachschlagewerk für HTML-Elemente, Attribute und deren korrekte Verwendung im modernen Webdesign. Hier findest du die Tags, die das Fundament jeder Website bilden – sortiert, erklärt und auf den Punkt gebracht.
Der Gedanke dahinter: HTML ist die Sprache, die jeder Webdesigner spricht, aber nicht jeder spricht sie korrekt. Zwischen einem <div>-Container und dem semantisch passenden <article>-, <section>- oder <aside>-Element liegt oft nur ein kleiner Unterschied im Code – aber ein großer in der Qualität der Website.
Warum semantisches HTML wichtig ist
Ein häufiges Missverständnis: HTML sei nur das Gerüst, das Styling mache CSS, die Logik übernehme JavaScript. Technisch stimmt das. Aber HTML ist weit mehr als ein stummer Rahmen. Es transportiert Bedeutung. Ein <nav>-Element sagt Browsern, Screenreadern und Suchmaschinen: Hier ist die Navigation. Ein <div> sagt: Hier ist irgendwas.
Diese Bedeutungsebene – die Semantik – beeinflusst direkt, wie zugänglich, auffindbar und wartbar eine Website ist. Suchmaschinen bewerten semantisch sauberen Code besser. Screenreader können Inhalte sinnvoll vorlesen. Und Entwickler, die Monate später den Code öffnen, verstehen sofort die Struktur.
Die HTML-Referenz hilft dir dabei, die richtigen Elemente für den richtigen Zweck zu wählen. Nicht aus Perfektionismus, sondern weil es einen spürbaren Unterschied macht.
Was die HTML-Referenz abdeckt
Von den Grundbausteinen wie Überschriften, Absätzen und Links über Strukturelemente wie <header>, <main> und <footer> bis hin zu Formularen, Medieneinbettung und interaktiven Elementen wie <details> und <dialog>. Die Referenz bildet den aktuellen HTML-Living-Standard ab und berücksichtigt Elemente, die in der Praxis tatsächlich relevant sind.
Jeder Eintrag nennt den Einsatzzweck, die wichtigsten Attribute und typische Anwendungsfälle. Wo es sinnvoll ist, findest du Hinweise zu Barrierefreiheit und SEO-Relevanz – denn gutes HTML zahlt auf beides ein.
Für wen ist die HTML-Referenz gedacht?
Für alle, die Websites bauen. Einsteiger, die von Anfang an sauberes Markup lernen wollen, statt sich später mühsam umzugewöhnen. Fortgeschrittene, die bei weniger geläufigen Elementen wie <output>, <fieldset> oder <picture> kurz nachschlagen möchten. Und erfahrene Entwickler, die im Team für einheitliche Standards sorgen.
HTML ist die Basis von allem, was im Browser passiert. Diese Referenz sorgt dafür, dass die Basis stimmt.