Skip to content
html.sh

<html> - Root Element

The <html> Element

Section titled “The <html> Element”
Root Element HTML 2.0

The <html> element is the root (top-level) element of an HTML document. Every HTML page must have exactly one <html> element that wraps all other content. It tells browsers that everything inside is HTML content and provides a place to declare the document’s primary language.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<!DOCTYPE html>
<html lang="language-code">
  <head>
    <!-- Document metadata -->
  </head>
  <body>
    <!-- Document content -->
  </body>
</html>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”
AttributeDescriptionExample
langSpecifies the primary language of the documentlang="en"
dirSets the text directionality (ltr or rtl)dir="rtl"
xmlnsDefines the XML namespace (for XHTML)xmlns="http://www.w3.org/1999/xhtml"

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Setting Document Language

Section titled “Setting Document Language”

The most important use of the <html> element is declaring your document’s language. This helps browsers, search engines, and assistive technologies.

Result

Multiple Language Document

Section titled “Multiple Language Document”

For documents with sections in different languages, set the primary language on <html> and override it on specific elements.

Result

Right-to-Left Languages

Section titled “Right-to-Left Languages”

Use the dir attribute for languages that read right-to-left, like Arabic or Hebrew.

Result

Best Practices

Section titled “Best Practices”

Always Include DOCTYPE

Section titled “Always Include DOCTYPE”

The <!DOCTYPE html> declaration must come before the <html> tag to ensure the browser renders in standards mode.

<!DOCTYPE html>
<html lang="en">
  <!-- rest of document -->
</html>

Specify Language Code

Section titled “Specify Language Code”

Use ISO 639-1 language codes (two-letter codes) for the lang attribute:

  • en - English
  • es - Spanish
  • fr - French
  • de - German
  • zh - Chinese
  • ja - Japanese

For regional variants, use the extended format:

  • en-US - American English
  • en-GB - British English
  • pt-BR - Brazilian Portuguese

Minimize Attributes on HTML Element

Section titled “Minimize Attributes on HTML Element”

The <html> element should remain simple. Avoid adding unnecessary classes, IDs, or custom data attributes here.

<!-- Good -->
<html lang="en">


<!-- Avoid -->
<html lang="en" class="no-js" data-theme="dark" id="root">

Accessibility

Section titled “Accessibility”

Language Declaration Impact

Section titled “Language Declaration Impact”

The lang attribute is crucial for accessibility:

  • Screen readers use it to select the correct pronunciation rules
  • Translation tools use it to detect the source language
  • Search engines use it to serve content to the right audience

ARIA Considerations

Section titled “ARIA Considerations”

The <html> element has an implicit ARIA role of document. You typically don’t need to override this.

<!-- Implicit role, no ARIA needed -->
<html lang="en">

Browser Support

Section titled “Browser Support”
BrowserVersion
ChromeAll versions
FirefoxAll versions
SafariAll versions
EdgeAll versions
IEAll versions
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Missing lang Attribute

Section titled “Missing lang Attribute”
<!-- Avoid: Missing language declaration -->
<html>
  <body>Content</body>
</html>


<!-- Correct: Include lang attribute -->
<html lang="en">
  <body>Content</body>
</html>

Multiple HTML Elements

Section titled “Multiple HTML Elements”
<!-- Wrong: Only one <html> element allowed -->
<html lang="en">
  <body>First document</body>
</html>
<html lang="fr">
  <body>Second document</body>
</html>


<!-- Correct: One html element per document -->
<html lang="en">
  <body>
    <section>First section</section>
    <section lang="fr">Section en français</section>
  </body>
</html>

Specifications

Section titled “Specifications”