HTML, erklärt: Das digitale Skelett jeder Webseite

In einem Satz

HTML (HyperText Markup Language) ist die Standardsprache, um Dokumenten, die im World Wide Web angezeigt werden, ihre Struktur und ihren Inhalt zu verpassen.

Welches Problem es löst

Stell dir das Internet vor, bevor es das Web gab, wie wir es heute kennen. Es war ein nerdiger Wilder Westen voller unverbundener Dokumente. Wissenschaftler am CERN hatten vielleicht eine Forschungsarbeit auf ihrem lokalen System in einem bestimmten Format, während eine Uni in einem anderen Land zugehörige Arbeiten in einem komplett anderen, inkompatiblen Format hatte. Diese Informationen zu teilen und – was noch wichtiger ist – zu verknüpfen, war ein digitaler Albtraum.

Und dann kam Tim Berners-Lee. In den späten 80ern und frühen 90ern versuchte er nicht, eine Plattform für Katzenvideos zu schaffen; er wollte ein sehr reales Problem für Wissenschaftler lösen: Wie können wir unsere Dokumente einfach und universell über verschiedene Computer und Netzwerke hinweg teilen und verlinken?

Die Lösung war ein Dreiergespann: HTTP (ein Protokoll zum Anfordern und Senden von Dokumenten), URLs (eine Adresse für jedes Dokument) und HTML (eine Sprache, um die Dokumente zu schreiben).

Das Geniale an HTML war seine Einfachheit. Es bot einen Satz von „Tags“, die jeder lernen konnte, um damit ein reines Textdokument auszuzeichnen. Dieser Tag würde einem Browser sagen: „Dieser Teil ist eine Überschrift“, „Das ist ein Absatz“ und, ganz entscheidend: „Dieser Text hier ist ein Hyperlink zu dem anderen Dokument dort drüben.“ Diese Hyperlink-Fähigkeit ist das „HT“ in HTML, und genau das hat eine Ansammlung isolierter Dateien in ein echtes „Netz“ (Web) aus miteinander verbundenen Informationen verwandelt. HTML wurde zur Lingua Franca des Browsers, zur universellen Blaupause für eine Webseite.

Wie es unter der Haube funktioniert

Auf den ersten Blick sieht HTML aus wie einfacher Text mit ein paar komischen spitzen Klammern. Aber unter der Haube führt der Browser einen ausgeklügelten Parsing-Prozess durch, um diesen Text in die lebendige, atmende Webseite zu verwandeln, mit der du interagierst.

Tags, Elemente und Attribute: Die heilige Dreifaltigkeit

Die Syntax von HTML basiert auf drei Kernkonzepten. Wenn du die verstanden hast, hast du 80 % von HTML im Kasten.

Tag: Eine Anweisung in spitzen Klammern, wie <p> oder <img>. Die meisten Tags kommen paarweise vor: ein öffnender Tag (<p>) und ein schließender Tag (</p>). Der schließende Tag hat einen Schrägstrich (Forward Slash).
Element: Das Gesamtpaket – der öffnende Tag, der Inhalt dazwischen und der schließende Tag. Das ganze Ding eben.
Attribut: Zusatzinformationen oder Einstellungen für ein Element, die im öffnenden Tag platziert werden. Sie bestehen aus name="value"-Paaren.

Lass uns ein einfaches Beispiel sezieren:

<a href="https://flowing.dev" class="main-link">Visit FlowingDev</a>

Die Tags sind <a> und </a>. Das a steht für „Anchor“ (Anker) und wird für Hyperlinks verwendet.
Das Element ist die gesamte Zeile, von <a... bis ...</a>.
Der Inhalt ist der Text „Visit FlowingDev“.
Es hat zwei Attribute:
- href="https://flowing.dev": Das „Hypertext Reference“-Attribut, das dem Browser sagt, wohin er gehen soll, wenn der Link geklickt wird. Das ist das wichtigste Attribut für einen <a>-Tag.
- class="main-link": Ein „class“-Attribut, das ein Haken (Hook) für CSS ist, um das Element zu stylen, oder für JavaScript, um es zu finden.

Das Document Object Model (DOM)

Wenn ein Browser deine HTML-Datei empfängt, liest er sie nicht einfach Zeile für Zeile wie ein Buch. Er parst den Text und baut im Speicher eine logische Baumstruktur auf, die als Document Object Model (DOM) bezeichnet wird.

Stell dir deinen HTML-Quellcode wie die Baupläne für ein Haus vor. Das DOM ist dann das tatsächlich gebaute Gerüst des Hauses – eine greifbare Struktur, die du inspizieren und verändern kannst.

Schauen wir uns diese einfache HTML-Seite an:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>A Heading</h1>
    <p>Some text.</p>
  </body>
</html>

Der Browser erkennt die Verschachtelung der Tags und baut daraus diesen DOM-Baum:

html
- head
  - title
    - (Text) "My Page"
- body
  - h1
    - (Text) "A Heading"
  - p
    - (Text) "Some text."

Diese Baumstruktur ist alles. CSS wendet Stile auf die Knoten in diesem Baum an. JavaScript kann diesen Baum manipulieren – neue Knoten (Elemente) hinzufügen, alte entfernen oder ihre Attribute ändern – und genau so werden moderne Webseiten dynamisch und interaktiv, ohne neu laden zu müssen. Das DOM ist die Brücke zwischen deinem statischen HTML und einer dynamischen App.

Block- vs. Inline-Elemente

Nicht alle Elemente sind gleich geschaffen. Was das Layout angeht, lassen sie sich in zwei Hauptfamilien einteilen.

Block-Level-Elemente: Das sind die dicken Fische. Sie sind strukturell. Sie beginnen normalerweise in einer neuen Zeile und nehmen die gesamte verfügbare Breite ein, wie ein Absatz in einem Buch.
- Beispiele: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, <article>.
Inline-Elemente: Diese sind subtiler. Sie beginnen keine neue Zeile und nehmen nur so viel Breite ein, wie ihr Inhalt benötigt. Sie fließen mit dem sie umgebenden Text mit.
- Beispiele: <a>, <span>, <strong>, <em>, <img>, <input>.

Diesen Unterschied zu verstehen ist für das CSS-Layout entscheidend. Der Versuch, einem Inline-Element eine Breite zu geben, funktioniert oft nicht wie erwartet, und sich zu fragen, warum zwei Elemente nebeneinander statt untereinander stehen, ist ein klassisches Block-vs-Inline-Rätsel.

<div style="background-color: #eee;">
  This div is a block-level element. It takes the full width.
</div>
<div style="background-color: #ddd;">
  This is a second div. It starts on a new line.
</div>
<p>
  Here is a paragraph that contains an 
  <a href="#">inline link</a> and some 
  <strong>inline bold text</strong>. Notice how they all
  stay within the flow of the text.
</p>

Geschichten aus der Praxis

Der falsch ausgerichtete „Jetzt kaufen“-Button

Ein Junior-Entwickler bekam die Aufgabe, eine Produktbeschreibung und einen „Jetzt kaufen“-Button hinzuzufügen. Er schrieb, was logisch erschien: <p>Awesome Product! Only $9.99! <button>Buy Now</button></p>. Auf seinem großen Desktop-Monitor sah es perfekt aus. Der Button saß brav am Ende des Satzes. Der Code wurde gepusht.

Tage später zeigten die Analytics einen Einbruch bei der mobilen Conversion-Rate. Ein Senior-Entwickler untersuchte das und rief die Seite auf einem Handy auf. Der Text „Awesome Product! Only $9.99!“ umbrach in eine zweite Zeile, und der „Jetzt kaufen“-Button umbrach direkt mit und landete ungeschickt eingerückt unter dem Anfang des Satzes. Es sah kaputt aus. Der Junior-Dev hatte ein block-artiges Element (ein button verhält sich oft so) in einen Absatz gepackt und damit ein unvorhersehbares Umbruchverhalten erzeugt.

Die Lösung war einfach: Struktur vom Inhalt trennen. Der Text kam in einen eigenen <p>-Tag und der Button in ein eigenes <div>. Jetzt konnte der Absatz umbrechen, so viel er wollte, und der Button erschien als eigenständiger Block immer sauber darunter, egal bei welcher Bildschirmgröße.

Die Lektion: Das HTML-Box-Modell und den Unterschied zwischen Block- und Inline-Elementen zu verstehen, ist nicht verhandelbar, wenn man Layouts erstellen will, die vorhersagbar sind und nicht auf verschiedenen Geräten kaputtgehen.

Der nicht crawl-bare Blog

Ein Startup startete einen schicken neuen Blog, der auf einem topmodernen JavaScript-Framework basierte. Er war schnell, animiert und fühlte sich an wie eine native App. Der gesamte HTML-Quellcode der Seite bestand im Grunde nur aus <div id="app"></div> und einem riesigen <script>-Tag, der die Seite im Browser des Nutzers aufbaute. Sie waren stolz auf ihre Technologie.

Sechs Monate später hatten sie ein Problem: null organischer Traffic von Google. Sie waren unsichtbar. Wenn ein Suchmaschinen-Crawler ihre Seite besuchte, sah er keine schönen Artikel und Überschriften; er sah ein leeres <div>. Obwohl Googles Crawler inzwischen besser darin ist, JavaScript auszuführen, ist das ein zusätzlicher, aufwändiger Schritt und nicht narrensicher. Der Blog kommunizierte seine Struktur und seinen Inhalt nicht in der Muttersprache des Crawlers: einfachem, semantischem HTML.

Das Team musste die Architektur ihrer Seite umstellen und Server-Side Rendering (SSR) einsetzen, bei dem der Server das vollständige HTML für jede Seite generiert, bevor er es an den Browser sendet. In dem Moment, als sie die Änderung deployten, wurden ihre Seiten plötzlich korrekt indexiert.

Die Lektion: Semantisches HTML (<article>, <h1>, <p>) ist nicht nur ein Vorschlag; so kommunizierst du die Bedeutung und Hierarchie deines Inhalts an Suchmaschinen und andere automatisierte Tools.

Der Accessibility-Albtraum

Eine Firma rollte ein neues internes Dashboard aus. Um den pixelgenauen Look zu erzielen, den die Designer wollten, verwendeten die Entwickler für absolut alles <div>-Elemente. Ein <div> mit border-radius und einem JavaScript-onClick-Event wurde zu einem Button. Ein weiteres <div> mit einem onClick-Event wurde zu einem Link.

Für einen Mitarbeiter, der auf einen Screenreader angewiesen war, war das Dashboard unbenutzbar. Der Screenreader meldete für jedes interaktive Element „Gruppe“ und gab keinen Hinweis darauf, ob es sich um einen Button, einen Link oder etwas anderes handelte. Da <div>s standardmäßig nicht fokussierbar sind, war die Navigation mit der Tab-Taste außerdem unmöglich.

Ein Accessibility-Berater wurde hinzugezogen und war entsetzt. Die Lösung war ein mühsames, aber wesentliches Refactoring: <div onClick="..."> wurde durch <button>, <a> und andere passende, semantische Elemente ersetzt. Diese nativen Tags bringen eine riesige Menge an eingebauter Accessibility-Funktionalität gratis mit – Tastaturfokus, korrekte Rollenansagen und mehr.

Die Lektion: Verwende den richtigen HTML-Tag für den Job. Du sagst dem Browser nicht nur, wie er etwas zeichnen soll; du sagst assistiven Technologien, was es ist.

Häufige Fehler und Fallen

"Div-itis." Der zügellose Missbrauch von <div> und <span>, wenn spezifischere, semantische Tags wie <nav>, <main>, <article>, <aside> oder <button> den Zweck des Inhalts besser beschreiben würden.
Grundlagen der Accessibility vergessen. Fehlende alt-Attribute bei <img>-Tags sind ein Klassiker. Das lässt sehbehinderte Nutzer ohne Informationen über das Bild zurück. Genauso kann die Verwendung von <b> für Fettschrift anstelle von <strong> (was Wichtigkeit anzeigt) eine verpasste semantische Chance sein.
Falsche Tag-Verschachtelung. Du kannst nicht einfach jeden Tag in jeden anderen packen. Ein häufiger Fehler ist, ein Block-Level-Element (wie ein <div>) in ein Inline-Element (wie ein <a>) zu packen. Obwohl Browser ihr Bestes geben, es zu rendern, kann das resultierende DOM ein Chaos sein und zu bizarrrem Verhalten führen.
Den <head> ignorieren. Der <head>-Bereich ist lebenswichtig. Vergisst man, die Zeichenkodierung (<meta charset="UTF-8">) zu setzen, kann das zu Buchstabensalat führen. Das Vergessen des Viewport-Meta-Tags (<meta name="viewport" content="width=device-width, initial-scale=1.0">) ist der Hauptgrund, warum mobile Seiten herausgezoomt und winzig aussehen.
Von einem geschlossenen Vokabular ausgehen. HTML ist eine lebende Sprache. Im Laufe der Zeit kommen neue Tags und Attribute hinzu (z. B. <main>, <picture>). Wer sich auf Muster aus dem Jahr 2010 verlässt, verpasst robustere und semantischere Wege, seine Dokumente zu strukturieren.

Warum du es auf dem Schirm haben solltest

Wenn du beruflich irgendetwas mit dem Web zu tun hast, ist HTML keine Option, sondern ein Muss.

Für Frontend-Entwickler ist es das Fundament. Frameworks wie React, Vue und Svelte sind mächtig, aber am Ende spucken sie alle HTML aus. Die Zielausgabe zu verstehen, macht dich zu einem weitaus effektiveren Entwickler.
Für Backend-Entwickler: Ihr generiert oft HTML-Schnipsel, baut APIs, die von HTML-Frontends konsumiert werden, oder arbeitet mit Templating-Engines, die HTML erzeugen. Seine Regeln zu kennen, bewahrt euch davor, kaputtes oder unsemantisches Markup auszuliefern.
Für UI/UX-Designer hilft das Verständnis der grundlegenden Bausteine von HTML (div, span, p, h1), Designs zu entwerfen, die praktisch umsetzbar sind und sich sauber auf die nativen Komponenten des Webs abbilden lassen.
Für SEO-Spezialisten und Content Manager ist ein solides Verständnis von HTML (insbesondere von Überschriften, Title-Tags und Meta-Beschreibungen) die Grundlage eures Handwerks.

HTML ist die langlebigste, abwärtskompatibelste und universellste Sprache des digitalen Zeitalters. Eine 1995 geschriebene Webseite wird auch heute noch gerendert. Es ist die eine Fähigkeit, die durch jeden Hype-Zyklus und Framework-Krieg hindurch unerlässlich geblieben ist, und sie wird nicht so schnell verschwinden.

Tauche tiefer ein

MDN Web Docs: HTML — Die ultimative Referenz für den Alltag. Umfassend, mit großartigen Beispielen.
WHATWG HTML Living Standard — Die offizielle, kontinuierlich aktualisierte Spezifikation für HTML. Das hier ist die Quelle der Wahrheit.
Die Geschichte von HTML auf Wikipedia — Für den Kontext, wie und warum HTML entstanden ist.
SEO-Starter-Guide von Google — Zeigt die praktischen Auswirkungen von gutem HTML auf die Sichtbarkeit in Suchmaschinen.
The A11Y Project — Eine von der Community getragene Initiative, um die Barrierefreiheit im Web zu erleichtern, mit unzähligen Tipps, die auf dem Schreiben von korrektem HTML basieren.