← HTML & CSS

The title element

An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.

Part of: HTML and CSS Journey — Module 5

What it does: The <title> element belongs in the <head> section. Placing it in <body> is invalid. The title content is plain text only. This example correctly uses text with no nested elements. The <title> content shows in the browser tab and bookmarks, not on the visible page. A page should have exactly one <title>. Having two is invalid HTML. Closing tags use a forward slash before the name: </title>. The self-closing form is not valid here.

Common mistakes: The <title> element must be inside a <head> element. Here <head> is missing - <title> cannot appear outside it. <titel> is a misspelling. The correct element name is <title> - browsers will not recognise <titel> as the page title.

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 title element (PDF)

Take this worksheet further — free with Cloodit

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

Learning

Duo

Where must the <title> element be placed?

Inside <head>Inside <body>

Matches

↓

<title> is inside <body> - it must be inside <head> instead

Applying

Meanings

Term

<title>

Meaning

An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.

Practice

<!DOCTYPE html>

Testing

Gaps

<>My Page</title>

Check Answer

Spots

1<title>My Site</title>

2 <meta charset="UTF-8">

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. Where must the <title> element be placed?

A. Inside <head> ✓

B. Inside <body>

<title> belongs in <head>. It sets the browser tab text and is not a visible element on the page.

2. Where does the title text appear?

A. In the browser tab ✓

B. As a heading on the page

The <title> content shows in the browser tab and bookmarks, not on the visible page.

3. True or false: a page can have two <title> elements.

A. False ✓

B. True

A page should have exactly one <title>. Having two is invalid HTML.

4. Which of these correctly places a title in the document?

A. <head><title>My Page</title></head> ✓

B. <body><title>My Page</title></body>

<title> must be a child of <head>, not <body>.

5. True or false: you can put HTML tags like <b> inside a <title> element.

A. False ✓

B. True

<title> must contain plain text only. Nested HTML elements inside <title> are not valid.

Match the Pairs

<title>My Portfolio</title> → Sets the text shown in the browser tab to 'My Portfolio'

<head> <title>Shop</title> </head> → <title> is correctly placed inside <head> where it sets the browser tab text

<title> must be placed inside <head>, not <body> → <head><title>About Us</title></head>

<title> contains plain text only - no nested HTML tags allowed inside it → <title>Welcome to My Blog</title>

<body> <title>Home</title> </body> → <title> is inside <body> - it must be inside <head> instead

<title>My <b>Page</b></title> → <title> must contain plain text only - HTML tags like <b> inside <title> are not valid

Key Term

<title>

An HTML element placed inside <head> that sets the text shown in the browser tab. Its content is not displayed on the page.

Fill in the Blanks

1. <head> <title>My Page</title> </head>

Hint: Type the element name that sets the browser tab text

2. <head> <title>Home</title> </head>

Hint: Type the closing tag name that ends the title element

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

Hint: Type the section tag that must contain the title element

4. <head> <title>Portfolio</title> </head>

Hint: Type the tag name needed to close the title element

5. <!DOCTYPE html> <html> <head> <title>Blog</title> </head> <body></body> </html>

Hint: Type the element name that sets the browser tab text inside head

Spot the Error

Question 1

A <title>My Site</title>

B <meta charset="UTF-8">

C </head>

Line A — The <title> element must be inside a <head> element. Here <head> is missing - <title> cannot appear outside it.

Question 2

A <head>

B <titel>My Page</titel>

C <meta charset="UTF-8">

D </head>

Line B — <titel> is a misspelling. The correct element name is <title> - browsers will not recognise <titel> as the page title.

Question 3

A <head>

B <meta charset="UTF-8">

C <title>My Blog<title>

D </head>

Line C — The title element is closed with <title> instead of </title>. A closing tag must have a forward slash: </title>.

Question 4

A <!DOCTYPE html>

B <html>

C <head></head>

D <body>

E <title>Store</title>

F </body>

Line E — <title> must be inside <head>, not inside <body>. Content in <body> is visible on the page; <title> sets the browser tab text.

Question 5

A <head>

B <meta charset="UTF-8">

C <title>News</title>

D <title>Latest</title>

E </head>

Line D — A page should have exactly one <title> element. Having two <title> tags is invalid - only one title can be shown in the browser tab.

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?