← HTML & CSS

The document skeleton (DOCTYPE, html, head, body)

The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.

Part of: HTML and CSS Journey — Module 4

What it does: <head> contains information about the page such as its title and stylesheets, none of which appears in the browser window. The <html> tag is the outermost container. Both <head> and <body> are nested directly inside it. <!DOCTYPE html> must be the very first line - it tells the browser this is a modern HTML document. The exclamation mark before DOCTYPE is required. <DOCTYPE html> without it is not a valid declaration. Headings, paragraphs, images, and links all go inside <body>, the visible section of the skeleton.

Common mistakes: The DOCTYPE declaration must start with an exclamation mark: <!DOCTYPE html>. Writing <DOCTYPE html> is missing the ! and is invalid. The <html> opening tag is missing its closing angle bracket >. It should be <html>, not <html without the >.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of The document skeleton (DOCTYPE, html, head, body) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which line must appear first in every HTML file?

<!DOCTYPE html><html>

Matches

↓

Missing the exclamation mark - the correct declaration is <!DOCTYPE html>

Applying

Meanings

Term

<!DOCTYPE html>

Meaning

The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.

Practice

<!DOCTYPE html>

Testing

Gaps

<! html>

Check Answer

Spots

1<DOCTYPE html>

2<html>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which line must appear first in every HTML file?

A. <!DOCTYPE html> ✓

B. <html>

<!DOCTYPE html> must be the very first line - it tells the browser this is a modern HTML document.

2. Where does visible content like headings and paragraphs go?

A. Inside <body> ✓

B. Inside <head>

<body> holds everything the user sees. <head> is for metadata like the page title and linked stylesheets.

3. True or false: <head> must come before <body> in the HTML skeleton.

A. True ✓

B. False

The correct order inside <html> is always <head> first, then <body>.

4. Which tag wraps the entire HTML document - both head and body?

A. <html> ✓

B. <body>

<html> is the root element. Both <head> and <body> are nested directly inside it.

5. True or false: the <title> element belongs inside <body>.

A. False ✓

B. True

<title> is metadata and belongs inside <head>. It appears in the browser tab, not on the page.

Match the Pairs

<!DOCTYPE html> → The mandatory first line of every HTML file - tells the browser this is a modern HTML document

<body> <h1>Hello</h1> </body> → The element that holds all visible page content - everything the user sees in the browser window

<head> holds metadata - its content is not visible on the page → <head> <title>My Page</title> </head>

<html> is the root element - it wraps the entire document including head and body → <html> <head></head> <body></body> </html>

<DOCTYPE html> → Missing the exclamation mark - the correct declaration is <!DOCTYPE html>

<html> <body></body> <head></head> </html> → Wrong order - <head> must always appear before <body> inside <html>

Key Term

<!DOCTYPE html>

The declaration that must appear on the very first line of every HTML file, telling the browser the document uses modern HTML.

Fill in the Blanks

1. <!DOCTYPE html> <html> </html>

Hint: Type the keyword that declares the document type

2. <!DOCTYPE html> <html> </html>

Hint: Type the root element tag that wraps the entire HTML document

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

Hint: Type the tag that contains page metadata, not visible content

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

Hint: Type the tag that contains all visible page content

5. <!DOCTYPE html> <html> <head> <title>My Site</title> </head> <body> </body> </html>

Hint: Type the closing tag name for the element that holds visible content

Spot the Error

Question 1

A <DOCTYPE html>

B <html>

C <head></head>

D <body></body>

E </html>

Line A — The DOCTYPE declaration must start with an exclamation mark: <!DOCTYPE html>. Writing <DOCTYPE html> is missing the ! and is invalid.

Question 2

A <!DOCTYPE html>

B <html

C <head></head>

D <body></body>

E </html>

Line B — The <html> opening tag is missing its closing angle bracket >. It should be <html>, not <html without the >.

Question 3

A <!DOCTYPE html>

B <html>

C <body>

D <head></head>

E </html>

Line C — The <body> tag appears before <head>, but the correct skeleton order is <head> first, then <body>, both nested inside <html>.

Question 4

A <!DOCTYPE html>

B <html>

C <head>

D <h1>My Title</h1>

E </head>

F <body></body>

Line D — Visible content like <h1> belongs inside <body>, not <head>. The <head> section holds metadata such as <title>, not displayed content.

Question 5

A <!DOCTYPE html>

B <html>

C <head></head>

D <body></body>

E <html>

Line E — The closing html tag must be </html> with a forward slash. Writing <html> again opens a new element instead of closing the existing one.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?