The Head: charset, viewport, title
Three lines of invisible setup that decide whether your text renders, your page fits a phone, and your tab and search result read well.
What it is
The <head> is where a page keeps its setup: information for the browser, search engines, and social apps, none of which is drawn on the screen. Most of it is optional, but three lines belong on nearly every page you build.
Those three are <meta charset="utf-8">, <meta name="viewport">, and <title>. Each one is invisible, and each one quietly controls something the visitor definitely notices: whether the text is readable, whether the page fits their phone, and what the browser tab and search result say.
Why it matters
These lines are easy to skip because nothing on the page looks broken without them on your own laptop. The damage shows up elsewhere: garbled characters for some readers, a tiny zoomed-out layout on phones, a tab that just says the file name.
Setting them is a thirty-second habit that prevents three of the most common embarrassing bugs in a beginner's first real site. Get them in from the start and you never think about them again.
How it works
<meta charset="utf-8"> declares the character encoding. UTF-8 can represent almost every character in every human language plus emoji, so your text renders correctly whether it is English, accented French, or Japanese. Put it near the top of the head so the browser knows the encoding before it reads much text.
<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to make the layout match the device width and start at 100% zoom. Without it, phones render your page in a pretend window about 980px wide and shrink it to fit, so everything looks tiny and your responsive styles never trigger.
<title> sets the document title. It is the text in the browser tab, the default name when someone bookmarks the page, and the headline of your entry in search results. It is metadata, so it is not the same as the on-page <h1> heading; give every page its own clear title.
What the machine sees
These three lines never appear on the page, but a browser, a phone, and a search engine each read one. Watch what each one produces on the right.
My Page
https://example.com
The clear, unique title becomes the clickable headline in search results.
without it: Héllo, café, ©2026
Three invisible lines, three things a real visitor notices.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- The head holds invisible setup for browsers, search engines, and social apps, never page content.
<meta charset="utf-8">lets every language and emoji render; without it text can turn to garbled symbols.<meta name="viewport" content="width=device-width, initial-scale=1">makes the page fit phones and lets responsive CSS work.<title>is your tab label, bookmark name, and search-result headline; give every page its own.
Done with this concept?
Mark it complete to track your progress. No login needed.