Data about the page
The <head> holds metadata: data about the page. Nothing in it is drawn in the page area. It is read by the browser, by search engines and by apps that show link previews. What readers see goes in <body>.
For the browser
A file arrives as bytes, numbers from 0 to 255. In UTF-8, é is two bytes, C3 A9. With no charset line a browser may guess an older code, windows-1252, and draw é. <meta charset="utf-8"> settles it, within the first 1024 bytes.
Without this line, a phone may lay the page out on a pretend screen about 980 pixels wide, then shrink it to fit: tiny text. width=device-width says: use the phone's own width. The text wraps and stays readable.
<title> is the page's name, and every page needs exactly one. Its text is not drawn on the page. The browser shows it on the tab, and uses it for bookmarks and in your history.
For search engines
Search engines read the head too. Google often builds the blue headline of a result from the <title>, so give every page its own short, specific title. Search engines may also pick other text from the page.
<meta name="description"> is a short summary of the page. A search engine may show it as the snippet under the headline. It can also write its own snippet from the page text instead.
For link previews
Paste a link into a chat app and it fetches the page and reads its Open Graph tags, written <meta property="og:…">. og:title is the headline of the preview card. Open Graph comes from Facebook, not from the HTML standard.
og:image gives the address of the picture on the card; the app downloads it separately. Open Graph addresses start with http:// or https://, so write the full address, not just cup.jpg.
Look back at the page area: the head drew nothing there. It fixed the letters, fitted the phone, named the tab and filled a search result and a share card. Everything readers see belongs in <body>.
What happens
;; step 1/9 · head file cold-brew.html <!DOCTYPE html> <html lang="en"> <head> … 10 lines of metadata … </head> (the card) <body> … what is drawn on the page … </body> readers browser · search engines · link-preview apps
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>. Search engines decide for themselves what to show. A good title and description make it likely, not certain, that they are used.