Lernziele
- Verstehen, wozu HTML dient und was es nicht tut
- Den Aufbau eines HTML-Dokuments kennen
- Die wichtigsten Elemente unterscheiden können
- Wissen, warum semantisches HTML für SEO und Barrierefreiheit zählt
HTML ist eine Auszeichnungssprache
HTML ist keine Programmiersprache — es gibt keine Schleifen, keine Bedingungen, keine Berechnungen. Stattdessen „zeichnet“ HTML Inhalt mit Tags aus und gibt ihm dadurch Bedeutung. Der Browser liest diese Tags und baut daraus die Seitenstruktur, den sogenannten DOM.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Meine erste Seite</title>
</head>
<body>
<h1>Hallo Welt</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>Die wichtigsten Elemente
- <h1> bis <h6> — Überschriften in absteigender Wichtigkeit
- <p> — ein Textabsatz
- <a> — ein Link (Anker) zu einer anderen Seite
- <img> — ein Bild
- <ul>, <ol>, <li> — Listen
- <header>, <main>, <footer>, <nav> — semantische Bereiche der Seite
Warum semantisches HTML wichtig ist
Semantische Elemente beschreiben ihre Rolle: <nav> ist eine Navigation, <article> ein eigenständiger Inhalt. Suchmaschinen und Screenreader verstehen dadurch die Seite besser. Wer nur <div> verwendet, verschenkt SEO-Potenzial und Barrierefreiheit.
So ist ein HTML-Dokument aufgebaut
Jedes HTML-Dokument folgt demselben Grundgerüst. Ganz oben steht die Zeile <!DOCTYPE html>, die dem Browser sagt: Hier kommt modernes HTML. Darunter umschließt das <html>-Element die gesamte Seite. Es teilt sich in zwei Bereiche: Der <head> enthält Informationen über die Seite (Titel, Zeichensatz, Meta-Angaben, verlinkte Stylesheets) — Dinge, die der Nutzer nicht direkt sieht. Der <body> enthält den sichtbaren Inhalt: Überschriften, Texte, Bilder, Links. Diese klare Trennung von Metadaten und Inhalt ist der Grund, warum HTML auch bei großen Seiten übersichtlich bleibt.
Attribute erweitern Elemente
Viele Tags allein reichen nicht — sie brauchen Zusatzinformationen. Genau das leisten Attribute: Sie stehen im öffnenden Tag und geben dem Element weitere Eigenschaften mit. Ein Link (<a>) braucht das href-Attribut mit der Zieladresse, ein Bild (<img>) das src-Attribut mit der Bildquelle und das alt-Attribut mit einer Textbeschreibung. Die Attribute class und id dienen dazu, Elemente für CSS und JavaScript ansprechbar zu machen. Wer Attribute versteht, kann HTML gezielt mit Verhalten und Gestaltung verbinden.
Formulare, Medien und Verlinkung
HTML kann weit mehr als Text darstellen. Mit <form>, <input>, <button> und <label> entstehen Formulare — die Grundlage für Kontaktseiten, Anmeldungen und Suchfelder. Über <img>, <video> und <audio> bindet man Medien ein. Und mit dem Anker-Tag <a> verknüpft man Seiten miteinander: interne Links führen durch die eigene Website, externe Links verweisen nach außen. Diese Verlinkung ist das „Hyper“ in HyperText und der Grund, warum das Web überhaupt ein zusammenhängendes Netz ist.
HTML als Fundament für SEO
Sauberes HTML ist keine Formsache, sondern zahlt direkt auf die Sichtbarkeit ein. Suchmaschinen lesen den HTML-Code, um Inhalt und Struktur einer Seite zu verstehen. Ein aussagekräftiger <title>, eine sinnvolle Überschriften-Hierarchie und semantische Elemente helfen ihnen dabei, den Inhalt richtig einzuordnen. Auch Screenreader für blinde Nutzer stützen sich auf diese Struktur. Wer HTML von Anfang an sauber schreibt, legt damit das Fundament für gutes Ranking und echte Barrierefreiheit.
Wie der Browser ein Dokument abarbeitet
Der Browser liest ein Dokument von oben nach unten und übersetzt es dabei Schritt für Schritt in die Baumstruktur des DOM. Diese Reihenfolge hat spürbare Folgen: Ein im <head> verlinktes Stylesheet muss geladen sein, bevor die Seite dargestellt wird — sonst würde der Inhalt kurz unformatiert aufblitzen. Ein klassisches <script> unterbricht den Aufbau sogar vollständig, bis es geladen und ausgeführt ist. Genau deshalb platziert man Skripte ans Ende des <body> oder versieht sie mit dem Attribut defer, damit der Browser das Dokument erst fertig aufbauen kann. Wer diesen Ablauf kennt, erkennt viele Ladezeit-Probleme, ohne lange messen zu müssen.
Fehlertoleranz und Validierung
HTML ist auffällig nachsichtig. Fehlt ein schließendes Tag oder sind Elemente falsch verschachtelt, bricht der Browser nicht ab, sondern repariert das Dokument nach festen Regeln des Standards. Bequem — aber tückisch: Das reparierte Ergebnis entspricht nicht zwangsläufig dem, was gemeint war, und die Abweichung fällt oft erst auf, wenn CSS-Regeln oder JavaScript-Zugriffe plötzlich ins Leere greifen. Ein Validator wie der des W3C prüft das Markup gegen die Spezifikation und weist genau auf solche Stellen hin. Besonders bei Formularen, Tabellen und verschachtelten Listen lohnt dieser Blick, weil dort Strukturfehler am häufigsten entstehen.
Wichtige Begriffe
- Tag
- Ein HTML-Befehl in spitzen Klammern, z. B. <p>.
- Element
- Ein öffnendes Tag, Inhalt und schließendes Tag zusammen.
- Attribut
- Zusatzinfo an einem Tag, z. B. href bei einem Link.
- DOM
- Die Baumstruktur, die der Browser aus dem HTML erzeugt.
- Void-Element
- Element ohne Inhalt und ohne schließendes Tag, z. B. <img> oder <br>.
Typische Fehler
- Nur <div> statt semantischer Elemente verwenden
- Mehrere <h1> ohne Struktur — schadet der SEO-Hierarchie
- Bilder ohne alt-Attribut — schlecht für Barrierefreiheit
- Tags nicht schließen und auf den Browser hoffen
Best Practices
- Eine sinnvolle Überschriften-Hierarchie (genau eine <h1> pro Seite)
- Semantische Elemente statt div-Suppe
- Jedes Bild mit aussagekräftigem alt-Text
- Sprache im <html lang>-Attribut angeben
Zusammenfassung
HTML strukturiert Inhalte über Tags und gibt ihnen Bedeutung. Es ist keine Programmiersprache, sondern das semantische Gerüst jeder Website. Sauberes, semantisches HTML ist die Basis für gute SEO, Barrierefreiheit und wartbaren Code.
Häufige Fragen
Nein. HTML ist eine Auszeichnungssprache. Es strukturiert Inhalte, führt aber keine Logik aus. Logik übernimmt JavaScript.
Weiterführende Links
Braucht ihr Unterstützung bei Webentwicklung?
Wir setzen genau solche Themen in echte Projekte um.