Back in “Getting Ready,” we learned that <head> is the place to write behind-the-scenes information—which doesn’t show on screen. This time we’ll get its contents in order. Though invisible, it’s a very important section that prevents garbled text, makes things look nice on phones, and tidies up search results and the tab.
charset prevents garbled text
This is the first thing you’ll want to place. It’s the single most important line for preventing text from turning into □□□ or 譁�怜喧.
<meta charset="UTF-8">It tells the browser, “this document is written in a character type called UTF-8.” Without it (or with it wrong), the browser can misread the character type and text can garble into a string of symbols. Just make a habit of placing it at the very top of <head>—since the browser reads from the top, it’s safest to convey the character type first.
viewport for phones
Without this, text becomes tiny when opened on a phone. That’s because a phone treats a page with no viewport setting as “an old page built for a PC,” and tries to display it by cramming the wide screen down to fit. Here’s the single line that makes it display at the phone’s screen width.
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width means “match the page width to the device’s screen width,” and initial-scale=1 means “don’t zoom in or out, just show it as is.” The content is a little long, but copy-pasting the whole thing is fine. You don’t need to memorize the meaning.
title and description, shown on the tab and in search results
<title> is the heading shown on the tab and in search results, and meta description is the description shown below it.
<title>Shima's Homepage</title>
<meta name="description" content="Shima's very first self-introduction homepage.">description doesn’t directly raise your search ranking, but it’s like a shop sign that tells people in the search results “what’s written on this page.” Keeping it to a sentence that gets the page’s content across in a few words makes it easier to be found.
favicon, the little icon on the tab
That little icon shown on the browser tab. That’s called a favicon. Place your prepared image in the public folder and point to it from head like this.
<link rel="icon" href="/favicon.png"><link> is the tag that “connects an external file to head.” You just pass rel="icon" (use it as an icon) and href (the image’s location). That alone lines up your favorite picture on the tab.
A quick reference for what goes in head
Wrapping up what we’ve covered, the inside of head ends up with this lineup.
| What to write | Role |
|---|---|
<meta charset> | Prevents garbled text |
<meta viewport> | Gets phone display in order |
<title> | The heading on the tab and in search results |
<meta description> | The description in search results |
<link rel="icon"> | The icon on the tab (favicon) |
<link rel="stylesheet"> | Connects the look with CSS (in the CSS course) |
Lined up for real, it looks like this.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shima's Homepage</title>
<meta name="description" content="Shima's very first self-introduction homepage.">
<link rel="icon" href="/favicon.png">
</head>Summary of this lesson
<head>is the “page settings section” that doesn’t show on screen- Put in
charset,viewport,title,description, andfavicon - Cryptic-looking values are fine to copy-paste—just grasp the big picture of the quick reference