Anatomy of a Complete HTML Document

A complete HTML document has a doctype, an html root, a head, and a body. Each piece has a job: standards mode, language, document information, and visible content.

What You Need to Know

Metadata such as charset and viewport belongs in head; headings and paragraphs normally belong in body. Keep the structure clear before adding optional features.

Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Document Anatomy</title>
    </head>
    <body>
        <header>
            <h1>My Page</h1>
        </header>
        <main>
            <p>Hello!</p>
        </main>
    </body>
</html>

Let’s Understand the Example

• The html element holds the complete page and usually names its language.
• The head contains useful page information for the browser, such as its title and character encoding.
• A meta element gives the browser short information about the document. Different attributes control different hints.
• Lang tells tools which language the text uses, helping pronunciation and language-aware features.
• Charset tells the browser how to decode the page text; UTF-8 is the usual choice.
• Name is the key the browser normally sends when a form control is submitted.

Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.

What Should You See?

The browser tab should show “Document Anatomy”. The page itself shows “My Page” as a heading; those two labels are allowed to be different.

Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.

Try It Yourself

1. Change the title and main heading separately to see where each appears.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Putting visible paragraphs inside head or forgetting the title element.
• The title in the browser tab and the heading visible in the page are different pieces of information.

Key Takeaways

• A complete HTML document has a doctype, an html root, a head, and a body.
• The html element holds the complete page and usually names its language.
• Metadata such as charset and viewport belongs in head; headings and paragraphs normally belong in body. Keep the structure clear before adding optional features.