Lesson 12 · How browsers use HTML

The head: metadata, SEO and sharing

Everything between <head> and </head> is metadata: data about the page that is never drawn in the page itself. Follow a real twelve-line head as each line reaches the reader that uses it: the browser decodes the letters and fits a phone screen, the tab gets its name, a search engine builds a result, and a chat app builds a link preview card.

10 min9 steps5 questionsBeginner

Fig 12 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Where does the text of <title>Café cold brew</title> appear?

The title is metadata, so it is not drawn in the page area. The browser shows it on the tab and uses it for bookmarks and history; search engines often use it as the result's headline.

02A page shows CafÃ© instead of Café. What is the most likely fix?

é is stored as the two UTF-8 bytes C3 A9. A browser that guesses windows-1252 shows those bytes as Ã and ©. Declaring the encoding, within the first 1024 bytes, fixes it.

03What does <meta name="viewport" content="width=device-width"> change?

Without it, phones may lay the page out about 980 CSS pixels wide and shrink the result. With it, the layout width is the phone's own width.

04You set a meta description, but the search result shows different text. Why?

A search engine decides what to show. It may use your description as the snippet, or pick text from the page that matches the search better.

05Which line gives a chat app's link preview its picture?

Link previews read Open Graph tags. og:image holds the picture's address, written in full with https://, because the app downloads the picture on its own.

Key terms

Glossary

Metadata: Data about the page rather than content on it, such as its title, its character encoding or a summary. It lives in the <head>.
<head>: The part of an HTML document that holds metadata. Nothing in it is drawn in the page area; the visible content goes in <body>.
Character encoding: The code that turns bytes into letters. UTF-8 is the one HTML uses; <meta charset="utf-8"> declares it.
Viewport: The area a browser lays a page out in. On phones the viewport meta tag sets its width, usually to the device's own width.
Meta description: <meta name="description" content="…">: a short summary that search engines may show under a result's headline.
Snippet: The short text under the headline of a search result. It may come from the meta description or from the page.
Open Graph: A protocol started by Facebook: <meta property="og:…"> tags that apps read to build link previews.

Fine print

Notes and sources

The card shows only the head. A full file starts with <!DOCTYPE html> and <html lang="en">, and the <body> with the page's heading comes after </head>.
Browsers also look for a byte order mark and for the charset in the HTTP header the server sends, before falling back to a guess. The tag is still the simple, reliable way.
The 980 here are CSS pixels, the unit web pages are laid out in; a phone may have more device pixels than that. Most pages write content="width=device-width, initial-scale=1".
Search engines decide for themselves what to show. A good title and description make it likely, not certain, that they are used.
The Open Graph protocol lists four required properties: og:title, og:type, og:image and og:url. The example shows two to keep the card short.

Quiz Unlocks after the last step.