Put things where they belong – HTML Practice Problem

This page has its elements in the wrong places.

What to build

The same page, with each element in the correct half.

Requirements

The title and the meta line are inside head.
The h1 and the p are inside body.
The title still says Shop.

Constraints

Keep the text of every element as it is, and keep the doctype first.

Example

The head should contain only information about the page.

Why it works

When a visible element appears in the head, the browser ends the head at once, which can leave later head elements in the wrong place.

Hints

Hint 1

Ask of each line whether a visitor should see it on the page.

Hint 2

title and meta belong in the head. Headings and paragraphs belong in the body.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Shop</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Open every day.</p>
  </body>
</html>

Lesson: The skeleton of every page →