Open code, practice, and notes →
Download source with English comments · for reading
HTML · 01 Meaning and Document Structure
Series contents · Technology map
Stage: Document Meaning and Content · Editable example · Storage ID: html-01
Goals and learning outcomes
- The accessibility tree distinguishes the main region from the navigation region.
- Explain the heading levels and navigation/action elements in 3 regions.
Prerequisites
Browsers and file paths
Key concepts and explanations
Heading Hierarchy
Headings express relationships between titles in a text. Choosing levels to change font size obscures the structure.
Region Semantics
header·nav·main·article identify roles within a document. Use links for navigation and buttons for actions.
Practice setup
Frontory’s existing preview is a limited starting example, not a completed version of the whole assignment. Implement additional files and features yourself in a separate local project. Prepare HTML and any necessary image/media files in a separate folder and open them through a local HTTP server. Check with the Elements and accessibility panels and actual keyboard operation.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- In index.html, prepare 1 page title and 3 topic regions.
- Divide a learning page into meaningful regions and distinguish link navigation from button actions.
- Run with 1 page title and 3 topic regions. Results to check: The accessibility tree distinguishes the main region from the navigation region. Explain the heading levels and navigation/action elements in 3 regions. Record expected and actual results separately.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Heading Level | h2 under h1 | h4 under h1 | Pre-run hypothesis: Heading relationships will appear irregular in the accessibility tree. Keep other conditions fixed and record the actual result separately after running. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- The accessibility tree distinguishes the main region from the navigation region.
- Explain the heading levels and navigation/action elements in 3 regions.
Self-check
- Where should you change font size?
- How do you distinguish independent content from a general grouping?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.