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.

7 minute lesson

~~~

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.

Quick check

Result

You got of right.

Lesson completed