HTML (HyperText Markup Language) ist die standardisierte Auszeichnungssprache des World Wide Web, mit der Webbrowser angewiesen werden, wie Inhalte einer Seite strukturiert und dargestellt werden sollen.
Was bedeutet das?
Der Name setzt sich aus zwei Teilen zusammen: „HyperText“ bezeichnet Text, der Verknüpfungen (Hyperlinks) zu anderen Dokumenten enthält, und „Markup Language“ bezeichnet eine Auszeichnungssprache, die Inhalte durch Tags mit semantischer Bedeutung versieht. HTML ist keine Programmiersprache, sondern eine deklarative Beschreibungssprache. Sie legt fest, was ein Inhalt bedeutet, nicht wie er ausgeführt wird.
HTML-Dokumente bestehen aus einer hierarchischen Struktur von Elementen. Jedes Element wird durch ein öffnendes Tag wie <p>, optionalen Inhalt und ein schließendes Tag wie </p> gebildet. Manche Elemente sind selbstschließend und haben keinen Inhalt, zum Beispiel <img> für Bilder oder <br> für Zeilenumbrüche. Attribute innerhalb des öffnenden Tags liefern zusätzliche Informationen: <a href="https://example.com">Linktext</a> verbindet das Ankerelement mit einer Ziel-URL.
Ein vollständiges HTML-Dokument beginnt immer mit der Dokumenttyp-Deklaration <!doctype html>, gefolgt vom Wurzelelement <html lang="de">. Darin befinden sich zwei Pflichtbereiche: Das <head>-Element enthält Metadaten wie Zeichensatz, Seitentitel und Verknüpfungen zu CSS-Dateien, die für Besucher nicht direkt sichtbar sind. Das <body>-Element enthält alles, was der Browser im Fenster anzeigt: Überschriften, Absätze, Bilder, Links, Formulare und mehr.
HTML wird vom World Wide Web Consortium (W3C) und der WHATWG (Web Hypertext Application Technology Working Group) standardisiert. Die aktuelle Spezifikation heißt HTML Living Standard und wird fortlaufend weiterentwickelt, ohne feste Versionsnummern. Der Browser liest das HTML-Dokument von oben nach unten, baut daraus den sogenannten DOM (Document Object Model) auf und rendert schließlich die Seite.
In WordPress wird HTML auf zwei Ebenen eingesetzt. Erstens erzeugt WordPress beim Seitenaufruf automatisch HTML-Ausgabe: PHP-Templates wie single.php oder page.php generieren die Seitenstruktur, Themes steuern Layout und Semantik. Zweitens können Redakteure direkt HTML eingeben: Im Block-Editor steht dafür der „HTML“-Block zur Verfügung, im Classic Editor gibt es eine „Text“-Ansicht, in der roher HTML-Code bearbeitet werden kann.
Beispiel aus der Praxis
Sie erstellen in WordPress eine neue Seite und wechseln im Block-Editor in die Code-Ansicht, um einen benutzerdefinierten Abschnitt einzufügen. Dort sehen Sie das rohe HTML Ihrer Seite. Ein Absatz sieht so aus: <p>Herzlich willkommen auf unserer Website.</p>. Eine Überschrift zweiter Ebene lautet: <h2>Unsere Leistungen</h2>. Das <h2>-Tag teilt dem Browser und Suchmaschinen mit, dass es sich um eine wichtige Zwischenüberschrift handelt. Diese semantische Information hilft bei der Suchmaschinenoptimierung, weil Crawler die Hierarchie der Inhalte besser verstehen können.
Tipp aus der Praxis
Nutzen Sie semantische HTML-Elemente, die die Bedeutung des Inhalts ausdrücken, anstatt alles in generische <div>-Container zu packen. <article> kennzeichnet einen eigenständigen Beitrag, <nav> markiert Navigationsbereiche, <aside> zeigt ergänzende Inhalte an. Screenreader und Suchmaschinen profitieren davon, weil die Struktur der Seite direkt aus dem Quellcode ablesbar ist, ohne zusätzliche Erklärungen. WordPress-Themes nutzen diese Elemente, wenn sie nach modernen Standards gebaut sind; prüfen Sie das bei der Theme-Auswahl im Quellcode unter dem Kürzel „Semantic HTML“.