The <html> element is the root element of every HTML document. It's the container that wraps all other elements on your page. Understanding this fundamental element and its attributes is essential for creating proper, accessible, and standards-compliant web pages.
What is the HTML Element?
The <html> element is the root element of an HTML document. "Root" means it's the top-level container—everything else on your page is nested inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>Think of the <html> element as a box that contains your entire web page. Everything visible and invisible, from the title to the content, exists inside this element.
The HTML Document Hierarchy
Understanding the hierarchy helps visualize how HTML documents are structured:
<!DOCTYPE html> ← Declaration (not part of the tree)
<html> ← Root element (top of the tree)
├── <head> ← Metadata section
│ ├── <title> ← Page title
│ └── <meta> ← Meta information
└── <body> ← Content section
├── <h1> ← Heading
├── <p> ← Paragraph
└── <div> ← Division
└── <span> ← Inline elementThe <html> element sits at the top of this tree structure, containing two main branches: <head> and <body>.
Basic HTML Element Structure
Every HTML document follows this basic pattern:
<!DOCTYPE html>
<html>
<head>
<!-- Document metadata goes here -->
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>The opening <html> tag comes right after the DOCTYPE declaration, and the closing </html> tag is the very last thing in your document.
The Lang Attribute
The most important attribute for the <html> element is lang. This attribute declares the primary language of your document's content.
<html lang="en">Why the Lang Attribute Matters
Including the lang attribute is crucial for several reasons:
1. Accessibility
Screen readers use the lang attribute to select the correct pronunciation rules. Without it, a screen reader might pronounce English text with French rules, making it incomprehensible for users who rely on assistive technology.
<!-- Screen reader knows to use English pronunciation -->
<html lang="en">
<body>
<p>Hello, world!</p>
</body>
</html>
<!-- Screen reader knows to use Spanish pronunciation -->
<html lang="es">
<body>
<p>¡Hola, mundo!</p>
</body>
</html>2. Search Engine Optimization (SEO)
Search engines use the lang attribute to understand what language your content is in. This helps them:
- Show your page in language-specific search results
- Properly index your content
- Match users searching in specific languages
3. Browser Features
Browsers use the lang attribute to:
- Offer translation services
- Apply correct spell-checking
- Use appropriate typography and hyphenation rules
- Select proper quotation marks and punctuation
4. Styling
You can use CSS to style content differently based on language:
/* Different font for Japanese content */
:lang(ja) {
font-family: "Yu Gothic", sans-serif;
}
/* Different font for Arabic content */
:lang(ar) {
font-family: "Noto Sans Arabic", sans-serif;
direction: rtl; /* Right-to-left text */
}Language Codes
Language codes follow the ISO 639-1 standard. Here are some common language codes:
| Language | Code | Example |
|---|---|---|
| English | en | <html lang="en"> |
| Spanish | es | <html lang="es"> |
| French | fr | <html lang="fr"> |
| German | de | <html lang="de"> |
| Italian | it | <html lang="it"> |
| Portuguese | pt | <html lang="pt"> |
| Chinese | zh | <html lang="zh"> |
| Japanese | ja | <html lang="ja"> |
| Arabic | ar | <html lang="ar"> |
| Russian | ru | <html lang="ru"> |
Regional Language Variants
You can be more specific by adding a region code after the language code, separated by a hyphen:
<!-- British English -->
<html lang="en-GB">
<!-- American English -->
<html lang="en-US">
<!-- Australian English -->
<html lang="en-AU">
<!-- Mexican Spanish -->
<html lang="es-MX">
<!-- Spain Spanish -->
<html lang="es-ES">
<!-- Brazilian Portuguese -->
<html lang="pt-BR">
<!-- European Portuguese -->
<html lang="pt-PT">While specifying the region is optional, it can help with:
- Proper date and number formatting
- Correct spelling variations (e.g., "color" vs "colour")
- Regional search engine optimization
- Appropriate currency symbols
Handling Multiple Languages
If your page contains content in different languages, you can use the lang attribute on specific elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multilingual Page</title>
</head>
<body>
<h1>Welcome to our website</h1>
<p>This page is primarily in English.</p>
<!-- Spanish section -->
<section lang="es">
<h2>Bienvenidos</h2>
<p>Esta sección está en español.</p>
</section>
<!-- French section -->
<section lang="fr">
<h2>Bienvenue</h2>
<p>Cette section est en français.</p>
</section>
<!-- Back to English -->
<p>Thank you for visiting!</p>
</body>
</html>💡 Best Practice:
Set the lang attribute on the <html> element for the primary language, then override it on specific elements that use different languages. This gives screen readers and search engines the most accurate information.
The XMLNS Attribute (XHTML Legacy)
In older XHTML documents, you might see an xmlns attribute:
<!-- XHTML style (legacy) -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">The xmlns (XML namespace) attribute was required in XHTML but is not needed in HTML5. Modern HTML5 documents don't use it:
<!-- HTML5 style (modern) -->
<html lang="en">⚠️ Note:
If you see xmlns in old code, you can safely remove it when updating to HTML5. It doesn't hurt to include it, but it's unnecessary and outdated.
Other HTML Element Attributes
While lang is the most common and important attribute, the <html> element can have other attributes:
The Dir Attribute (Text Direction)
The dir attribute specifies text direction for languages like Arabic and Hebrew that read right-to-left:
<!-- Right-to-left (for Arabic, Hebrew, etc.) -->
<html lang="ar" dir="rtl">
<!-- Left-to-right (default, usually omitted) -->
<html lang="en" dir="ltr">Most languages are left-to-right by default, so you typically only need dir for right-to-left languages.
Class and ID (Rarely Used on HTML Element)
Technically, you can add class or id attributes to the <html> element for CSS or JavaScript purposes:
<!-- Adding a class for styling -->
<html lang="en" class="no-js">
<script>
// JavaScript can replace the class
document.documentElement.className = 'js';
</script>This technique is sometimes used to detect JavaScript support, but it's rare in modern development.
Common Mistakes
Mistake 1: Forgetting the Lang Attribute
<!-- WRONG: No lang attribute -->
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Content in English</p>
</body>
</html>
<!-- CORRECT: Lang attribute included -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Content in English</p>
</body>
</html>Mistake 2: Wrong Language Code
<!-- WRONG: Invalid language code -->
<html lang="english">
<!-- WRONG: Using full language name -->
<html lang="Spanish">
<!-- CORRECT: Use ISO language codes -->
<html lang="en">
<html lang="es">Mistake 3: Multiple HTML Elements
<!-- WRONG: Multiple html elements -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 1</title>
</head>
<body>
<p>Content</p>
</body>
</html>
<html lang="en">
<head>
<title>Page 2</title>
</head>
<body>
<p>More content</p>
</body>
</html>
<!-- CORRECT: Only one html element per document -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>All content goes inside one html element</p>
</body>
</html>Mistake 4: Content Outside HTML Element
<!-- WRONG: Content before html -->
<!DOCTYPE html>
<p>This paragraph is outside!</p>
<html lang="en">
<head>
<title>Page</title>
</head>
<body>
<p>Content</p>
</body>
</html>
<!-- WRONG: Content after html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page</title>
</head>
<body>
<p>Content</p>
</body>
</html>
<p>This paragraph is outside!</p>
<!-- CORRECT: Everything inside html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page</title>
</head>
<body>
<p>All content inside html element</p>
</body>
</html>Complete Example
Here's a complete, properly structured HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A complete HTML example">
<title>Complete HTML Document</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>About This Page</h2>
<p>This page demonstrates proper HTML structure.</p>
<!-- Content in different language -->
<blockquote lang="fr">
<p>La vie est belle.</p>
<footer>— French saying</footer>
</blockquote>
</article>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>Accessibility Considerations
The <html> element plays a crucial role in web accessibility:
- Always include the lang attribute - It's one of the most important accessibility features
- Use correct language codes - Wrong codes confuse assistive technology
- Specify region when relevant - Helps with pronunciation and formatting
- Mark up language changes - Use
langon elements when language changes within the page
Testing Language Declaration
You can verify your language declaration in several ways:
1. Browser Developer Tools
// Open browser console (F12) and type:
document.documentElement.lang
// Returns: "en" (or whatever your lang attribute is set to)2. Screen Reader Testing
Test with a screen reader to ensure it pronounces content correctly:
- Windows: NVDA (free) or JAWS
- Mac: VoiceOver (built-in)
- Mobile: TalkBack (Android) or VoiceOver (iOS)
3. HTML Validators
Use the W3C HTML Validator to check if your lang attribute is properly formatted.
Key Takeaways
- The
<html>element is the root container of all HTML content - Every HTML document has exactly one
<html>element - Always include the
langattribute for accessibility and SEO - Use proper ISO 639-1 language codes (en, es, fr, de, etc.)
- You can specify regional variants (en-US, en-GB, es-MX, etc.)
- Override
langon specific elements for multilingual content - Use
dir="rtl"for right-to-left languages - The
xmlnsattribute is not needed in HTML5 - Nothing should exist outside the
<html>element except DOCTYPE - The
<html>element directly contains<head>and<body>
What's Next?
Now that you understand the HTML root element, we'll dive into the<head> section. The head contains all the metadata and information about your document that doesn't appear directly on the page. You'll learn about titles, meta tags, links to stylesheets, and more!