Your first document
The head of the document
Add a useful title, character encoding, and viewport metadata to the part of the document browsers read before showing the page.
The head contains information about the document. Most of it does not appear inside the page.
Start with these three elements:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>charset="utf-8" tells the browser how the document’s characters are encoded. UTF-8 supports the characters you will normally need, including emoji. Put this declaration near the start of head.
The viewport meta element tells mobile browsers to use the device width as the page width. Without it, a responsive page can look like a wide desktop page squeezed onto a small screen.
The title gives the document a name. Browsers show it in the tab. Search engines often use it as the linked title in search results. Bookmark tools use it too.
The title should describe the specific page. “About Acme” is more useful than “Page.”
You can also load CSS and JavaScript from the head. We will cover those in their own courses. For now, build a solid minimum head and keep moving.
A page description belongs here too:
<meta name="description" content="Projects, notes, and useful links from Sam.">Search engines may show that text in results. Keep it accurate and specific to this page.
If characters look wrong on screen (accents turned into question marks, for example), check that charset="utf-8" is present and that your editor saved the file as UTF-8.
Stylesheets also load from the head:
<link rel="stylesheet" href="/styles/main.css">We cover CSS in its own course. For HTML, remember that the head is where the document describes itself before the body shows content.
Favicon links also live in the head (link rel="icon"). They are optional for your practice page, but real sites almost always include one.
Quick check
Result
You got of right.
Lesson completed