The complete document structure

What you will build

Add language, viewport, and description metadata to create a reusable document skeleton.

Understand the idea first

A page that renders can still have a weak structure. The document skeleton affects pronunciation, mobile layout, search snippets, and parsing.

Build it step by step

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Alex's frontend progress and practice projects."
    />
    <title>Learning page | Alex</title>
  </head>
  <body>
    <h1>My frontend learning page</h1>
  </body>
</html>

Compare the example with your file line by line and add only what is missing.
Look at the browser tab: title appears there, not in the page body.
Narrow the browser to phone width and keep the viewport line for later CSS work.
View page source and verify that it matches the saved file.

Read the important lines

The lang value helps screen readers and translation tools.
An early charset lets the browser decode UTF-8 correctly.
The description summarizes the page; it is not a list of keywords.

Common mistakes and what to check

Symptom	What to check
Putting title in body	Tab metadata belongs in `head`; use `h1` for the visible heading.
Writing two body elements	A document has one `head` and one `body`.
Wrong language value	Use the language that covers most of the page.

Practice without copying

Write a 40–80 character description that says whose page this is and what it contains.

Check the answer after you try

Example: <meta name="description" content="Alex records HTML progress, study notes, and a final project.">

Completion check

My page contains the required new content
I can explain the key tags or attributes without the answer
I deliberately created and fixed at least one error