Was ist HTML?
HTML steht für HyperText Markup Language. Es ist die Standardsprache, die verwendet wird, um Inhalte im Web zu erstellen und zu strukturieren. Jede Seite, die Sie jemals besucht haben – vom einfachen persönlichen Blog bis hin zur komplexen Web-Applikation – basiert auf HTML.
Der Name ist Programm. HyperText bedeutet Text, der auf anderen Text verlinkt – die Idee, die das Web erst ermöglicht hat: durch Links verbundene Dokumente. Markup bedeutet, dass Sie Inhalte in Tags einschließen, die beschreiben, worum es sich handelt. Language bedeutet, dass es Regeln und ein gemeinsames Vokabular gibt – obwohl HTML keine Programmiersprache ist.
Wenn Sie HTML schreiben, beschreiben Sie die Struktur und Bedeutung eines Dokuments: Welcher Teil ist eine Überschrift, welcher ein Absatz, was ist ein Navigationsmenü, wo ein Bild platziert wird und wie ein Formular aufgebaut ist. Der Browser liest Ihr HTML und wandelt es in die Seite um, die die Nutzer sehen. Ohne HTML existiert im Web nichts.
Am besten betrachten Sie HTML als das Skelett einer Seite. Es legt fest, dass hier eine Überschrift steht, dort ein Absatz, ein Bild, ein Link und ein Formular – aber es sagt nichts über Farbe, Größe oder Position aus. Diese Trennung ist beabsichtigt: Die Struktur gehört zu HTML, das Aussehen zu CSS und das Verhalten zu JavaScript. Da jede Ebene eine eigene Aufgabe hat, bleiben Seiten einfacher zu erstellen, zu testen und zu warten, und eine Designänderung zwingt Sie niemals dazu, Ihre Inhalte neu zu schreiben.
Wie HTML funktioniert
HTML besteht aus Elementen. Ein Element ist ein Inhaltsstück, das in Tags eingeschlossen ist. Ein Tag wird zwischen spitzen Klammern geschrieben, und die meisten Elemente haben ein öffnendes und ein schließendes Tag:
// index.html
<p class="intro">Hello, world!</p>Im Detail bedeutet das:
<p>ist das öffnende Tag und</p>ist das schließende Tag.pist der Elementname — in diesem Fall ein Paragraph.class="intro"ist ein Attribut: eine Zusatzinformation über das Element.Hello, world!ist der Inhalt.
Einige Elemente sind sogenannte Void Elements; sie haben keinen Inhalt und kein schließendes Tag, wie zum Beispiel <img>, <br>, <input> und <meta>. Andere Elemente werden ineinander verschachtelt, um einen Baum zu bilden – genau das ist es, was der Browser beim Parsen Ihrer Datei erstellt.
Wenn ein Browser eine HTML-Datei lädt, parst er das Markup von oben nach unten und erstellt das DOM (Document Object Model) — einen Baum aus Objekten, die Ihre Seite repräsentieren. CSS stylt anschließend diesen Baum, und JavaScript kann ihn auslesen und modifizieren. Das ist die gesamte Web-Plattform in einem Satz zusammengefasst.
Da das DOM ein Baum ist, hat jedes Element ein Eltern-Element (Parent) und kann Kind-Elemente (Children) haben. Das <body>-Element enthält Ihre Überschriften und Paragraphen, und jeder dieser wiederum kann Links, Bilder und Text enthalten. Wenn JavaScript später ein Element hinzufügt oder entfernt, wird genau dieser Baum bearbeitet — weshalb das Verständnis des DOM den Rest der Frontend-Entwicklung wesentlich erleichtert.
Der Aufbau eines HTML-Dokuments
Jede HTML-Seite folgt demselben grundlegenden Skelett:
// index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My first page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>I am learning <strong>HTML</strong>.</p>
</body>
</html>Jeder Teil hat eine bestimmte Aufgabe:
<!doctype html>weist den Browser an, den Standards-Modus zu verwenden.<html lang="en">ist das Wurzelelement; daslang-Attribut definiert die Sprache der Seite für Screenreader und Suchmaschinen.<head>enthält Metadaten, die nicht angezeigt werden – Zeichensatz, Viewport, Titel und Links zu CSS.<title>ist der Name, der im Browser-Tab und in den Suchergebnissen angezeigt wird.<body>enthält alles, was der Benutzer tatsächlich sieht.
Deine erste HTML-Seite schreiben
Der schnellste Weg, HTML zu verstehen, ist, es selbst zu schreiben. Erstelle eine Datei namens index.html, füge das obige Grundgerüst ein und öffne sie in deinem Browser. Du hast gerade deine erste Webseite erstellt.
Gehe nun Schritt für Schritt vor und füge einzelne Elemente hinzu:
- Füge ein
<h1>für den Seitentitel und ein<p>für eine Einleitung hinzu. - Füge einen Link mit
<a href="https://example.com">Example</a>hinzu. - Füge ein Bild mit
<img src="photo.jpg" alt="A description" />hinzu. - Gruppiere Inhalte mit
<header>,<main>und<footer>. - Öffne die Datei erneut – der Browser aktualisiert sich bei jedem Speichern sofort.
Du benötigst keine Tools, Frameworks oder Build-Steps für den Start. Ein Texteditor und ein Browser genügen. Diese niedrige Einstiegshürde ist genau der Grund, warum HTML die beste erste Sprache für alle ist, die in die Webentwicklung einsteigen.
Semantisches HTML: der Unterschied zwischen einem div und einem article
Man kann eine komplette Seite aus <div>-Elementen bauen, aber man sollte es nicht tun. Semantisches HTML bedeutet, Elemente zu wählen, die ihre Bedeutung beschreiben:
<header>,<nav>,<main>,<aside>,<footer>— Orientierungspunkte der Seite (Landmarks).<article>— ein eigenständiger Inhaltsabschnitt.<section>— eine thematische Gruppierung von Inhalten.<figure>und<figcaption>— Medien mit einer Bildunterschrift.<time>,<mark>,<address>— Inhalte mit einer spezifischen Bedeutung.
Vergleiche eine vage Struktur:
<!-- bad.html -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="content">
<div class="post">...</div>
</div>mit einer semantischen:
<!-- good.html -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>Beide können identisch aussehen, aber die semantische Version teilt Screenreadern, Suchmaschinen und anderen Entwicklern genau mit, worum es sich bei jedem Teil handelt. Es ist eine der effektivsten Gewohnheiten in der Frontend-Entwicklung, die es kostet, sie vom ersten Tag an konsequent umzusetzen.
HTML-Formulare und Benutzereingaben
Formulare sind die Schnittstelle, über die Benutzer Daten an einen Server senden – sei es für Logins, Suchanfragen, Checkouts oder Registrierungen. Das <form>-Element umschließt die Eingabefelder, und <label> verknüpft eine Beschreibung mit jedem Steuerelement:
<!-- subscribe.html -->
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required />
<button type="submit">Subscribe</button>
</form>HTML5 hat viele neue Input-Typen hinzugefügt – email, url, number, date, range, color, search – sowie integrierte Validierungs-Attribute wie required, minlength, pattern und min/max. Kombinieren Sie Inputs immer mit Labels: Dies ist für die Barrierefreiheit zwingend erforderlich und macht Formulare mit der Tastatur und Screenreadern bedienbar.
HTML vs HTML5
| Feature | HTML (4.01) | HTML5 |
|---|---|---|
| Semantische Tags | Eingeschränkt | header, nav, article, section, aside, footer, main |
| Medien | Plugins erforderlich | Native <audio> und <video> |
| Grafiken | Keine | <canvas> und <svg> |
| Input-Typen | Basis | email, date, range, color und mehr |
| APIs | Minimal | Storage, Geolocation, Drag & Drop, Offline |
| Doctype | Lang und komplex | Einfaches <!doctype html> |
Barrierefreiheit und SEO beginnen mit HTML
Zwei der wichtigsten Ziele in der Webentwicklung werden maßgeblich durch dein HTML bestimmt.
Barrierefreiheit hängt von einem aussagekräftigen Markup ab: einer logischen Überschriftenstruktur, alt-Texten bei Bildern, Labels für Formularfelder, Landmark-Elementen und ausreichendem Kontrast. Assistive Technologien navigieren durch deine Seite auf die gleiche Weise, wie eine Suchmaschine sie liest – über die Struktur. Ein Nutzer von Screenreadern kann zwischen Landmarks und Überschriften springen, genau weil das HTML definiert, worum es sich bei dem jeweiligen Bereich handelt.
SEO beginnt ebenfalls mit HTML. Ein einziger beschreibender <h1>, ein gut geschriebener <title> und eine Meta-Description, aussagekräftige Linktexte, strukturierte Daten sowie ein schnelles, crawlbares Markup helfen Suchmaschinen dabei, deine Inhalte zu verstehen und zu ranken. Kein JavaScript der Welt kann eine Seite mit fehlerhafter HTML-Semantik retten.
Best Practices
Bei gutem HTML geht es nicht darum, Tags auswendig zu lernen – sondern darum, das richtige Element für den jeweiligen Zweck zu wählen und das Dokument sauber zu halten. Diese Gewohnheiten lassen sich in Sekunden umsetzen und zahlen sich über die gesamte Lebensdauer eines Projekts aus:
- Verwenden Sie semantische Elemente anstelle von
<div>-Suppe. - Verwenden Sie nur ein
<h1>pro Seite und überspringen Sie niemals Überschriftenebenen. - Setzen Sie immer
langbei<html>. - Fügen Sie Bildern aussagekräftige
alt-Texte hinzu und verwenden Siealt=""für rein dekorative Bilder. - Verbinden Sie jedes Formularfeld mit einem
<label>. - Verwenden Sie beschreibende Linktexte – niemals „hier klicken“.
- Validieren Sie Ihr Markup mit dem W3C-Validator.
- Bevorzugen Sie Progressive Enhancement: Die Seite sollte auch ohne JavaScript funktionieren.
- Halten Sie die Dokumentstruktur flach und übersichtlich.
Häufige Fehler
- Alles mit
<div>und<span>aufbauen. - Mehrere
<h1>s oder übersprungene Überschriften-Ebenen. - Fehlender oder lieblos geschriebener
alt-Text. - Vage Linktexte wie „mehr lesen“.
- Verwendung veralteter Tags wie
<center>und<font>. - Das
lang-Attribut vergessen. - Umfangreiche Inline-Styles anstelle von CSS.
- Unbeschriftete Formular-Inputs.
Lohnt es sich 2026 noch, HTML zu lernen?
Absolut. HTML wird nicht verschwinden. Jedes Framework — React, Vue, Svelte, Astro und Next.js — rendert letztendlich HTML, das der Browser anzeigt. Wenn Sie also eine Komponente schreiben, beschreiben Sie immer noch eine Struktur. Entwickler, die HTML verstehen, erstellen zugänglichere, schnellere und suchmaschinenfreundlichere Interfaces, weil sie wissen, welches Element sie verwenden müssen, anstatt alles aus generischen Containern neu aufzubauen. Als erste Sprache ist es zudem unschlagbar: Sie sehen innerhalb von Minuten Ergebnisse, ganz ohne Tooling oder Build-Step, und jede spätere Fähigkeit in der Webentwicklung baut auf diesem Fundament auf. Lernen Sie es einmal richtig, und Sie werden es für den Rest Ihrer Karriere nutzen.
HTML lernen
HTML ist die einsteigerfreundlichste Web-Technologie und gleichzeitig eine der am meisten unterschätzten. Ein praktischer Lernpfad:
- Lerne das Grundgerüst eines Dokuments und die gängigsten Elemente.
- Erstelle eine einfache Seite mit Überschriften, Absätzen, Links, Listen und Bildern.
- Lerne semantische Elemente kennen und setze sie in echten Layouts ein.
- Übe den Umgang mit Formularen, Labels und Validierungen.
- Beschäftige dich mit den Grundlagen der Barrierefreiheit und prüfe deine Seiten darauf.
- Validiere dein HTML und behebe die Warnungen.
- Baue kleine Projekte – eine Profilseite, ein Blog-Layout, eine Landingpage –, bis dir die Tags in Fleisch und Blut übergegangen sind.
Von dort aus kannst du zu CSS, dann zu JavaScript und schließlich zu einem Framework übergehen. Unser interaktives HTML-Tutorial führt dich mit praktischen Übungen durch jeden dieser Schritte.