Das html-Element
Das html-Element ist die Wurzel – das Root-Element – der HTML-Seite. 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. 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 weiß der Screenreader, in welcher Sprache er die Seite vorlesen soll, und auch die Suchmaschinen profitieren von der Angabe der Sprache.
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.
<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;
}
