Lesson · Beginner
HTML document structure
Understand how the root element, metadata, and visible document content form a predictable HTML page.
- Author
- Editorial team
- Reviewer
- Publication review pending
- Review tier
- annual
One document, two responsibilities
The head describes the page to browsers and other systems. The body contains
what a visitor reads and operates. Both live inside the root html element.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Community garden schedule</title>
</head>
<body>
<header>
<h1>Community garden schedule</h1>
</header>
<main>
<p>Saturday work sessions begin at 9 a.m.</p>
</main>
</body>
</html>Parsing order matters
Put the character encoding near the beginning of head so later bytes are
decoded correctly. Use one root element and keep visible elements out of
metadata.
Accessibility implication
The document language helps screen readers choose pronunciation rules. It also helps translation and indexing systems interpret the text.
Exercise
Inspect a page you use often. Identify its title, declared language, and first visible heading. These values may differ because they serve different contexts.