HTML 47 min

HTML Basic Document

Learn the essential structure shared by every HTML document.

Every HTML page uses a small document frame. The doctype selects modern standards mode, html is the root element, head describes the document, and body contains the page people read and operate. Learning this frame removes guesswork from every page you create later.

Understand the five essential parts

A reliable document declares modern HTML, identifies its language, sets a character encoding, configures the mobile viewport, and provides a unique page title. The visible content then belongs in body.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About Ada — Example Studio</title>
</head>
<body>
  <h1>About Ada</h1>
  <p>Frontend developer and accessibility advocate.</p>
</body>
</html>

Place the doctype on the first line.
Set lang to the language of the page.
Put charset near the start of head.
Write a concise, page-specific title.
Keep visible headings and paragraphs in body.

Document outline diagram with header, navigation, main content, article sections, aside, and footer — A clear document outline helps sighted readers, keyboard users, assistive technology, and search engines.

Add useful metadata deliberately

Metadata supports mobile layout, search previews, link sharing, and browser behavior. It should describe the real page, not repeat generic keywords. A description is useful for search snippets, while CSS links and icons connect external resources.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Times and preparation for our HTML workshop."> <title>Schedule — Neighborhood Workshop</title> </head> <body> <main> <h1>Workshop schedule</h1> <p>Welcome! <span lang="fr">Bienvenue !</span></p> <p>Bring a notebook and arrive at 10:00.</p> </main> </body> </html>

HTML Getting Started

HTML Core

Links, Media & Data

Page Structure

Quality & Reference

HTML Basic Document

Understand the five essential parts

Add useful metadata deliberately

Mistakes to avoid

Guided practice

Lesson recap

Understand it. Build it. Explain it.

What you should be able to do

Metadata is a contract with the browser

Give each page an identity

A multilingual schedule document

Code

Result

Why this example works

Visible content inside head

Review a two-page document contract

Your build plan

Review your result

Can you explain the decision?

Build a complete document shell

Code

Result

Compare head and body

Code

Result

Test what you learned

Test what you learned

Test what you learned

Check your understanding