FOUNDATION

HTML Document Structure

Build a valid page skeleton with doctype, head and body.

After this lessonUnderstand what belongs in the document head and page body.

How it works

HTML describes the structure and meaning of a web page. The head contains metadata for the browser and search engines, while the body contains visible page content.

Use a doctype and language attribute, provide a useful title and keep the structure simple enough that another person can understand it quickly.

REAL WORK

A small internal report page still benefits from semantic structure and useful metadata.

SYNTAX

The pattern

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page title</title>
</head>
<body>
  <main>Hello</main>
</body>
</html>

Example

<main>
  <h1>Production Dashboard</h1>
  <p>Daily overview</p>
</main>

TRY IT

Edit and preview

Change the HTML on the left. The sandboxed preview updates on the right.

<main>
  <h1>Production Dashboard</h1>
  <p>Daily overview</p>
</main>

QUICK CHECK

Where does visible page content normally go?

Progress is stored only in this browser. No account required.