HTML Referenz

Alle HTML-Elemente auf einen Blick, kompakt, auf Deutsch und mit praktischen Code-Beispielen. Jeder Eintrag enthält Syntax, Attribute und Live-Previews, die das Ergebnis direkt im Browser zeigen.

Stöbere durch die Kategorien oder nutze die Grundlagen-Artikel weiter unten, wenn du HTML von Anfang an lernen möchtest.

Grundlagen

Bevor du in die einzelnen HTML-Elemente eintauchst, lohnt es sich, die Grundlagen zu verstehen. Diese Artikel führen dich Schritt für Schritt durch die wichtigsten Konzepte.

Kapitel 1

Was ist HTML?

HTML ist die Sprache des Webs. Lerne, was HTML ist, wofür es verwendet wird und wie es mit CSS und JavaScript zusammenarbeitet.

Kapitel 2

HTML-Dokumentstruktur

Jedes HTML-Dokument folgt einer festen Grundstruktur: DOCTYPE, html, head und body. Lerne, was jeder Teil bedeutet.

Kapitel 3

Tags & Elemente

HTML besteht aus Tags und Elementen. Lerne den Unterschied, wie verschachteln funktioniert und was Void-Elemente sind.

Kapitel 4

HTML-Attribute

Attribute erweitern HTML-Elemente mit zusätzlichen Informationen. Lerne globale Attribute, Boolean-Attribute, data-Attribute und ARIA.

Kapitel 5

Semantisches HTML

Semantische HTML-Elemente geben deinem Inhalt Bedeutung. Lerne, warum header, nav, main und article besser sind als div.

Kapitel 6

Block- vs. Inline-Elemente

Block-Elemente nehmen die volle Breite ein, Inline-Elemente fließen im Text mit. Lerne den Unterschied und die CSS display-Eigenschaft.

Kapitel 7

Barrierefreiheit in HTML

Barrierefreies HTML sorgt dafür, dass alle Menschen deine Website nutzen können. Lerne ARIA-Rollen, Alt-Texte, Formulare und Tastaturnavigation.

Kapitel 8

HTML validieren

Lerne, wie du HTML-Code auf Fehler prüfst. W3C Validator, Browser DevTools und häufige Validierungsfehler erklärt.

Kapitel 9

Das popover-Attribut

Mit dem popover-Attribut baust du Overlays, Menüs und Hinweise direkt in HTML. Lerne popovertarget, Light Dismiss, den Top Layer und die Popover-API.

Grundstruktur

Jede HTML-Seite beginnt mit derselben Grundstruktur. Diese Elemente bilden das Gerüst, in das alle weiteren Inhalte eingebettet werden.

<!DOCTYPE html> <body> <div> <head> <html> <span>

Text & Typografie

Überschriften, Absätze, Hervorhebungen und mehr: mit diesen Elementen strukturierst und formatierst du Textinhalte auf deiner Seite.

Überschriften
<h1> <h2> <h3> <h4> <h5> <h6>
Text & Absätze
<address> <br> <hr> <p> <wbr>
Hervorhebung
<abbr> <b> <bdi> <bdo> <del> <dfn> <em> <i> <ins> <mark> <rp> <rt> <ruby> <s> <small> <strong> <sub> <sup> <u>
Zitate & Quellen
<blockquote> <cite> <q>
Code & Technik
<code> <data> <kbd> <pre> <samp> <time> <var>

Listen

Listen helfen dir, Inhalte übersichtlich aufzuzählen, ob als nummerierte Schritte, Aufzählungspunkte oder Begriffserklärungen.

<dd> <dl> <dt> <li> <ol> <ul>

Formulare

Formulare machen deine Seite interaktiv. Hier findest du Eingabefelder, Buttons, Auswahllisten und alles, was du für Nutzereingaben brauchst.

<button> <datalist> <fieldset> <form> <input> <label> <legend> <meter> <optgroup> <option> <output> <progress> <select> <textarea>

Tabellen

Tabellen eignen sich für strukturierte Daten wie Vergleiche, Statistiken oder Zeitpläne. Diese Elemente sorgen für den richtigen Aufbau.

<caption> <col> <colgroup> <table> <tbody> <td> <tfoot> <th> <thead> <tr>

Semantik

Semantische Elemente geben deiner Seite eine klare Bedeutung. Browser, Screenreader und Suchmaschinen verstehen so den Aufbau deiner Inhalte.

<article> <aside> <footer> <header> <hgroup> <main> <nav> <search> <section>

Einbettung & Widgets

Externe Inhalte einbetten, Dialoge anzeigen oder interaktive Widgets erstellen. Diese Elemente erweitern die Möglichkeiten deiner Seite.

<canvas> <details> <dialog> <slot> <summary> <template>

Meta & Scripting

Metadaten, Stylesheets und Skripte: diese Elemente arbeiten im Hintergrund und steuern, wie Browser deine Seite laden und darstellen.

<base> <link> <meta> <noscript> <param> Veraltet <script> <style> <title>

Veraltete Elemente

Diese Elemente sind veraltet und sollten in neuen Projekten nicht mehr verwendet werden. Hier erfährst du, welche modernen Alternativen es gibt.

<portal> Veraltet