<html>

Zuletzt aktualisiert am 3. Februar 2026

Das <html>-Element ist das Wurzelelement (Root Element) jeder HTML-Seite. Es umschließt den gesamten Dokumentinhalt, also sowohl den <head> als auch den <body>. Jede HTML-Datei hat genau ein <html>-Element, und alles andere befindet sich darin. Du kannst es dir wie den äußersten Rahmen vorstellen, der dem Browser sagt: “Hier beginnt und endet mein HTML-Dokument.” Auf dieser Seite lernst du, wie du das Element richtig verwendest und warum das lang-Attribut so wichtig ist.

Grundlagen

Das <html>-Element steht direkt nach der <!DOCTYPE html>-Deklaration und ist der Ausgangspunkt für alles, was auf deiner Seite passiert. Es enthält immer genau zwei direkte Kinder: <head> und <body>. Mehr braucht es nicht, und mehr sollte es auch nicht sein.

  • <html> ist das einzige Wurzelelement eines HTML-Dokuments: Es darf nur einmal vorkommen
  • Es enthält immer genau zwei direkte Kind-Elemente: <head> (Metadaten) und <body> (sichtbarer Inhalt)
  • Das lang-Attribut ist das wichtigste Attribut auf diesem Element. Es teilt dem Browser, Screenreadern und Suchmaschinen mit, in welcher Sprache der Seiteninhalt geschrieben ist
  • Die <!DOCTYPE html>-Deklaration steht vor dem <html>-Element und ist kein HTML-Tag, sondern eine Anweisung an den Browser, den Standardmodus zu verwenden

Syntax

Grundsyntax
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <p>Hallo Welt!</p>
  </body>
</html>
Vorschau

Attribute

Attribut Typ Beschreibung Beispiel
lang String Definiert die Sprache des Dokumentinhalts. Wichtig für Screenreader, Suchmaschinen und Browser-Funktionen wie automatische Übersetzung. <html lang="de">
xmlns URL Definiert den XML-Namespace. Wird nur bei XHTML benötigt, in normalem HTML nicht notwendig. <html xmlns="http://www.w3.org/1999/xhtml">

Beispiele

Deutsche Webseite

Das lang-Attribut auf "de" setzt die Sprache für das gesamte Dokument. Screenreader nutzen diese Information, um den Text mit der richtigen Aussprache vorzulesen. Suchmaschinen verwenden es, um die Seite korrekt einzuordnen:

Deutsche Webseite
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programmieren mit Mario</title>
  </head>
  <body>
    <h1>Willkommen!</h1>
    <p>Lerne Webentwicklung auf Deutsch.</p>
  </body>
</html>
Vorschau

Mehrsprachige Inhalte

Wenn deine Seite hauptsächlich auf Deutsch ist, aber einzelne Abschnitte in einer anderen Sprache, setzt du lang="de" auf das <html>-Element und überschreibst die Sprache lokal mit dem lang-Attribut auf dem jeweiligen Element:

Mehrsprachige Inhalte
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Mein Blog</title>
  </head>
  <body>
    <p>Dies ist ein deutscher Text.</p>
    <blockquote lang="en">
      <p>This is an English quote.</p>
    </blockquote>
  </body>
</html>
Vorschau

Barrierefreiheit

Das <html>-Element spielt eine zentrale Rolle für die Barrierefreiheit, vor allem durch das lang-Attribut:

  • Screenreader-Spracherkennung: Das lang-Attribut teilt Screenreadern mit, in welcher Sprache der Seiteninhalt geschrieben ist. Ohne diese Information verwendet der Screenreader die Standardsprache des Betriebssystems. Ein deutscher Text wird dann möglicherweise mit englischer Aussprache vorgelesen, für betroffene Nutzer kaum verständlich.
  • Automatische Übersetzung: Browser wie Chrome bieten eine automatische Übersetzung an. Ohne lang-Attribut kann der Browser die Ausgangssprache nicht zuverlässig erkennen.
  • Sprache lokal überschreiben: Wenn einzelne Abschnitte in einer anderen Sprache verfasst sind, kannst du das lang-Attribut auf dem jeweiligen Element setzen (z.B. <blockquote lang="en">). So wechselt der Screenreader automatisch die Aussprache für diesen Bereich.
  • Hyphenation und Textverarbeitung: CSS-Eigenschaften wie hyphens: auto funktionieren nur korrekt, wenn die Sprache über lang definiert ist. Ohne die Information kann der Browser Wörter nicht an den richtigen Stellen trennen.

Häufige Fehler

  • Kein lang-Attribut: Ohne lang-Attribut wissen Screenreader nicht, in welcher Sprache sie den Text vorlesen sollen. Das führt dazu, dass ein deutscher Text möglicherweise mit englischer Aussprache vorgelesen wird, für Nutzer mit Sehbehinderung sehr frustrierend. Setze immer lang="de" (oder die entsprechende Sprache) auf dein <html>-Element.

  • DOCTYPE vergessen: Ohne <!DOCTYPE html> vor dem <html>-Element schaltet der Browser in den sogenannten Quirks-Modus. In diesem Modus verhält sich CSS anders, Abstände stimmen nicht, und dein Layout kann sich von Browser zu Browser unterscheiden. Die DOCTYPE-Deklaration gehört immer in die allererste Zeile.

  • Mehr als ein <html>-Element: Ein HTML-Dokument darf nur ein einziges <html>-Element haben. Mehrere <html>-Tags führen zu ungültigem HTML und unvorhersehbarem Verhalten.

Browser-Kompatibilität

Das html-Element wird von allen Browsern seit der allerersten Version unterstützt. Es ist das fundamentalste Element der HTML-Spezifikation.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Das html-Element wird in E-Mail-Clients unterschiedlich behandelt. Viele Clients entfernen oder ignorieren es komplett.

ClientUnterstützungHinweise
Apple MailKomplett—
GmailTeilweiseGmail entfernt das html-Element und fügt den Inhalt in seine eigene Dokumentstruktur ein. Das lang-Attribut geht dabei verloren.
OutlookTeilweiseOutlook nutzt die Word-Rendering-Engine und interpretiert die Dokumentstruktur eigenständig. Das html-Element wird oft ignoriert.
ThunderbirdKomplett—
Yahoo MailTeilweiseYahoo Mail entfernt das html-Element und bettet den Inhalt in seine eigene Seitenstruktur ein.

Verwandte Elemente

<head> <body>

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.