Getting Started›Core· 40 min read

The HTML Document Structure

Every page shares the same skeleton. Learn the four pieces that go on every single page you will ever build.

What you will learn

Name the purpose of <!DOCTYPE>, <html>, <head> and <body>
Explain the difference between the head and the body
Set the language and character set correctly

Every page has the same skeleton

No matter how big a website is, every page is built on the same four-part skeleton. Memorise it once and you never write it from scratch again.

The skeleton, explained

<!DOCTYPE html>          <!-- 1. I am a modern HTML5 page -->
<html lang="en">         <!-- 2. The whole page, in English -->
  <head>                 <!-- 3. Info ABOUT the page (hidden) -->
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>                 <!-- 4. What you SEE on the page -->
    <h1>Visible content goes here</h1>
  </body>
</html>

The  parts are just notes for you — the browser ignores them. Read the four numbered lines from top to bottom: a declaration, then <html> wrapping everything, then <head> (hidden info) and <body> (visible content) sitting inside it. The next table explains each piece.

The four pieces

Part	What it is for
`<!DOCTYPE html>`	The very first line. Tells the browser “use modern HTML5 rules”.
`<html>`	The root element. Everything lives inside it. `lang="en"` states the language.
`<head>`	Information about the page — title, character set, links to CSS. Not shown on the page.
`<body>`	Everything the visitor actually sees — text, images, buttons, everything.

Note: The simplest rule to remember: HEAD = hidden settings. BODY = visible stuff. If a student can read it on screen, it belongs in the body.

Notice: the title is NOT visible in the page body

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CodingClave — Learn to Code</title>
</head>
<body>
  <h1>Look at the browser tab above 👆</h1>
  <p>The title set in the head is not on the page — it is on the tab.</p>
</body>
</html>

Live preview

Notice the proof: the words “CodingClave — Learn to Code” are written in the <title> inside the <head>, yet they do not appear in the page body — they show up on the browser tab instead. Everything inside <body> (the <h1> and <p>) is what you actually see on the page. That is the head-versus-body rule in action.

Note: Output: Browser tab: CodingClave — Learn to Code On the page: the heading “Look at the browser tab above 👆” and the paragraph below it. The title text itself is nowhere on the page.

Watch out: A page can have only one <head> and one <body>, and they go inside <html> in that order. Mixing them up is a classic early bug.

Q. Where should a visible heading like <h1>Welcome</h1> go?

Answer: Anything the visitor should SEE goes in the <body>. The <head> is only for hidden information about the page.

✍️ Practice

Type the full skeleton from memory and give your page a proper title that appears on the browser tab.
Set lang="en" and <meta charset="UTF-8">, then put a ₹ symbol and an emoji in a paragraph — confirm they display.

🏠 Homework

Explain in two lines: what is the difference between the <head> and the <body>?