Lesson 1 of 12
Structured learning draftBuild a valid HTML document
HTML gives content structure and meaning. A reliable page begins with a complete document skeleton so browsers, search tools and assistive technologies receive the context they need. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Explain the browser-facing purpose of the document skeleton.
- Create a valid page with language, character encoding, viewport and title metadata.
- Inspect parsing and metadata with developer tools.
Build a valid HTML document
Build a valid HTML document: doctype to head to body.
Explain the browser-facing purpose of the document skeleton.
Create a valid page with language, character encoding, viewport and title metadata.
Inspect parsing and metadata with developer tools.
The doctype selects standards mode. The html element declares the document language. UTF-8 must appear early in head, the viewport declaration lets mobile browsers use the device width, and title supplies the tab and document name.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Amina's design portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Amina's design portfolio</h1>
</body>
</html>Verify the document
- Save the file as index.html and open it in a browser.
- Confirm the tab title and document language in developer tools.
- Run the file through the Nu HTML Checker.
- Resize to a narrow viewport and confirm the page uses the device width.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Omitting the language attribute.
- Putting visible content inside head.
- Using a filename or generic word such as Home for the title.
Practice activity
Apply the lesson
Create a standards-mode document for a one-page portfolio. Validate it and retain a screenshot of the validator result. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
Which combination gives a mobile browser and assistive technology essential document context?
Lesson summary
- A complete skeleton establishes parsing and document context.
- Metadata is functional, not decorative.
- Validation reveals errors browsers may silently repair.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note