HTML html • Wurzel der HTML-Seite

Das html-Element informiert den Browser, dass eine HTML-codierte Seite vorliegt. Öffnendes und schließendes <html>-Tag bilden den Anfang und das Ende des HTML-Dokuments. Weil es das oberste Element der HTML-Seite ist, wird das html-Element auch als Wurzel – root – bezeichnet.

HTML html Tag

Das html-Element

Das html-Element ist die Wurzel – das Root-Element – der HTML-Seite. <html> unterstützt alle globalen Attribute: von class über id und style bis zum title-Attribut.

<!DOCTYPE html>
<html lang="de">
   <head> … </head>
   <body> … </body>
</html>

Das einzige Element, das vor dem <html>-Tag stehen darf, ist das <!DOCTYPE>-Tag. Im html-Tag dürfen nur zwei Tags direkt sitzen: das HTML-head-Element und das body-Element. Allerdings dürfen im html-Element auch Kommentare sitzen.

Am Rande: Weil das html-Element alle globalen Attribute unterstützt, wirkt auch das neue Attribut inert im html-Element und deaktiviert sämtliche Interaktionen für den gesamten Inhalt: Links sind nicht mehr klickbar, Screenreader lesen das Dokument nich mehr vor.

lang – das Attribut für die Barrierefreiheit

Obwohl es nicht gefordert ist, sollte im <html>-Element die Landessprache oder »gesprochene« Sprache der Webseite durch den Sprachcode deklariert werden:

  • lang="de" in HTML-Seiten

Dann funktionieren die Silbentrennung und die Rechtschreibprüfung, weiß der Screenreader, in welcher Sprache er die Seite vorlesen soll, und auch die Suchmaschinen profitieren von der Angabe der Sprache. Ohne lang ist die Seite faktisch nicht Barrierefrei.

<html> muss nicht sein

Jedes wohlgeformte und korrekt verschachtelte XHTML-Dokument (die Vorgängerversion von HTML) musste ein html-Element enthalten (zusammen mit dem head-, title- und body-Tag). Für das moderne HTML gilt das nicht mehr.

Das html-Tag muss nicht eingesetzt werden. Alte Browser würden das Dokument auch ohne html-Element (und ohne head- und body-Element) korrekt darstellen.

Der Validator hätte daran nicht einmal etwas auszusetzen. In der Tat dürfte man sowohl das head- und das body-Element weglassen und die Browser werden die Seite unverändert anzeigen.

Attribute des html-Elements

dir = "rtl" Schreibrichtung der Schrift; Vorgabe ist ltr (von Links nach Rechts)
lang = "de" gesprochene Sprache der Webseite (HTML Sprachcodes)

Die Angabe der Sprache der Webseite mit dem lang-Attribut wendet sich an die Sprachausgabe und an Braille-Zeilen, ermöglicht die Rechtschreibprüfung von Texten in Formularen und Elementen mit contenteditable-Attribut, und ist die Basis für Übersetzungen.

Im Text der Webseite kann die Sprache für einzelne Begriffe oder ganze Absätze durch das lang-Attribut geändert werden, die Laufrichtung von Texten durch bdo / bdi

CSS-Stile für das html-Element

Für eine konsistente und einfache Berechnen der Größen von Layout-Elementen ist box-sizing ein typischer Stil für das html-Element. Für weiches Scrollen bei Ankerlinks innerhalb des Dokuments ist scroll-behavior: smooth verantwortlich.

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
Suchen auf mediaevent.de