Hinter jeder Website, die du im Browser öffnest, steckt HTML – die HyperText Markup Language. Sie ist das Skelett des Webs: Sie legt fest, welche Inhalte es gibt, wie sie strukturiert sind und in welcher Reihenfolge sie stehen. Wenn du verstehst, wie HTML funktioniert, verstehst du den Bauplan praktisch jeder Seite im Internet. In diesem Artikel lernst du die Struktur eines HTML-Dokuments kennen, was Tags und Attribute sind und worauf es bei sauberem, verständlichem Code ankommt.
Was HTML ist – und was es nicht ist
HTML ist eine Auszeichnungssprache, keine Programmiersprache. Es enthält keine Logik, keine Schleifen und keine Bedingungen. Stattdessen beschreibst du mit HTML die Bedeutung und Struktur von Inhalten: Das hier ist eine Überschrift, das ein Absatz, das ein Link, das ein Bild. Für das Aussehen ist CSS zuständig, für interaktives Verhalten JavaScript. Diese Dreiteilung – Inhalt (HTML), Gestaltung (CSS), Verhalten (JavaScript) – ist das Fundament jeder modernen Website.
Der große Vorteil: HTML ist nur Text. Du kannst eine vollständige Website in einem einfachen Texteditor schreiben und sie direkt im Browser öffnen. Kein Compiler, keine Installation. Genau diese Einfachheit hat das Web so groß gemacht.
Die Grundstruktur eines HTML-Dokuments
Jedes HTML-Dokument folgt demselben Grundgerüst. Hier die minimale, gültige Struktur:
- <!doctype html> – Die Doctype-Deklaration ganz oben sagt dem Browser, dass er ein modernes HTML5-Dokument vor sich hat. Ohne sie kann der Browser in einen veralteten „Quirks-Modus“ fallen, in dem Layouts unvorhersehbar dargestellt werden.
- <html lang="de"> – Das Wurzelelement, das alles umschließt. Das
lang-Attribut teilt Suchmaschinen und Screenreadern die Sprache mit. - <head> – Der Kopfbereich enthält Metadaten, die nicht direkt sichtbar sind: Titel, Zeichenkodierung, Verweise auf Stylesheets, Beschreibung für Suchmaschinen.
- <body> – Hier steht alles, was tatsächlich auf der Seite erscheint: Texte, Bilder, Buttons, Formulare.
Im <head> sind zwei Elemente besonders wichtig: <meta charset="utf-8"> stellt sicher, dass Umlaute und Sonderzeichen korrekt dargestellt werden, und <meta name="viewport"> sorgt dafür, dass die Seite auf Mobilgeräten richtig skaliert. Vergisst du Letzteres, sieht deine Seite auf dem Smartphone wie eine winzige Desktop-Version aus.
Tags, Elemente und Attribute
Der Grundbaustein von HTML ist das Tag. Die meisten Tags treten paarweise auf: ein öffnendes Tag wie <p> und ein schließendes Tag wie </p>. Alles dazwischen ist der Inhalt. Tag, Inhalt und schließendes Tag zusammen ergeben ein Element.
Einige Tags sind „leer“ und haben keinen Inhalt – etwa <img> für Bilder oder <br> für einen Zeilenumbruch. Sie werden ohne schließendes Tag geschrieben.
Attribute erweitern ein Tag um zusätzliche Informationen. Sie stehen im öffnenden Tag und bestehen aus Name und Wert:
<a href="https://kotsch.tech">– Dashref-Attribut gibt das Ziel eines Links an.<img src="bild.jpg" alt="Beschreibung">–srcverweist auf die Bilddatei,altliefert einen Alternativtext für Screenreader und für den Fall, dass das Bild nicht lädt.<input type="email" required>– Boolesche Attribute wierequiredbrauchen gar keinen Wert; ihre bloße Anwesenheit aktiviert das Verhalten.
Die wichtigsten Elemente im Body
Überschriften und Text
Überschriften reichen von <h1> (die wichtigste, meist der Seitentitel) bis <h6>. Sie bilden eine logische Hierarchie wie das Inhaltsverzeichnis eines Buches – nicht wie eine Schriftgrößen-Palette. Pro Seite sollte es nur eine <h1> geben, und du solltest keine Ebene überspringen (also nicht von h2 direkt auf h4). Für Fließtext nutzt du <p>, für hervorgehobene Begriffe <strong> (starke Bedeutung) und <em> (Betonung).
Listen
Es gibt drei Listentypen: <ul> für ungeordnete Aufzählungen (Punkte), <ol> für geordnete, nummerierte Listen und <dl> für Definitionslisten mit Begriff-Erklärung-Paaren. Innerhalb von ul und ol steht jeder Eintrag in einem <li>.
Links und Bilder
Der Anker <a> ist das Herzstück des Webs – er verbindet Dokumente miteinander. Mit dem target="_blank"-Attribut öffnet sich ein Link in einem neuen Tab; aus Sicherheitsgründen solltest du dann zusätzlich rel="noopener" setzen. Bilder bindest du mit <img> ein und gibst ihnen immer einen aussagekräftigen alt-Text.
Semantisches HTML: Bedeutung statt nur Boxen
Früher haben Entwickler fast alles mit verschachtelten <div>-Containern gebaut. Modernes HTML kennt semantische Elemente, die ausdrücken, welche Rolle ein Bereich spielt:
<header>– einleitender Bereich, oft mit Logo und Navigation<nav>– ein Navigationsmenü<main>– der zentrale, einzigartige Hauptinhalt der Seite<article>– ein in sich abgeschlossener Inhalt wie dieser Beitrag<section>– ein thematischer Abschnitt<aside>– Randinhalte wie Infoboxen<footer>– Fußbereich mit Impressum, Kontakt, Links
Diese Elemente verhalten sich optisch wie ein div, geben aber Suchmaschinen und assistiven Technologien klare Hinweise auf die Struktur. Ein Screenreader-Nutzer kann so direkt zum <main>-Bereich springen. Wer barrierefreie Seiten bauen will, kommt an semantischem HTML nicht vorbei.
Formulare: Eingaben vom Nutzer
Formulare sind der Weg, über den Nutzer Daten an eine Website senden. Ein Formular steckt in einem <form>-Element und besteht aus Eingabefeldern. Das vielseitigste ist <input>, dessen type-Attribut das Verhalten bestimmt: text, email, password, number, checkbox, date und viele mehr. Jedes Feld sollte ein zugehöriges <label> haben, damit klar ist, was eingegeben werden soll – und damit Screenreader das Feld korrekt vorlesen.
Moderne Browser bringen eine eingebaute Validierung mit: Setzt du type="email" und required, prüft der Browser schon vor dem Absenden, ob eine plausible E-Mail-Adresse eingegeben wurde. Das ersetzt keine serverseitige Prüfung, verbessert aber die Nutzererfahrung erheblich. Brauchst du sichere Zugangsdaten zum Testen von Formularen, hilft dir der Passwort-Generator in unseren Webtools.
Verschachtelung und gültiger Code
Elemente werden ineinander verschachtelt, müssen aber sauber geschlossen werden – immer in umgekehrter Reihenfolge zum Öffnen. Falsch ist <strong><em>Text</strong></em>, richtig <strong><em>Text</em></strong>. Browser sind erstaunlich tolerant und reparieren fehlerhaften Code oft selbst – aber verlassen solltest du dich darauf nie, denn das Ergebnis ist unvorhersehbar.
Ob dein HTML technisch korrekt ist, prüfst du mit dem offiziellen W3C-Validator. Er findet fehlende schließende Tags, doppelte IDs und ungültige Verschachtelungen. Gerade am Anfang ist das ein wertvolles Lernwerkzeug.
Häufige Anfängerfehler
- Überschriften für Optik missbrauchen: Eine
<h2>nutzen, nur weil der Text groß sein soll – stattdessen mit CSS gestalten. - Fehlender alt-Text: Bilder ohne Alternativtext schaden der Barrierefreiheit und dem SEO.
- Inline-Styles überall: Gestaltung gehört in CSS, nicht in
style-Attribute verstreut. - Vergessene Zeichenkodierung: Ohne
charset="utf-8"werden Umlaute zu Buchstabensalat. - Block- in Inline-Elemente packen: Ein
<div>gehört nicht in ein<span>oder einen Link.
Wie es weitergeht
HTML lernst du am besten, indem du es schreibst. Öffne einen Editor, baue eine einfache Seite mit Überschrift, Absatz, Liste und Bild und schau dir das Ergebnis im Browser an. Sobald die Struktur sitzt, kommt CSS für das Aussehen und JavaScript für Interaktivität dazu. In unserem Node.js- und npm-Einstieg geht es weiter mit dem Werkzeugkasten moderner Webentwicklung, und wer direkt nützliche kleine Helfer ausprobieren möchte, findet im Webtools-Bereich jede Menge Beispiele für gut strukturierte HTML-Formulare in Aktion.
Häufige Fragen
Muss ich HTML auswendig können?
Nein. Du brauchst ein Verständnis für die Struktur und die wichtigsten zwei Dutzend Elemente. Den Rest schlägst du nach – selbst erfahrene Entwickler nutzen Referenzen wie das MDN Web Docs täglich.
Brauche ich ein teures Programm zum Schreiben von HTML?
Nein. Ein kostenloser Editor wie Visual Studio Code reicht völlig. Im Notfall tut es sogar der einfache Texteditor des Betriebssystems. Wichtig ist nur, die Datei mit der Endung .html zu speichern.
Was ist der Unterschied zwischen HTML und HTML5?
HTML5 ist die aktuelle Version des Standards und bringt semantische Elemente, native Audio- und Video-Einbindung, neue Formularfeld-Typen und mehr mit. Wenn heute von HTML die Rede ist, ist faktisch immer HTML5 gemeint.
Kann ich mit reinem HTML eine vollständige Website bauen?
Technisch ja, aber sie wäre ungestaltet und statisch. Für ein ansprechendes Ergebnis brauchst du CSS, und für dynamisches Verhalten JavaScript. HTML bleibt aber immer das Fundament, auf dem alles andere aufsetzt.