Curriculum ▸ HTML Zero → Mastery ▸ Lesson 8: The <html> Root Element Foundations

Lesson 8 — The <html> Root Element Language, Direction & Root Classes

Estimated time: 30–45 minutes · You’ll set the page language, (optionally) direction, and learn root-class theming

Learning Goals

Part 1 — What is the Root Element?

<html> is the single, top-level element that wraps the entire document. It has exactly two direct children: <head> and <body>.

<!DOCTYPE html>
<html lang="en">
  <head>...metadata...</head>
  <body>...visible content...</body>
</html>
Tip: In JavaScript, the root element is available as document.documentElement.

Part 2 — Language with lang

Set the document language using BCP 47 tags. This helps screen readers, spell checkers, and search engines.

Examples

<html lang="en">       <!-- English (generic) -->
<html lang="en-GB">    <!-- English (United Kingdom) -->
<html lang="es-MX">    <!-- Spanish (Mexico) -->

Overriding inline

<p>I love paella. <span lang="es">¡Deliciosa!</span></p>
Rule: Set lang on <html>. Override only where necessary inside the body.

Part 3 — Direction with dir

Use dir on <html> for right-to-left languages like Arabic or Hebrew.

LTR (default)

<html lang="en" dir="ltr">...</html>

RTL

<html lang="ar" dir="rtl">...</html>
Tip: If most of your page is LTR, keep dir off the root and set dir="rtl" on specific blocks when needed.

Part 4 — Root Classes for Theming

Place global state on the root element for easy CSS hooks (e.g., theme toggles).

CSS sketch

/* Theme by class on <html> */
html.light body { background:#ffffff; color:#222; }
html.dark  body { background:#121212; color:#eaeaea; }

JS sketch

const root = document.documentElement;           // <html>
const next = root.classList.contains('dark') ? 'light' : 'dark';
root.classList.toggle('dark');                   // or: root.className = next;
localStorage.setItem('theme', next);
Why root? One class controls the whole cascade without chasing nested containers.

Part 5 — The translate Attribute

For names/brand terms that should not be machine-translated, mark a container with translate="no".

<html lang="en">
  <body translate="no">HTML Zero → Mastery</body>
</html>

Use sparingly and only when translation would harm meaning (e.g., product names).

Part 6 — Common Mistakes (and Fixes)

❌ Missing or generic language

<html> ... </html>     <!-- no lang set -->

✅ Set lang properly

<html lang="en-GB"> ... </html>

❌ Multiple <html> elements

<html>...</html> <html>...</html>

✅ Only one root

<html>...the whole document...</html>

Practice Tasks

  1. Create lesson-08/index.html with lang set to your locale (e.g., en-US).
  2. Add a paragraph with a short quote in another language and override with lang on a <span>.
  3. Add a “Theme” toggle that switches a dark class on document.documentElement and persists to localStorage.
  4. Validate your file and fix any warnings.

Quick Quiz

  1. What are the only two direct children of <html>?
  2. Why does setting lang help accessibility and search?
  3. When should you use dir="rtl" on the root?
  4. Why is toggling classes on <html> useful for theming?
  5. What does translate="no" tell translation tools?
Sample answers
  • <head> and <body>.
  • It informs screen readers, spell checkers, and search engines of the primary language.
  • When the entire document is primarily right-to-left (e.g., Arabic).
  • One hook controls global styles; no need to target many containers.
  • Do not translate the marked content.

Lesson 8 Dictionary

Terms and attributes introduced/emphasized in this lesson.

BCP 47
A standard for language tags used in lang values (e.g., en-GB, es-MX).
dir (attribute)
Specifies text direction: ltr (left-to-right) or rtl (right-to-left).
document.documentElement
JavaScript reference to the <html> element (the root).
<html> (root element)
The top-level element wrapping the entire document; contains <head> and <body>.
lang (attribute)
Declares the language of the document or element using BCP 47 tags.
RTL
Right-to-left writing direction, used by languages like Arabic and Hebrew.
translate (attribute)
Advises tools whether the content should be translated (translate="no" prevents translation).
Theme via root class
Pattern of toggling classes on <html> to switch global styles (e.g., dark/light).