Essential storage keeps sign-in and learning features working. Google Analytics measures visits; Microsoft Clarity records interactions to help us improve usability. Both are optional and stay off until you choose. Read our privacy policy.
Build a complete HTML document coding exercise | SovranCode
Study the question, then follow the complete answer and its reasoning.
01 · QUESTION
What should the HTML contain?
Complete the document foundation for a beginner-friendly recipe page. Give the browser, search engines, and assistive technology the metadata they need, then add one visible page heading.
Requirements
Declare the HTML doctype
Set the document language to English
Add UTF-8 charset and mobile viewport metadata
Add a page description and the title Easy Lentil Soup — Community Kitchen
Place an h1 in the body
Key idea
The root element carries the language. Character encoding, viewport, description, and title belong in head; the h1 belongs in body.
The doctype selects standards mode, while lang identifies the document's primary language. The head contains machine-readable metadata; the body contains what the visitor reads. A specific title remains meaningful in tabs, bookmarks, and search results.
Concepts demonstrated
Create a standards-mode document
Separate metadata from visible content
Write a useful page title and description
Why this pattern matters
Every HTML page depends on this document frame. Browsers can repair missing markup, but repaired output is not a substitute for an intentional language declaration, useful title, mobile viewport, and accurate description. Starting with a dependable foundation makes later accessibility, search, sharing, and responsive work more predictable.
Solution walkthrough
The doctype appears before the root element so the browser uses modern standards mode.
The lang attribute describes the primary language inherited by the document's text.
The head groups encoding, viewport, search description, and browser-tab title metadata.
The body contains the visible recipe heading and stays separate from document metadata.
Common mistakes to avoid
Putting the visible h1 inside head
Using one generic title across every page
Omitting lang because the text looks correct visually
EXERCISE FAQ
Before you move on.
What does “Build a complete HTML document” teach?
This beginner HTML exercise focuses on Create a standards-mode document, Separate metadata from visible content, Write a useful page title and description. Its requirements define the exact behavior to implement before you write code.
How should I validate this HTML solution?
Start with the displayed example input and expected output, then test a boundary case suggested by the requirements. Edit the HTML, inspect the live preview, then run the checks before comparing your structure with the complete answer.
When should I open the reference solution?
Attempt Build a complete HTML document first. Then open the read-only solution file to compare the contract, edge-case handling, and implementation choices—not simply to copy the final code.
