HTML beschreibt die Struktur einer Webseite, sodass der Browser Text in ein Dokument mit Überschriften, Absätzen, Links, Listen und anderen Elementen umwandeln kann. Beim Laden einer Seite liest der Browser den HTML-Code von oben nach unten, erstellt einen internen Baum aus Elementen und stellt diese Struktur schließlich als etwas dar, das man sehen und mit dem man interagieren kann. Das Styling stammt meist von CSS und die Interaktivität von JavaScript, doch HTML bildet die Grundlage, auf der beide aufbauen.
Um diese Trennung zu verdeutlichen, vergleichen Sie zunächst die Darstellung im Browser mit dem Markup, das diese erzeugt hat.
Dieselbe sichtbare Seite kann durch unterschiedliche Tags beschrieben werden, doch jedes Tag hat eine spezifische Bedeutung. Ein Absatz erscheint, weil der HTML-Code ein p-Element enthält, und ein Link ist anklickbar, weil ein a-Element dem Browser mitteilt, dass ein Navigationsziel existiert. Wenn man nur das CSS ändert, bleibt der Inhalt gleich, auch wenn sich das Erscheinungsbild wandelt, da HTML bestimmt, woraus der Inhalt besteht.
HTML setzt sich aus Elementen zusammen – das sind die benannten Bestandteile wie p und a, die der Browser versteht. Die meisten Elemente werden mit einem Start-Tag (z. B. <p>) und einem End-Tag (z. B. </p>) geschrieben, wobei der Inhalt dazwischen liegt. Manche Elemente sind sogenannte leere Elemente (empty elements) und umschließen keinen Inhalt; ein Beispiel hierfür ist img, das ein Bild darstellt, indem es auf eine Datei verweist.
Elemente können Attribute enthalten, die dem Element zusätzliche Informationen hinzufügen und im Start-Tag notiert werden. Ein Attribut besitzt einen Wert – wie etwa href="https://example.com" –, anhand dessen der Browser das Verhalten bestimmt (zum Beispiel das Ziel eines Links). Elemente können zudem verschachtelt werden; das bedeutet, dass ein Element innerhalb eines anderen liegt, wobei diese Eltern-Kind-Beziehung Struktur und Bedeutung beeinflusst.
Regel zur Verschachtelung Wenn Sie ein End-Tag vergessen oder Tags überlappen lassen, versucht der Browser, Ihre Absicht zu erraten, was zu überraschenden Ergebnissen bei der Darstellung führen kann.
Eine vollständige HTML-Seite beginnt mit <!doctype html>; diese Anweisung weist den Browser an, den modernen Standardmodus zu verwenden. Das äußere html-Element umschließt das gesamte Dokument, während der head-Bereich Metadaten für den Browser und der body-Bereich die eigentlichen Inhalte für die Seitendarstellung enthält. Das title-Element befindet sich im head und bestimmt den Text im Browser-Tab, nicht jedoch den sichtbaren Inhalt der Seite.