**`<html>`** is the top-level container for an entire HTML page — exactly one per document, and everything else (head, body, and all their contents) lives inside it. The **`lang`** attribute (e.g. `lang="en"`) is important: it tells screen readers which pronunciation rules to use and tells search engines and translation tools which language the content is in.
1Understanding <html>
`<html>` is the top-level container for an entire HTML page — exactly one per document, and everything else (head, body, and all their contents) lives inside it. The `lang` attribute (e.g. lang="en") is important: it tells screen readers which pronunciation rules to use and tells search engines and translation tools which language the content is in.
Forgetting lang on <html> is one of the most common accessibility (WCAG) failures flagged by automated audits like Lighthouse.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>2Practical Example
Here is a real-world application of <html> showing how it is used in production HTML.
<!-- Multilingual site: set lang per page -->
<html lang="es">
<!-- Spanish content -->
</html>3Best Practices
Follow these guidelines when working with <html>:
1. Always set lang, e.g. <html lang="en"> or <html lang="es">
2. Only one <html> element per document, containing exactly one <head> and one <body>
3. Don't add visual styling directly on <html> — style <body> or specific elements instead
Tip: Forgetting lang on <html> is one of the most common accessibility (WCAG) failures flagged by automated audits like Lighthouse.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>