HTML elements
The root of the page and the body that holds everything the reader sees. Shown as markup: LUZ styles both in its document layer.
Holds everything a visitor sees on the page. Each page has one, right after the head.
Markup only: this element is not rendered.
<body class="o-shell">
<a class="luz-skip-link" href="#main-content">Skip to main content</a>
<main id="main-content">…</main>
</body>Styled by elements/document.css, with no class. Layout-neutral until you add o-shell for the sidebar and main layout.
The outermost tag, wrapping the whole page. Put lang on it so screen readers and translation tools pick the right language, and data-theme to choose the LUZ color mode.
Markup only: this element is not rendered.
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>…</head>
<body>…</body>
</html>Styled by elements/document.css, with no class. LUZ reads data-theme on this element: light, dark or high-contrast.