Dieser Artikel ist Teil 1 einer vierteiligen Serie zu den Grundlagen von HTML und CSS. Weiter geht es mit Teil 2: CSS Grundlagen, Teil 3: Flexbox und Grid und Teil 4: Responsive Webdesign.
Jede Webseite, die du je besucht hast, basiert auf HTML. Es ist die Sprache, mit der Browser verstehen, was Text, was ein Bild und was eine Überschrift ist. Wer Webentwicklung lernen will, fängt hier an – nicht bei einem Framework, sondern bei den Bausteinen, aus denen jede einzelne Seite im Web besteht. Dieser Guide erklärt dir Schritt für Schritt, wie HTML funktioniert, und zeigt dir, wie du deine erste eigene HTML-Seite schreibst.
Inhaltsverzeichnis
Was ist HTML überhaupt?
HTML steht für “HyperText Markup Language”. Es ist keine Programmiersprache im klassischen Sinn, sondern eine Auszeichnungssprache (Markup Language): Sie beschreibt die Struktur und Bedeutung von Inhalten, nicht deren Verhalten. Mit HTML sagst du dem Browser: “Das hier ist eine Überschrift”, “das hier ist ein Absatz”, “das hier ist ein Link”. Wie diese Elemente am Ende aussehen, übernimmt CSS (dazu mehr in Teil 2 dieser Serie), und wie sie sich verhalten, übernimmt JavaScript.
Jede HTML-Datei ist eine einfache Textdatei mit der Endung .html, die ein Browser lesen und in eine sichtbare Seite verwandeln kann. Du brauchst dafür keine teure Software – ein einfacher Texteditor (z. B. VS Code, Notepad++ oder sogar der Standard-Editor deines Betriebssystems) reicht völlig aus.
Tags, Elemente und Attribute: Die Grundbausteine
HTML besteht aus sogenannten Tags. Ein Tag wird in spitzen Klammern geschrieben, zum Beispiel <p> für einen Absatz. Die meisten Tags kommen paarweise vor: ein öffnendes Tag und ein schließendes Tag (erkennbar am Schrägstrich):
<p>Das ist ein Absatz Text.</p>Öffnendes Tag, Inhalt und schließendes Tag zusammen bilden ein Element. Manche Elemente haben keinen Inhalt und brauchen deshalb kein schließendes Tag, zum Beispiel ein Bild:
<img src="katze.jpg" alt="Eine schlafende Katze">Hier siehst du auch Attribute: src und alt sind zusätzliche Informationen innerhalb des öffnenden Tags, die dem Browser mehr Kontext geben. src gibt den Pfad zur Bilddatei an, alt liefert einen Alternativtext für Screenreader und falls das Bild nicht geladen werden kann – wichtig sowohl für Barrierefreiheit als auch für SEO.
Der Grundaufbau einer HTML-Seite
Jede HTML-Datei folgt einem festen Grundgerüst. So sieht das Minimum aus, das ein Browser korrekt interpretieren kann:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Seite</h1>
<p>Das ist mein erster eigener HTML-Text.</p>
</body>
</html>Was hier passiert:
<!DOCTYPE html>sagt dem Browser, dass es sich um ein modernes HTML5-Dokument handelt.<html lang="de">ist das Wurzelelement der Seite; daslang-Attribut hilft Screenreadern und Suchmaschinen, die Sprache korrekt zu erkennen.<head>enthält Meta-Informationen, die nicht direkt sichtbar sind: Zeichenkodierung, Seitentitel, verlinkte CSS-Dateien.<body>enthält den sichtbaren Inhalt der Seite – alles, was der Besucher tatsächlich sieht.
Die wichtigsten HTML-Tags im Überblick
Du musst nicht alle HTML-Tags auswendig kennen (es gibt über 100), aber ein kleines Set an Basis-Tags deckt schon einen Großteil normaler Webseiten ab:
<h1>bis<h6>– Überschriften, von der wichtigsten (h1) bis zur unwichtigsten (h6)<p>– ein Textabsatz<a href="...">– ein Link zu einer anderen Seite oder Ressource<img src="..." alt="...">– ein eingebettetes Bild<ul>/<ol>mit<li>– ungeordnete bzw. geordnete Listen<div>– ein allgemeiner Block-Container ohne eigene Bedeutung, meist zum Strukturieren/Stylen genutzt<span>– ein allgemeiner Inline-Container, z. B. um ein einzelnes Wort gezielt zu stylen<button>– ein klickbarer Button<form>,<input>,<label>– Bausteine für Formulare
Semantisches HTML: Bedeutung statt nur Aussehen
Ein häufiger Anfängerfehler ist, alles nur mit <div>-Elementen zu bauen (“div-Suppe”). Modernes HTML5 bietet stattdessen semantische Elemente, die dem Browser, Suchmaschinen und assistiven Technologien wie Screenreadern zusätzlich mitteilen, welche Rolle ein Abschnitt hat:
<header>– Kopfbereich einer Seite oder eines Abschnitts<nav>– Navigationsbereich mit Links<main>– der Hauptinhalt der Seite (sollte pro Seite nur einmal vorkommen)<article>– ein eigenständiger, für sich stehender Inhalt (z. B. ein Blogartikel)<section>– ein thematischer Abschnitt innerhalb einer Seite<aside>– ergänzender Inhalt, z. B. eine Seitenleiste<footer>– Fußbereich einer Seite oder eines Abschnitts
Semantisches HTML ist nicht nur “sauberer Code” – es hat handfeste Vorteile: bessere Zugänglichkeit für Menschen, die Screenreader nutzen, besseres Suchmaschinen-Ranking, weil Google die Struktur deiner Seite besser versteht, und leichter wartbaren Code, weil jeder Abschnitt seine Absicht schon im Tag-Namen trägt.
Deine erste eigene HTML-Seite: Schritt für Schritt
Jetzt bringst du das Gelernte zusammen. So baust du deine erste vollständige, semantisch sinnvolle HTML-Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein erstes HTML-Projekt</title>
</head>
<body>
<header>
<h1>Mein Blog</h1>
<nav>
<a href="#start">Start</a>
<a href="#über-mich">Über mich</a>
</nav>
</header>
<main>
<article>
<h2>Mein erster Blogeintrag</h2>
<p>Heute habe ich gelernt, wie HTML funktioniert!</p>
<img src="lernen.jpg" alt="Person lernt am Laptop">
</article>
</main>
<footer>
<p>© 2026 Mein Blog</p>
</footer>
</body>
</html>Speichere diesen Code in einer Datei namens index.html und öffne sie per Doppelklick im Browser – fertig ist deine erste eigene Webseite. Von hier aus kannst du experimentieren: neue Absätze hinzufügen, ein zweites Bild einbauen, eine Liste deiner Lieblingsthemen ergänzen.
Typische Anfängerfehler vermeiden
- Tags nicht schließen: Ein vergessenes schließendes Tag kann die gesamte restliche Seite durcheinanderbringen. Moderne Editoren warnen meist davor.
- Falsche Verschachtelung:
<p><div>...</div></p>ist ungültig, weil ein Block-Element nicht in ein Inline-Element wie<p>gehört. - HTML für Design missbrauchen: Attribute wie das alte
<font>-Tag gehören der Vergangenheit an – Aussehen ist Aufgabe von CSS, nicht von HTML. - Fehlendes
alt-Attribut bei Bildern: Schlecht für Barrierefreiheit und SEO. - Mehrere
<h1>-Tags pro Seite: Für eine klare Dokumentstruktur sollte es in der Regel nur eine Haupt-<h1>pro Seite geben.
Wie geht es weiter?
Sobald du erste HTML-Dateien schreibst, lohnt es sich auch, fru{fc}h mit Versionskontrolle zu arbeiten u2013 unser Guide Git und GitHub fu{fc}r Einsteiger zeigt dir, wie du deinen Code sauber versionierst und sicherst.
Mit diesem Grundwissen kannst du bereits einfache, strukturierte Webseiten schreiben. Der nächste logische Schritt ist, deine Seite optisch zu gestalten – dafür brauchst du CSS. Im zweiten Teil dieser Serie lernst du Selektoren, das Box-Model und wie du Farben, Schriftarten und Abstände kontrollierst: CSS Grundlagen: Webseiten gestalten mit Selektoren, Box-Model und Layout.
Wenn du danach tiefer in die praktische Webentwicklung einsteigen willst, lohnt sich auch ein Blick auf unseren Guide Erste Schritte als Backend-Entwickler: PHP, Node.js und MySQL im Vergleich, der zeigt, wie es nach dem Frontend weitergeht.
Häufig gestellte Fragen zu HTML-Grundlagen
Muss ich HTML auswendig lernen?
Nein. Die meisten Webentwickler kennen die häufigsten 20-30 Tags aus dem Kopf und schlagen seltenere Tags bei Bedarf nach, etwa in der MDN-Dokumentation. Wichtiger als Auswendiglernen ist, das grundlegende Konzept von Elementen, Attributen und Verschachtelung zu verstehen.
Brauche ich Programmiererfahrung, um HTML zu lernen?
Nein. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache, und damit deutlich einfacher als der Einstieg in “echtes” Programmieren mit JavaScript oder Python. Viele Einsteiger lernen HTML als allererste Technologie überhaupt.
Was ist der Unterschied zwischen HTML und HTML5?
HTML5 ist die aktuelle Version des HTML-Standards und wird heute von allen modernen Browsern verwendet. Sie brachte semantische Elemente wie <header> und <article> sowie native Unterstützung für Audio und Video, ohne dass zusätzliche Plugins nötig sind.
Reicht HTML allein, um eine moderne Webseite zu bauen?
HTML liefert die Struktur, aber für das heutige Look-and-Feel brauchst du zusätzlich CSS für das Design und häufig JavaScript für Interaktivität. Alle drei Technologien zusammen bilden das Fundament des modernen Web.
Welcher Editor eignet sich am besten für HTML-Einsteiger?
Visual Studio Code (kostenlos) ist der aktuelle Standard: leichtgewichtig, mit Syntaxhervorhebung, Autovervollständigung und einer riesigen Auswahl an Erweiterungen speziell für Webentwicklung.
Teil 1 von 4 dieser Serie
