html · level 3 · unit 3 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
makes every character arrive safely.
The head holds : facts about the page rather than things to show. Many of those facts go in <meta>, an empty element that lives only in the head.
A page is saved as numbers. The is the rule book for turning those numbers back into each character: letters, digits, symbols and emoji. Read with the wrong rule book, café can turn into café.
UTF-8 covers every language on Earth. Say so with <meta charset="utf-8">, and put it first in the head, before the title, so the browser knows the rule book before it reads a single word.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Café Olé</title>
</head>
<body>
<h1>Café Olé</h1>
<p>Crème brûlée, £4.50</p>
</body>
</html>Press show my page to see it here.
Browsers only look for the charset near the very top of the file, so first in the head is the safe place.
guess first
What will the heading say?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le menu</title>
</head>
<body>
<h1>Crème brûlée</h1>
</body>
</html>your turn
Your turn. Set the character encoding.
Fill the blank on line 4 so the browser reads this French page, accents and all, with UTF-8.
Press show my page to see it here.
- the character encoding is UTF-8not checked yet
- the title comes after the charsetnot checked yet
fix it
The charset comes too late. Can you fix it?
Press show my page to see it here.
- the charset is first in the headnot checked yet
- the title still names the bakerynot checked yet
- The browser needs the rule book before it reads any words. Which line in the head has words in it?
- The title comes before the charset here. The charset should be first in the head.
- Swap lines 4 and 5, so
<meta charset="utf-8">comes first.
nailed it
every character arrives safely. :D
<meta>holds metadata in the head.<meta charset="utf-8">sets the character encoding.- Put the charset first, before the title.
new words in your collection
- metadata
- character encoding
- UTF-8
This lesson isn’t saved. A free account remembers every lesson you finish.