HTML-Grundstruktur: DOCTYPE, head, body

HTML (HyperText Markup Language) ist die Sprache in der Webseiten geschrieben werden. Es ist keine Programmiersprache im klassischen Sinne (es gibt keine Schleifen, Variablen oder Bedingungen wie in Python oder Java), sondern eine Auszeichnungssprache: du markierst mit Tags welche Bedeutung welcher Teil des Texts hat – „das ist eine Überschrift", „das ist ein Link", „das ist ein Bild". Der Browser entscheidet dann wie er das darstellt.

Diese Lektion zeigt dir das absolute Grundgerüst: das HTML-Skelett aus dem jede Webseite besteht. Sobald du diese Struktur verinnerlicht hast, ist alles weitere nur noch Fülle. Du brauchst dafür einen Texteditor (VS Code, Sublime, Notepad++) und einen Browser. Mehr nicht.

1) Anatomie eines HTML-Tags

Alles in HTML basiert auf Tags. Ein Tag ist ein Wort in spitzen Klammern: <p>, <h1>, <img>. Die meisten Tags kommen paarweise: ein öffnendes und ein schließendes Tag, mit dem Inhalt dazwischen. Klick die Teile für Details:

Aufbau eines HTML-Elements

<a href="..." > Klick mich </a>

← Klick einen Teil des Tags.

Schließende Tags haben einen Slash /: <p>...</p>. Manche Elemente haben keinen Inhalt und schließen sich selbst – z.B. <img src="..."> oder <br>. Die nennt man „void elements". Tag-Namen werden klein geschrieben (Konvention), Attribute auch. HTML ist tolerant – Browser versuchen viel zu reparieren – aber sauberer Code spart Ärger.

2) Das HTML5-Skelett

Jede HTML-Seite folgt demselben Grundgerüst. Klicke eine Zeile im Code, um zu erfahren wofür sie da ist und was rechts in der „Browser-Vorschau" passiert:

Das Standard-HTML5-Gerüst

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Meine Seite</title> </head> <body> <h1>Hallo Welt</h1> <p>Meine erste Webseite.</p> </body> </html>

Meine Seite

Hallo Welt

Meine erste Webseite.

← Klick eine Code-Zeile.

Speichere diesen Code als index.html und öffne ihn im Browser per Doppelklick – fertig ist deine erste Webseite. Einrückung ist nicht Pflicht (HTML ist da anders als Python), aber sie hilft enorm beim Lesen. Konvention: 2 oder 4 Leerzeichen pro Verschachtelungs-Ebene.

3) Live-Editor: HTML ändern und sofort sehen

Hier kannst du HTML eintippen und siehst direkt was im Browser dabei rauskommt. Ändere den Code – die Vorschau aktualisiert sich live:

HTML Live-Editor

HTML-Code

Browser-Vorschau

In echten Projekten benutzt du dafür einen Editor (VS Code) und öffnest die Datei im Browser. Mit der Live-Server-Extension in VS Code aktualisiert sich der Browser automatisch beim Speichern. Online-Spielwiesen: codepen.io, jsfiddle.net, codesandbox.io – ideal zum Experimentieren ohne lokal installieren zu müssen.

4) Block- vs. Inline-Elemente

HTML-Elemente fallen grob in zwei Kategorien:

Block-Elemente nehmen die volle Breite ein und beginnen auf einer neuen Zeile. Beispiele: <p>, <h1>, <div>, <ul>, <section>.
Inline-Elemente nehmen nur so viel Platz wie ihr Inhalt und stehen im Textfluss. Beispiele: <a>, <span>, <strong>, <em>, <img>.

Das ist nicht nur eine optische Sache – sondern eine semantische und auch technische. Mit CSS lässt sich das Verhalten ändern (z.B. display: block oder display: inline), aber der Default sollte schon passen. Faustregel: Inhalte die als zusammengehöriger „Block" gedacht sind (Absatz, Liste, Tabelle) → Block-Element. Inline-Markierungen innerhalb eines Texts (Link, Hervorhebung, kleines Icon) → Inline.

5) Kommentare und Whitespace

Wie in praktisch jeder Programmier- und Auszeichnungssprache kannst du auch in HTML Kommentare schreiben. Das hilft dir und anderen den Code zu verstehen:

<!-- Das ist ein HTML-Kommentar -->

<!-- Browser ignorieren ihn komplett -->

<p>Sichtbarer Text</p>

<!-- <p>Diese Zeile ist auskommentiert</p> -->

HTML ist sehr großzügig mit Whitespace: mehrere Leerzeichen oder Zeilenumbrüche werden im gerenderten Ergebnis zu einem einzelnen Leerzeichen zusammengefasst. <p>Hallo Welt</p> wird genauso angezeigt wie <p>Hallo Welt</p>. Mit   (non-breaking space) erzwingst du ein echtes Leerzeichen.

6) Sauberes vs. fehlerhaftes HTML

Browser sind tolerant: auch fehlerhaftes HTML wird meist irgendwie dargestellt. Das ist Segen und Fluch – Anfänger denken oft „läuft ja" und gewöhnen sich schlampige Strukturen an, die sich später rächen. Daher hier ein direkter Vergleich:

Klassische Fehler vs. korrekt

✗ Falsch verschachtelt

✓ Richtig (LIFO)

✗ Nicht geschlossen

✓ Korrekt geschlossen

✗ Attribut ohne Quotes

✓ Mit Quotes

Validatoren helfen: validator.w3.org nimmt deinen HTML-Code und sagt dir was nicht stimmt. Auch deine IDE kann Fehler markieren. Sauberes HTML ist die Basis für: bessere SEO, bessere Barrierefreiheit (Screenreader), vorhersagbares Verhalten in allen Browsern, weniger Bugs mit JavaScript und CSS.

7) Semantik: warum die Tag-Auswahl wichtig ist

Du könntest theoretisch alles mit <div> bauen – das ist der generische Container. Aber HTML hat dutzende spezifische Tags aus gutem Grund. Wenn du eine Überschrift mit <h1> schreibst statt <div> mit großer Schrift, verstehen Suchmaschinen und Screenreader was du meinst.

Das nennt sich Semantik: die Bedeutung. Drei Vorteile von semantischem HTML: 1) Bessere SEO – Google versteht den Aufbau. 2) Barrierefreiheit – Screenreader-Nutzer können navigieren. 3) Lesbarkeit – andere Entwickler verstehen deinen Code. Mehr zu semantischen Tags wie <header>, <nav>, <article> in Lektion 4.

Zusammenfassung

HTML = Auszeichnungssprache mit Tags. Aufbau: <tag attribut="wert">Inhalt</tag>. Pflicht-Skelett jeder Seite: <!DOCTYPE html> + <html lang="..."> + <head> (Metadaten, Title, Charset, Viewport) + <body> (sichtbarer Inhalt). Tags müssen korrekt verschachtelt und geschlossen sein. Block-Elemente nehmen volle Breite, Inline-Elemente nur den Inhalt. Kommentare in . Semantische Tags (h1, p, ul statt überall div) sind besser für SEO, Barrierefreiheit und Lesbarkeit. Validator unter validator.w3.org.