HTML & CSS · Document Structure · Lesson 1 of 25

The HTML Skeleton

Concept

The HTML Skeleton

Every HTML page starts with a doctype, then html, head, and body tags. The head holds metadata and the body holds visible content.

The doctype isn't a tag in the usual sense — it's a signal that tells the browser to render the page in modern standards mode instead of an old quirks mode meant for compatibility with ancient pages.

By the end of this lesson

Explain the core idea behind The HTML Skeleton.
Predict output before running a change.
Test one realistic and one unusual input.
Use the result to make the next decision.

How to study this page

1. Read one concept.
2. Change the example.
3. Run, compare, and explain.
4. Complete the challenge below.

Syntax

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>...</body>
</html>

ExampleRunnable

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Try it Yourself »

Adding a language and charset

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Page</title>
  </head>
</html>

Note: lang helps screen readers and translators, and charset="UTF-8" ensures special characters display correctly.

Self-check before continuing

Without looking at the example, describe what changes when you modify one input in The HTML Skeleton. Then reopen the editor and prove your explanation with a small test.

You are ready to continue when you can predict, test, and explain the result.

Your turn

Write a minimal HTML page with your name as the title and a heading that says Welcome.

Loading editor…

Console

Output will appear here...