Illustration of small workers assembling the skeleton of a web page with scaffolding and a blueprint

Module 1: First Page · Lesson 4 of 6

HTML Boilerplate: The Basic Structure of an HTML Page

Q: What is the basic structure of an HTML document?

Every page starts with <!DOCTYPE html> , followed by <html lang="en"> , which contains two parts: the <head> with <meta charset="utf-8"> and a <title> , and the <body> with all visible content. People call this little template the HTML boilerplate. Copy it for every new page you start.

Q: Why do we use meta charset utf-8?

Your file is stored as bytes. The character encoding tells the browser how to turn those bytes back into letters. UTF-8 covers every character in every language, plus symbols and emoji. Without the declaration, the browser may guess wrong and show garbled text such as Ã© instead of é. Put it first in the head and save your file as UTF-8.

About 7 minDrag and drop

By HTML6 (opens in a new tab) · Updated 2026-10-22 · How we write and check content

All lessons in Module 1

Module overview

Goal: Build the skeleton that every HTML page needs.

Learn

Every real HTML page uses the same skeleton, much as a letter always has an address at the top and a signature at the bottom. The parts:

<!DOCTYPE html>, the doctype (short for document type declaration (opens in a new tab)), is the very first line. It tells the browser to use modern HTML rules.
<html lang="en"> wraps the whole page and says it is in English.
<head> holds information about the page. Inside it, <meta charset="utf-8"> sets the character encoding, so letters like é display correctly, and <title> sets the text on the browser tab.
<body> holds everything visible.

An element placed inside another one is nested. Indent each level by two spaces and the structure shows at a glance. <meta> has no closing tag. It is a void element with nothing to wrap, like the image tag from Attributes.

The short version

<!DOCTYPE html> must be the very first line. It tells the browser to use modern standards mode.
<html lang="en"> wraps the whole page and declares its language.
The head holds information about the page, such as <meta charset="utf-8"> and <title>. The body holds everything visible.
Indent each level of nesting by two spaces. You'll read the structure at a glance.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cookie Club</title>
  </head>
  <body>
    <h1>Welcome to Cookie Club</h1>
    <p>We meet every Friday. Bring cookies.</p>
  </body>
</html>

Your task

Drag the lines into the right order to build a complete page skeleton. Indentation gives you a clue, because every level of nesting adds two spaces. Inside the head, the meta line comes first, so the browser knows the character encoding before it reads anything else.

When the skeleton is complete:

Change the title My Page to a name for your page.
Change the heading Hello to something of your own.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cookie Club</title>
  </head>

Right

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cookie Club</title>
  </head>

Without the doctype, browsers switch to quirks mode, an old compatibility mode in which some layout rules behave differently.

Wrong

<!DOCTYPE html>
<html>
  <head>

Right

<!DOCTYPE html>
<html lang="en">
  <head>

Without lang, a screen reader may use the wrong pronunciation, and translation tools have to guess the language.

Go deeper

If you leave out <html>, <head> or <body>, the browser creates them anyway, so every page in memory has all three. Write them yourself anyway, so anyone reading the code can see where each part belongs. The next lesson, Head and Body, shows what goes in each part.

The charset line has a rule of its own: it must appear within the first 1024 bytes of the file (opens in a new tab). So it goes first in the head, ahead of the title.

Real-world pages add a few more lines to the head. <meta name="viewport" content="width=device-width, initial-scale=1"> makes the page fit phone screens instead of showing a shrunken desktop layout. <meta name="description" content="..."> gives a short summary that search engines may show under your link.

The <title> does more work than it seems to. Search engines usually show it as the clickable headline in results, and it becomes the name of a bookmark. Give every page its own title and keep it around 50 to 60 characters.

Save a finished skeleton as template.html and copy it whenever you start a new page. When you want a fuller starting point, free HTML5 templates (opens in a new tab) give you complete responsive layouts to study and adapt.

Frequently asked questions

What is the basic structure of an HTML document?

Every page starts with <!DOCTYPE html>, followed by <html lang="en">, which contains two parts: the <head> with <meta charset="utf-8"> and a <title>, and the <body> with all visible content. People call this little template the HTML boilerplate. Copy it for every new page you start.

What does the DOCTYPE do in HTML?

<!DOCTYPE html> tells the browser the page uses modern HTML, so it renders in standards mode. Without it, browsers fall back to quirks mode (opens in a new tab), which imitates bugs of 1990s browsers to keep ancient pages working. The doctype is not a tag, so it has no closing tag. Case doesn't matter either, though most people write DOCTYPE in capitals.

Why do we use meta charset utf-8?

Your file is stored as bytes. The character encoding tells the browser how to turn those bytes back into letters. UTF-8 covers every character in every language, plus symbols and emoji. Without the declaration, the browser may guess wrong and show garbled text such as Ã© instead of é. Put it first in the head and save your file as UTF-8.