← HTML & CSS

Meta tags (charset and viewport)

A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.

Part of: HTML and CSS Journey — Module 6

Understanding Meta tags (charset and viewport) in HTML & CSS

What it does: <meta> tags do not have a separate closing tag. The tag ends after the attribute and the closing angle bracket >. <meta> provides metadata about the page and belongs in <head> alongside <title> and stylesheet links. <meta> is self-closing. Writing </meta> is invalid - just write the opening tag with its attributes. Character encoding is set with the charset attribute directly: <meta charset="UTF-8">. The viewport meta tag with width=device-width and initial-scale=1.0 ensures the page displays correctly on mobile screens. HTML tag names must be lowercase. The correct form is <meta charset="UTF-8"> in lowercase.

Common mistakes: <meta> is a self-closing tag - it must not have a closing slash before the tag name. The correct form is <meta charset="UTF-8">, not </meta charset="UTF-8">. "carset" is a misspelling. The correct attribute name is charset, which tells the browser to use Unicode character encoding.

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 Meta tags (charset and viewport) 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 <meta> tags be placed in an HTML document?

Inside <head>Inside <body>

Matches

↓

Applying

Meanings

Term

<meta>

Meaning

A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.

Practice

<!DOCTYPE html>

Testing

Gaps

< charset="UTF-8">

Check Answer

Spots

1</meta charset="UTF-8">

2 <title>My Page</title>

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.

Add to class →

Quick Questions

1. Where must <meta> tags be placed in an HTML document?

A. Inside <head> ✓

B. Inside <body>

2. True or false: <meta> is a self-closing tag - it does not need a </meta> closing tag.

A. False

B. True ✓

3. Which meta tag sets the character encoding to Unicode?

A. <meta charset="UTF-8"> ✓

B. <meta name="charset" content="UTF-8">

Character encoding is set with the charset attribute directly: <meta charset="UTF-8">.

4. What does the viewport meta tag control?

A. The background colour of the page

B. How the page scales on mobile devices ✓

The viewport meta tag with width=device-width and initial-scale=1.0 ensures the page displays correctly on mobile screens.

5. True or false: a page can have both a charset meta tag and a viewport meta tag.

A. True ✓

B. False

Multiple <meta> tags can appear in the same <head> - it is common to have both charset and viewport meta tags.

Match the Pairs

<body> <meta charset="UTF-8"> </body> → <meta> is inside <body> - it must be inside <head> instead

Key Term

<meta>

A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.

Fill in the Blanks

1. <head> <meta charset="UTF-8"> </head>

Hint: Type the self-closing element name used for page metadata

2. <head> <meta charset="UTF-8"> </head>

Hint: Type the attribute name that sets the character encoding

3. <head> <meta charset="UTF-8"> </head>

Hint: Type the Unicode character encoding value

4. <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

Hint: Type the meta name value that controls mobile scaling

5. <head> <meta name="viewport" content="width=device-width"> </head>

Hint: Type the attribute used to identify the type of meta information

Spot the Error

Question 1

A </meta charset="UTF-8">

B <title>My Page</title>

C </head>

Line A — <meta> is a self-closing tag - it must not have a closing slash before the tag name. The correct form is <meta charset="UTF-8">, not </meta charset="UTF-8">.

Question 2

A <head>

B <meta carset="UTF-8">

C <title>My Site</title>

D </head>

Line B — "carset" is a misspelling. The correct attribute name is charset, which tells the browser to use Unicode character encoding.

Question 3

A <head>

B <meta charset="UTF-8">

C <meta name="viewport" content="width=device-width">

D </meta>

Line D — <meta> is a self-closing element - it does not have a separate closing </meta> tag. Remove the </meta> line entirely.

Question 4

A <!DOCTYPE html>

B <html>

C <head>

D <body>

E <meta charset="UTF-8">

F </body>

Line E — <meta> tags must be placed inside <head>, not inside <body>. Move the charset meta tag into the <head> section.

Question 5

A <head>

B <meta charset="UTF-8">

C <meta name="viewprt" content="width=device-width">

D <title>Page</title>

E </head>

Line C — "viewprt" is a misspelling of viewport. The correct value is name="viewport" for the meta tag that controls mobile scaling.

Student with a class code? Join your class →