Document structure

The mandatory skeleton: doctype, html, head and body.

Beginner 10 min read Lesson 2 of 480 Challenge included

What you will be able to do

Use the HTML5 doctype
Separate metadata from content
Set the page language

Every professional page starts with the same five-line skeleton. Browsers are forgiving, but being explicit prevents subtle bugs later.

skeleton.htmlHTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A short, useful summary for search engines.">
    <title>Page title — Site name</title>
  </head>
          <body>
    <!-- visible content -->
  </body>
</html>

Part	Purpose
`<!doctype html>`	Tells the browser to render in standards mode.
`<html lang="en">`	Root element. The lang attribute helps screen readers and search.
`<head>`	Metadata: encoding, viewport, title, description, styles.
`<body>`	Everything the visitor sees and interacts with.

Your turn

Add your metadata

Easy

Add a charset, a viewport meta tag and a descriptive <title> to the skeleton.

HTML · starter

<head>
  <!-- metadata goes here -->
</head>

Check your understanding before moving on.

Knowledge checkQuestion 1

Where does the page title shown in a browser tab come from?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Text and headings

Lesson 2 of 480 · 0% of course