The title and meta Tags
You search for a recipe and see a list of results: a blue line of text and a short grey summary under each. Both of those usually come from a page's head. So does whether the page's accented letters show correctly and whether it fits your phone screen. A handful of tags do all of that.
The rule
Encoding first, viewport next, then title and description.
These four lines belong in almost every page's head:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Masala Chai at Home | Kettle & Leaf</title>
<meta name="description" content="A simple masala chai recipe with fresh ginger and whole spices, ready in ten minutes.">
</head><meta charset="utf-8">tells the browser how to turn the file's bytes into characters. UTF-8 covers practically every writing system and emoji. Put it first, because the browser needs to know the encoding before reading much text. Without it you may see garbage likeéinstead ofé.- The viewport meta tag tells phones to lay the page out at the device's real width. Without it, mobile browsers pretend to be a wide desktop screen and shrink everything, so text becomes tiny.
<title>names the page. It appears in the browser tab, in bookmarks and history, and usually as the clickable line in search results. Make it specific: "Masala Chai at Home" beats "Home". Every page on a site should have its own title.- The description meta tag is a one or two sentence summary. Search engines often use it as the grey text under the title, so write it for a human deciding whether to click.
Notice the pattern: meta is a void element, and most meta tags pair a name with a content.
The shortcut
Build the head top down, from machine to human: first what the browser needs to read the file (encoding), then what the device needs (viewport), then what people see (title and description).
Machine: encoding
<meta charset="utf-8">goes first so every character is decoded correctly.
The trap is a vague title, such as "Untitled" or "Page". It hurts bookmarks, tabs and search results all at once.
Drills
Answer fast — trust the rule.
Accented letters on your page show as strange symbols like é. What is most likely missing?
On phones your page appears tiny and zoomed out. Which tag fixes that?
Where does the text inside <title> appear?
Which title is best for a page listing a bakery's opening hours?
Remember
- Head essentials: charset, viewport, a specific title, a description.
- Shortcut: machine, then device, then human.
- Trap: vague titles and a missing charset or viewport; the page still loads, but badly.