← 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, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 11

Understanding The title element in HTML & CSS

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 class and your students practise it interactively.

🖨 Print worksheet + answer key Add The title element to a class →

This module's key terms are also in a printable crossword (Modules 1–12) and word search (Modules 1–23).

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
<body> <title>Home</title> </body>
↓
<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.

The 'Leopard' badge — Savannah Perfectionist, one of Cloodit's 106 collectible badges
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.

Add to class →

Quick Questions

1. Where must the <title> element be placed?
A. Inside <body>
B. Inside <head> ✓
<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. True
B. False ✓
<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.

Student with a class code? Join your class →