`<html>` Root element

Q: Why should I add the lang attribute to the html tag?

The lang attribute on <html> tells software which language the page is written in, for example lang="en" . Screen readers choose a pronunciation from it. Browsers use it for hyphenation, spell checking and translation offers, and search engines read it as a language signal. WCAG 2.2 success criterion 3.1.1 (Language of Page) requires it. The value follows the BCP 47 language tag rules , so regional codes such as en-GB and pt-BR work fine.

Q: Is the html tag required in HTML5?

Strictly speaking, no. Both the start and end tags of <html> may be omitted, because the parser creates the element anyway. Write it regardless. It is the only place to set lang for the whole document, and anyone reading your code sees the page structure at a glance.

The root element. Every page's head and body sit inside it.

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

Everything in the document sits inside <html>: first one <head>, then one <body>. The element starts on the line after the doctype.

Give it a lang attribute with the page's main language, for example lang="en". Screen readers pick their pronunciation from it, and browsers rely on it for translation and hyphenation. Leave out the <html> tag and the browser adds one for you, but then you have nowhere to put lang.

Why it counts as the root element, and what it may contain, is covered in the html element definition in the WHATWG standard (opens in a new tab). In the page skeleton lesson you build the rest of the page around it.

Syntax

<!doctype html>
<html lang="en">
  <head>
    <title>Page title</title>
  </head>
  <body>
    <p>Content</p>
  </body>
</html>

When to use it

Write an explicit <html> start tag on every page you make by hand. It is the one place to declare the language of the whole document. Set lang to the language most of the text is in, and add dir="rtl" for Arabic, Hebrew and other right-to-left languages so alignment and punctuation follow.

The root element doubles as a styling hook. The font size on html is the base for every rem value, and a background set on it always covers the whole window. Theme classes such as class="dark" often live here, so one change restyles the page.

Changing lang translates nothing. It only tells software what language the text already is. A common copy-paste slip is keeping lang="en" from a template on a page written in Spanish or German, and screen readers then read it with the wrong voice. The document structure lesson builds the full skeleton.

Attributes

Attribute	What it does
`lang`	Main language of the page, such as en, de or pt-BR.

Live example

Edit the code and watch the preview.

<!doctype html>
<html lang="en">
<head>
  <title>My first page</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

More examples

A French page with an English quote

The document is French, so the root carries lang="fr". One quotation is in English and overrides the language for that element only. Screen readers switch pronunciation at the boundary, and browsers hyphenate each part with the right dictionary.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Recette des cr&ecirc;pes</title>
</head>
<body>
  <h1>Recette des cr&ecirc;pes</h1>
  <p>M&eacute;langez la farine, le lait et les &oelig;ufs.</p>
  <blockquote lang="en">
    <p>The first pancake is always a test.</p>
  </blockquote>
</body>
</html>

A theme class on the root

A class on <html> switches the look of the entire page from one place. Here class="dark" changes the colors, and the font size on the root sets the base for every rem value, so the heading scales with it.

<!doctype html>
<html lang="en" class="dark">
<head>
  <meta charset="utf-8">
  <title>Night reading</title>
  <style>
html{font-size:18px}
.dark{background:#1e1e24;color:#eee}
h1{font-size:2rem}
  </style>
</head>
<body>
  <h1>Night reading mode</h1>
  <p>Remove class="dark" from the html tag to switch back to light.</p>
</body>
</html>

Tip: Add lang every time, as in <html lang="en">.

Browser support

Browsers have handled the html element since the earliest days of the web, and they create it on their own when the tag is missing. The lang and dir attributes work everywhere too. How well a language is read aloud is up to the screen reader and the voices installed on the device; the browser has little say in it.

Accessibility

WCAG 3.1.1 asks for lang on the html element. A passage in a different language gets its own lang attribute. How assistive technology uses the value is described in the W3C note Understanding Language of Page (opens in a new tab).

Common mistakes

Wrong

<!DOCTYPE html>
<html>
<head>

Right

<!DOCTYPE html>
<html lang="en">
<head>

With no lang, assistive technology has to guess the language and can mispronounce every word.

Frequently asked questions

Why should I add the lang attribute to the html tag?

The lang attribute on <html> tells software which language the page is written in, for example lang="en". Screen readers choose a pronunciation from it. Browsers use it for hyphenation, spell checking and translation offers, and search engines read it as a language signal. WCAG 2.2 success criterion 3.1.1 (Language of Page) requires it. The value follows the BCP 47 language tag rules (opens in a new tab), so regional codes such as en-GB and pt-BR work fine.

Is the html tag required in HTML5?

Strictly speaking, no. Both the start and end tags of <html> may be omitted, because the parser creates the element anyway. Write it regardless. It is the only place to set lang for the whole document, and anyone reading your code sees the page structure at a glance.

Practise it

The Page Skeleton (Module 1: First Page)
Head and Body (Module 1: First Page)
Project: Hello World Page (Module 1: First Page)
Project: Blog Page (Module 4: Structure and Semantics)
Project: Class Timetable (Module 5: Tables)
Project: Sign-up Form (Module 6: Forms)

<html> Root element