You might see <html> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.
The Idea in Plain English
The document root element. Set lang to the primary language of the page and nest head and body inside it.
For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About the Club</title>
</head>
<body>
<h1>About the Club</h1>
</body>
</html>What Each Part Does
- The html root contains the document, and lang identifies its main language.
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The title gives the document a name in tabs and other browser surfaces.
- lang identifies the natural language for text-to-speech and language tools.
- charset identifies the character encoding used by the document.
The browser constructs the top-level document structure.
Try It Yourself
Try replacing the example content with your own while keeping the valid HTML structure.
Common Beginner Mistakes
- Omitting language information from a multilingual public site.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- The document root element. Set lang to the primary language of the page and nest head and body inside it.
- The browser constructs the top-level document structure.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.