HTML <html> Element: Syntax and Examples

What Is the <html> Element?

The <html> element is the root element of an HTML document. It comes immediately after the DOCTYPE declaration and wraps the entire page. Every other element — including <head> and <body> — must be nested inside it.

When a browser loads an HTML file, the first thing it looks for is the root element. If it is not there, the browser inserts one automatically, because the DOM tree requires a root.

A minimal document with an <html> element looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <p>Hello, world!</p>
</body>
</html>

What the element represents

Syntax and Anatomy

The <html> element is a normal, non-void element. It has an opening tag, content (the head and the body), and a closing tag.

<html lang="en" dir="ltr">
    <!-- head and body go here -->
</html>

The opening tag can carry attributes. The most common are lang and dir. Here is what each part looks like:

Where the <html> Element Sits

The <html> element comes right after the DOCTYPE and wraps every other element in the document. Here is the tree it builds:

Notice the two direct children of <html>: the <head> and the <body>. Those are the only two elements that belong at that level.

The lang Attribute: The Most Important Attribute on <html>

The lang attribute is the single most important attribute you can put on the <html> element. It declares the primary language of the document.

<html lang="en">

That "en" is a language code. It tells browsers, search engines, and assistive technologies that the page is written in English.

Why the lang attribute matters

• Screen readers use it to choose the correct pronunciation rules. Without it, an English page read by a Spanish screen reader may be nearly unintelligible.
• Search engines use it to match pages to users in the correct language and region.
• Browsers use it to pick the correct font, hyphenation, and quote-style rules.
• Translation tools use it to detect when a page should be translated.

Common language codes

Language codes follow the BCP 47 standard. Two-letter ISO 639-1 codes are the most common form. Here are the ones you will use most often:

Language codes are case-insensitive but lowercase is the convention

Browsers accept lang="EN", lang="en", and lang="En" as the same. But the convention is lowercase for the primary language and title case for region subtags: lang="en-US".

<!-- Convention -->
<html lang="en-US">

<!-- Also valid, but not the convention -->
<html lang="EN-us">

The dir Attribute: Text Direction

The dir attribute on <html> sets the text direction for the entire document. It accepts three values.

Right-to-left languages

For RTL languages, set both lang and dir:

<html lang="ar" dir="rtl">

This tells the browser that the page’s primary language is Arabic and that text flows right-to-left. The browser handles the rest automatically — alignment, scroll direction, list markers, and more.

Bidirectional content

Real pages often mix languages. A page in Arabic might include an English product name, or a page in English might include a Hebrew quotation. In these cases, use the dir attribute on the specific element that needs it, not on the whole page.

<html lang="ar" dir="rtl">
<body>
    <p>هذا نص بالعربية</p>
    <p dir="ltr" lang="en">This English sentence stays left-to-right.</p>
</body>
</html>

The dir="ltr" on the second paragraph overrides the page’s default direction for that paragraph only.

Other Attributes on <html>

Beyond lang and dir, the <html> element accepts every global attribute. A few are worth knowing.

Example: dark mode toggle with a class on html

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode Example</title>
    <style>
        html.dark body {
            background: #0b1020;
            color: #e2e8f0;
        }
        html.dark a {
            color: #67e8f9;
        }
        body {
            font-family: system-ui, sans-serif;
            padding: 24px;
            transition: background 0.3s ease, color 0.3s ease;
        }
    </style>
</head>
<body>
    <h1>Dark Mode Example</h1>
    <p>The dark theme is applied via a class on the html element.</p>
    <p><a href="https://inarlearn.com/">Inar Learn</a></p>
</body>
</html>

This is a common pattern in modern web development. The .dark class on <html> lets CSS rules scope themselves to the entire document — no need to add the class to every element individually.

A Complete Document

Here is a full, well-formed HTML document showing the <html> element in its proper place with the standard lang attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A Complete HTML Document</title>
</head>
<body>

    <h1>Welcome</h1>

    <p>
        This document uses the html element as its root,
        with the lang attribute set to English.
    </p>

</body>
</html>

That is the whole pattern. Every page you write follows it.

Common Mistakes with <html>

A handful of mistakes come up again and again with the <html> element. Here are the ones to watch for.

1. Forgetting the lang attribute

2. Missing the closing tag

3. Placing content directly inside <html>

4. Using xml:lang instead of lang

The xml:lang and xmlns attributes were required in XHTML. They are unnecessary in HTML5 and should be removed.

5. Using a placeholder value for lang

6. Adding a second <html> element

7. Self-closing the html element

8. Setting lang to the wrong language

Screen readers trust the lang attribute. If you say the page is in French but the content is in English, the reading will be nearly unintelligible.

Best Practices

A few habits make the <html> element work reliably across every page in a project.

Key Takeaways

• The <html> element is the root element of every HTML document.
• It comes right after the DOCTYPE and wraps the entire page — head and body alike.
• It has exactly two valid children: one <head> and one <body>.
• Every page should have a lang attribute declaring the primary language.
• Use dir="rtl" only for right-to-left languages; the default is ltr.
• The lang attribute is critical for screen readers, search engines, and translation tools.
• Language codes follow the BCP 47 standard: en, en-US, fr, ar, and so on.
• A class on <html> is a standard way to toggle themes like dark mode.
• The element is not void — it always has an opening and closing tag.
• Validate your HTML to catch a missing lang, an invalid language code, or a misplaced element.

What to Learn Next

Now that you understand the <html> element, the next step is to learn the two elements it contains. Start with HTML DOCTYPE: What It Is and Why You Need It for the declaration that comes just before it, then explore HTML File Structure and HTML Syntax Explained.

For deeper coverage, explore HTML Elements, HTML Attributes, and HTML Nesting Explained. To understand how the browser builds the DOM tree from these elements, read How Web Browsers Work and How Websites Work.

Practice Challenge

Write a small HTML page that exercises the <html> element in a few different ways. Your page should:

• Start with <!DOCTYPE html>
• Use an <html> element with a lang attribute set to your language
• Include a <head> with a title and a <meta charset>
• Include a <body> with a heading and a paragraph
• Have a valid closing </html> at the end of the file

Once your page renders, open DevTools, inspect the top of the DOM, and confirm that the <html> element is the root and that the <head> and <body> are its only children.

As a final step, run the page through the W3C validator. A clean result means your document structure is correct — and you have mastered the outermost layer of every HTML page.