The Head of the Page in JavaScript

A page has two parts. The body holds what a visitor sees. The head holds facts about the page, for the browser and for search engines: the title shown in the tab, and more. Nothing in the head shows inside the page.

Most of these facts are meta tags, which have no closing tag: name says what the fact is and content holds its value. For example, a bakery's page could say who wrote it:

<head>
  <title>Rosa Bakery</title>
  <meta name="author" content="Rosa">
</head>

Some head lines matter to every page. A meta with charset tells the browser how to read the letters of the file, like the dash in Mon–Fri; without it, the browser guesses. The viewport meta tells a phone to lay the page out at its own width; without it, a phone shows the page zoomed out, like a wide screen. The description meta is a sentence about the page for search results. A link with rel="stylesheet" brings in a CSS file, found at its href.

The check prints the screen, which stays the same, and then what the head of the page says. Yours must print:

> what the head of the page says
  title: Corner Shop
  language: en
  characters: utf-8
  viewport: width=device-width, initial-scale=1
  description: The Corner Shop: mugs, lamps, plants and more, a short walk from home.
  stylesheet: styles.css (the file is there)

Your task: the head already has the title, and lang="en" is on the html tag. Add the charset and viewport meta tags at the top of the head, then a description meta and a link to styles.css under the title.

Assignment
Follow the Coding Tutorial to fill in the head of index.html: the charset, the viewport, the description and the stylesheet.

Hint
meta and link have no closing tag. The stylesheet link needs both rel="stylesheet" and href="styles.css".