HTML <html> Tag – The Document Root Element

Definition and Usage

The html tag is the top-level tag in an HTML document, representing the root element from which all other elements originate, like branches growing from it.

Therefore, the start tag represents the start of the HTML document, and the end tag represents the end of the HTML document.

Basic Example

To understand the <html> tag, you need to understand the basic structure of HTML.

Basic Structure of HTML

<!DOCTYPE html> <!-- HTML document type declaration; not an HTML element -->
<html> <!-- The start of the HTML document -->
    <head>
        <!-- The document's metadata -->
    </head>
    <body>
        <!-- The document's content -->
    </body>
</html> <!-- The end of the HTML document -->

<!DOCTYPE html>: This part declares the document type and serves to ensure that the browser follows the latest web standards and renders the document correctly. It is not an HTML element.
<html>: The root element, which is the top-level element of an HTML document. All HTML elements must be contained within the <html> element.
<head>: This part defines the metadata and header information of the HTML document. It provides information about the document to the browser and can be used to link external stylesheets, JavaScript files, and more.
<body>: This part defines the body content of the HTML document. The content that is actually displayed on the web page is written in this section, and various elements such as text, images, links, tables, and forms can be included.

When you create an HTML document with this basic structure, the browser correctly interprets the document and displays it as a web page.

Technical Summary

Technical Summary of the html tag
Permitted parents	None. This is the root element of a document.
Permitted content	One `<head>` element, followed by one `<body>` element. The order cannot be changed.
Implicit ARIA `role`	`document`
Permitted ARIA `roles`	No `role` permitted

Incorrect Markup Examples

The <html> tag is the root element of an HTML document, where the start tag represents the start of the document and the end tag represents its end. However, incorrect markup is common. The following are examples of incorrect use of the <html> tag. By reviewing these examples, we will examine the correct way to mark up the <html> tag.

Writing Multiple HTML Documents in a Single File

HTML

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>
<html> <!-- Repeated HTML document -->
    <head>

    </head>
    <body>

    </body>
</html>

In this example, the <html> tag is used repeatedly, resulting in multiple HTML documents being written in a single file. A single HTML file must contain only one HTML document.

Incorrect HTML Structure

In this example, the <div> tag is used, which is not permitted as a child element of the <html> tag. The <html> tag must have the <head> tag as its first child, followed by the <body> tag as its last child.

Accessibility Considerations

It is recommended to specify the primary language of the document by using the lang attribute on the tag, the root element of an HTML document.

Using this attribute provides essential language information to screen readers, browsers (such as Chrome, which supports automatic translation tools), and search engines, helping them determine the appropriate language for the content.

The following example specifies that the primary language of the document is English by setting lang="en" on the tag.

HTML

<!DOCTYPE html>
<html lang="en"> <!-- Specifies the primary language of the document -->
    <head>
        <title>Your Descriptive Page Title Here</title>
    </head>
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

If a primary language is not specified, the browser may infer the language based on its settings or the document's content. If this inferred language differs from the actual language of the document, it can lead to issues such as incorrect pronunciation by screen readers, inaccurate automatic translation, or incorrect interpretation by search engines.