The Root Element (<html>)

Every HTML document has exactly one root element: <html>. Everything else — head, body, and all their contents — lives inside it. This page focuses on the attribute you should never skip: lang.

The <html> element's role

HTML

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>

<html> is the container for the entire document. It has exactly two direct children, always in this order: <head> then <body>. Nothing should sit outside it (other than the doctype, which precedes it).

The lang attribute

The lang attribute declares the primary human language of the page's content, using standardized language codes.

Code	Language
`en`	English
`en-US`	English (United States)
`en-GB`	English (United Kingdom)
`de`	German
`fr`	French
`es`	Spanish
`ja`	Japanese

Codes come from the BCP 47 / ISO 639-1 standard. A two-letter base code (en) is usually enough; adding a region subtag (en-US vs en-GB) is useful when spelling or terminology genuinely differs.

Why lang matters for accessibility

Screen readers use <code>lang</code> to choose the correct pronunciation rules and voice. Without it, a screen reader might read English text with the wrong accent, or completely mispronounce it if it guesses another language.
Browser features like built-in spell-check and translation prompts (e.g. "Translate this page?") rely on <code>lang</code> to work correctly.
Automated accessibility audits (like Lighthouse) flag a missing <code>lang</code> attribute as a failure — it's one of the most common, easiest-to-fix accessibility issues on the web.

A missing or wrong lang attribute is a real accessibility bug

This isn't a cosmetic nitpick. Millions of people rely on screen readers, and a wrong lang value can make a page genuinely difficult or unpleasant to use. Always set it correctly, even on a demo or personal project.

Why lang matters for SEO

Search engines use the lang attribute (alongside other signals like hreflang link tags) to serve the right language version of a page to the right audience in search results — particularly important for multilingual sites.

A quick preview of dir

<html> also commonly carries a dir attribute, which sets the text direction for the whole page:

HTML

<html lang="ar" dir="rtl">
  <!-- Right-to-left content, e.g. Arabic or Hebrew -->
</html>

dir="ltr" (left-to-right, the default) and dir="rtl" (right-to-left) are the two most common values, with dir="auto" letting the browser detect direction from the content itself. A dedicated later page, Text Direction, covers dir, <bdo>, and <bdi> in full.

lang and dir are both global attributes

Both can also be applied to individual elements, not just <html> — useful when a small piece of a page is in a different language or direction than the rest. This is covered further in the Global Attributes page.

A good default to memorize

<html lang="en"> should be muscle memory for English-language pages. Swap the code when the page's primary language differs — never leave it out.

With the root element covered, next we look inside its first child: <head>, and exactly what metadata belongs there.