HTML Document Root | The <html> Element

Understanding the <html> Element

The <html> element is the root element of an HTML document and contains the document's head and body elements.

After the document type declaration, the remaining HTML document is contained within the <html> element. It establishes the top level of the document hierarchy and commonly uses the lang attribute to identify the primary language of the page.

HTML Element Syntax

The html element uses a start tag and an end tag that surround the HTML document.

<html>
  ...
</html>

In a typical document, the html element begins immediately after the doctype declaration and ends after the closing body tag.

<!doctype html>
<html lang="en">
  ...
</html>

The lang="en" attribute in this example identifies English as the primary language of the document.

The Root Element

The html element is called the root element because it is the top-level element of an HTML document. All other HTML elements in the document are associated with the structure beneath this root.

A simplified document can be represented as:

html
├── head
└── body

The head and body elements are children of the html element, while elements contained within the head or body become descendants of html.

This is the same parent, child, ancestor, and descendant hierarchy introduced in the Nesting Elements tutorial, now applied to the structure of a complete HTML document.

The Head & Body Elements

The html element contains two primary parts: the head and the body.

<html lang="en">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

The head contains document metadata and related information, such as the document title, character encoding, stylesheet links, and other resources or settings.

The body contains the document's page content, including headings, paragraphs, images, links, lists, forms, and other content associated with the webpage.

The following pages examine the head, its commonly used elements, and the body in greater detail.

The lang Attribute

The lang attribute identifies the language of an element's content. When placed on the html element, it establishes the primary language of the entire document.

<html lang="en">

In this example, en identifies the document as being primarily written in English.

Other language codes can be used when appropriate:

<html lang="es">

Here, es identifies Spanish as the primary language.

Declaring the document language can help screen readers use appropriate pronunciation, assist browsers and other software in processing language-specific content, and provide useful information to search engines and other tools.

Changing Language Within a Document

The language declared on the html element applies to the document unless a descendant element specifies a different language.

For example, an English document may contain a Spanish word or phrase:

<html lang="en">
  ...
  <body>
    <p>The Spanish word for hello is <span lang="es">hola</span>.</p>
  </body>
</html>

The document is primarily English, while the span identifies hola as Spanish.

This demonstrates how global attributes can be inherited or overridden as needed within the document hierarchy.

The Doctype & HTML Element

The doctype and html element appear next to one another at the beginning of a document, but they perform different jobs.

<!doctype html>
<html lang="en">
  ...
</html>

The <!doctype html> declaration causes the browser to use modern standards mode, while the html element is the root element that contains the HTML document.

The doctype is therefore not contained inside the html element:

<!doctype html>        ← document type declaration
<html lang="en">       ← root element
  ...
</html>

Keeping this distinction clear makes the overall document structure easier to understand.

HTML Document Hierarchy

Once the head and body are added, other elements can be nested within them to create the complete document hierarchy.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <main>
      <p>Welcome to my website.</p>
    </main>
  </body>
</html>

The hierarchy can be visualized as:

html
├── head
│   ├── meta
│   └── title
│
└── body
    ├── header
    │   └── h1
    │
    └── main
        └── p

The html element sits at the top of this hierarchy and contains the document's two major structural divisions.

Attributes on the <html> Element

As the document's root element, html supports global attributes. The lang attribute is one of the most important and should normally be included.

<html lang="en">

The dir attribute can also be used when the document's text direction needs to be explicitly identified:

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

In this example, lang="ar" identifies Arabic and dir="rtl" establishes right-to-left text direction.

Other global attributes can technically be used on the html element when appropriate, but attributes should be added because they serve a purpose rather than simply because they are available.

Common <html> Element Mistakes

The basic html element is simple, but mistakes in the root structure can make a document harder to understand or reduce the usefulness of its metadata.

Common mistakes include:

Placing the doctype inside the html element.
Leaving out the document's primary language declaration.
Using the wrong language code in the lang attribute.
Confusing the html element with the entire HTML file, including the doctype.
Placing the head or body outside the document's root structure.
Using lang to describe character encoding instead of language.

The character encoding and document language are separate concepts: <meta charset="utf-8"> identifies the character encoding, while lang="en" identifies the language of the content.

<html> Element Best Practices

A consistent root structure gives every HTML document a predictable foundation and provides browsers and assistive technologies with useful information about the page.

Place the html element immediately after the doctype declaration.
Include the document's primary language with the lang attribute.
Use an accurate language code for the page content.
Place the head and body within the document's root structure.
Use lang on descendant elements when their language differs from the surrounding content.
Use dir when text direction needs to be explicitly specified.
Keep the document hierarchy consistently formatted and indented.

A good starting pattern for an English-language HTML document is therefore:

<!doctype html>
<html lang="en">
  ...
</html>

Summary

The html element is the root element of an HTML document and contains the document's head and body. It appears immediately after the doctype declaration and establishes the top level of the HTML document hierarchy.

The lang attribute should normally identify the document's primary language, while descendant elements can declare another language when needed. Together, the doctype and html element provide the foundation upon which the rest of the document structure is built.

The HTML Document Root