Meta tags (charset and viewport)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Where must <meta> tags be placed in an HTML document?
2. True or false: <meta> is a self-closing tag - it does not need a </meta> closing tag.
3. Which meta tag sets the character encoding to Unicode?
4. What does the viewport meta tag control?
5. True or false: a page can have both a charset meta tag and a viewport meta tag.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<meta charset="UTF-8"> | A<meta> is inside <body> - it must be inside <head> instead | |
| 2<meta name="viewport" content="width=device-width, initial-scale=1.0"> | BMakes the page scale correctly on mobile devices by matching the device screen width | |
| 3<meta> is a self-closing element - no closing </meta> tag is needed | C<meta> is self-closing - adding a </meta> closing tag is invalid | |
| 4<meta> tags must be placed inside <head>, not <body> | D<meta charset="UTF-8"> | |
| 5<meta charset="UTF-8"></meta> | ETells the browser to use Unicode encoding - supports characters from almost all languages | |
| 6<body> <meta charset="UTF-8"> </body> | F<head> <meta charset="UTF-8"> </head> |
C
Definitions
<meta>
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<head>
<___ charset="UTF-8">
</head>
2.
<head>
<meta ___="UTF-8">
</head>
3.
<head>
<meta charset="___">
</head>
4.
<head>
<meta name="___" content="width=device-width, initial-scale=1.0">
</head>
5.
<head>
<meta ___="viewport" content="width=device-width">
</head>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
</meta charset="UTF-8">
B
<title>My Page</title>
C
</head>
Question 2
A
<head>
B
<meta carset="UTF-8">
C
<title>My Site</title>
D
</head>
Question 3
A
<head>
B
<meta charset="UTF-8">
C
<meta name="viewport" content="width=device-width">
D
</meta>
Question 4
A
<!DOCTYPE html>
B
<html>
C
<head>
D
<body>
E
<meta charset="UTF-8">
F
</body>
Question 5
A
<head>
B
<meta charset="UTF-8">
C
<meta name="viewprt" content="width=device-width">
D
<title>Page</title>
E
</head>
Answer Key
Meta tags (charset and viewport)
Section A: Quick Questions
Q1
A — Inside <head>
Q2
B — True
Q3
A — <meta charset="UTF-8">
Q4
B — How the page scales on mobile devices
Q5
A — True
Section B: Match the Pairs
Q1
<meta charset="UTF-8"> → Tells the browser to use Unicode encoding - supports characters from almost all languages
Q2
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the page scale correctly on mobile devices by matching the device screen width
Q3
<meta> is a self-closing element - no closing </meta> tag is needed → <meta charset="UTF-8">
Q4
<meta> tags must be placed inside <head>, not <body> → <head>
<meta charset="UTF-8">
</head>
Q5
<meta charset="UTF-8"></meta> → <meta> is self-closing - adding a </meta> closing tag is invalid
Q6
<body>
<meta charset="UTF-8">
</body> → <meta> is inside <body> - it must be inside <head> instead
Section C: Definitions
Q1
<meta> — A self-closing HTML element placed in <head> that provides metadata about the page, such as character encoding or viewport settings.Section D: Fill in the Blanks
Q1
<head>
<meta charset="UTF-8">
</head>Q2
<head>
<meta charset="UTF-8">
</head>Q3
<head>
<meta charset="UTF-8">
</head>Q4
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Q5
<head>
<meta name="viewport" content="width=device-width">
</head>Section E: Spot the Error
Q1
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">.
Q2
B — "carset" is a misspelling. The correct attribute name is charset, which tells the browser to use Unicode character encoding.
Q3
D — <meta> is a self-closing element - it does not have a separate closing </meta> tag. Remove the </meta> line entirely.
Q4
E — <meta> tags must be placed inside <head>, not inside <body>. Move the charset meta tag into the <head> section.
Q5
C — "viewprt" is a misspelling of viewport. The correct value is name="viewport" for the meta tag that controls mobile scaling.