Module 7: Head and Metadata · Lesson 1 of 5
HTML Title Tag and Meta Charset UTF-8 Explained
All lessons in Module 7
Goal: Declare the character encoding and write a specific title for every page.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
The <head> is the backstage of your page. Nothing in it shows up on screen, yet browsers, search engines and phones all read it. Two elements belong in every head.
<meta charset="utf-8"> tells the browser which character encoding the file uses. UTF-8 (opens in a new tab) covers almost every language, emoji included. Leave it out and an accented letter can come out as odd symbols. It goes first in the head, so the browser knows how to read everything after it.
<title> is the page's name. You see it in the browser tab, in bookmarks and as the clickable headline in search results. Be specific. Moonlight Bakery - Fresh Bread Daily tells people far more than Home.
The short version
<meta charset="utf-8">goes first in the head so every character after it is decoded correctly.- A page has exactly one
<title>, and it shows in the browser tab, bookmarks and search results. - Write titles that are specific and unique: the page topic first, the site or brand name last.
- Head elements never show on the page. Check them in the tab or with View Source.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cafe Lumiere - Breakfast in Paris</title>
</head>
<body>
<h1>Café Lumière</h1>
<p>Crème brûlée, croissants and fresh coffee.</p>
</body>
</html>Your task
Moonlight Bakery's browser tab is blank and its head is empty. Time to fix that.
- Inside
<head>, add<meta charset="utf-8">as the very first line. - Below it, add a
<title>that names the bakery and says what it offers, for example Moonlight Bakery - Fresh Bread Daily (at least 25 characters).
Don't expect the preview to change, because head elements are invisible. Press Check to confirm your work.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<head>
<meta charset="utf-8">
<title>Home</title>
</head>Right
<head>
<meta charset="utf-8">
<title>Moonlight Bakery - Fresh Bread Daily</title>
</head>In a row of tabs or a page of search results "Home" tells nobody anything, so name the page and what it offers.
Wrong
<title><strong>Moonlight</strong> Bakery</title>Right
<title>Moonlight Bakery - Fresh Bread Daily</title>The title holds plain text only, and any tags you put inside it appear as literal characters in the tab.
Go deeper
Screen readers announce the title when a page loads and again when the user switches tabs. That is why WCAG 2.2 makes a descriptive page title a Level A requirement (success criterion 2.4.2, Page Titled (opens in a new tab)). Search engines use the title as the main source for the clickable headline, but Google may rewrite titles that are vague, stuffed with keywords or copied across many pages. Give each page its own plain, specific title and Google will usually keep the one you wrote.
A common pattern is Specific Topic - Site Name. Use a plain separator, a hyphen or a vertical bar, and don't repeat the same keyword.
As for the charset, the HTML standard expects every new document to use UTF-8, so pick nothing else. The meta tag only declares the encoding. It converts nothing, and your editor has to save the file as UTF-8 as well. If accented letters still look broken, check the editor's encoding setting before you blame the HTML, or run the text through Text-HTML, a cleaner that converts characters and toggles encoding (opens in a new tab).
Frequently asked questions
Where does the meta charset tag go in HTML?
First inside <head>, before anything else. The HTML standard wants the encoding declaration within the first 1024 bytes of the file, because the browser picks a decoding before it has read much text. Make <meta charset="utf-8"> the opening line of the head and you always meet that rule, and even the title is decoded correctly. The lesson on head and body covers what else lives up there.
How long should an HTML title tag be?
About 50-60 characters. Search engines cut longer titles by display width and add an ellipsis, and a browser tab shows even less. Google describes how it builds these headlines in its guide to title links (opens in a new tab). Lead with the words that count most, usually the page topic, and put the brand name at the end. Give every page on a site its own title so people can tell the pages apart in tabs, history and search results.
What is the difference between the title tag and h1?
<title> sits in the head and names the page from the outside: tabs, bookmarks, search results. <h1> sits in the body and is the visible main heading on the page. The two often say much the same, though the title tends to add the site name. A page might use the title Croissants - Moonlight Bakery and the heading Croissants. The h1 reference covers heading rules.
