Understand the idea
Start with a real question Imagine opening a school notice on your phone. The date is buried in one enormous paragraph, the heading looks like ordinary text, and "read more" takes you nowhere. The information exists, but the page does not help you use it. Your first HTML page solves that problem before a single colour or animation is added.
Our small project is a study profile someone can actually navigate. A visitor should immediately know whose page it is, find the current study goals, and jump to a second section. As you work, ask a practical question: if all the styling disappeared, would the order and meaning still be clear? That is the kind of job HTML does.
You do not need to memorise a catalogue of tags today. You need a dependable mental picture: a document contains elements, elements describe meaning, and nesting describes which content belongs together. By the end, you should be able to explain your source to another student instead of only saying that the preview looks right.
Understand the idea
What HTML does HTML describes a document's content and structure. A browser reads that document and builds a page containing elements such as headings, paragraphs, links and lists. HTML is not the language that decides every colour or calculates an answer: CSS handles presentation and JavaScript adds programmable behaviour. Learning those jobs separately makes a page easier to understand and maintain.
An element normally has an opening tag, some content and a closing tag. In <p>Welcome</p>, p identifies a paragraph and Welcome is its text. The closing slash belongs before the tag name. Nesting means placing one element inside another. Close an inner element before closing the element that contains it.
See how it works
Example 1: a complete document HTML exampleRead the code, then try a change.
Try this example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My study page</title>
</head>
<body>
<h1>My study page</h1>
<p>I am learning to build accessible web pages.</p>
</body>
</html> Expected result: the preview displays a large heading followed by one paragraph. The title is document metadata, not another paragraph in the page. In a normal browser tab it supplies the tab title; an embedded practice preview does not need to replace the surrounding website's tab title.
The doctype selects modern HTML document processing. lang="en" identifies the document's language.Character encoding supports text reliably, and viewport metadata lets the page use the device's available width. Content that readers interact with belongs inside body; document metadata belongs inside head.
See how it works
Example 2: headings explain a page's organisation HTML exampleRead the code, then try a change.
Try this example
<main>
<h1>Weekly study plan</h1>
<h2>Monday</h2>
<p>Read the lesson and try its examples.</p>
<h2>Tuesday</h2>
<p>Review mistakes and complete the exercise.</p>
</main> Expected result: one main heading introduces two smaller section headings, each followed by a paragraph. Heading levels describe structure, not a desired font size. Use CSS later to change appearance without changing what a heading means. main identifies the principal content of this document.
Try replacing the second paragraph's text. The rest of the structure should remain unchanged. This is a useful first debugging habit: change one thing, run again and compare the result with your prediction.
See how it works
Example 3: links connect meaningful content HTML exampleRead the code, then try a change.
Try this example
<main>
<h1>Revision checklist</h1>
<p><a href="#practice">Go to the practice section</a></p>
<section id="practice">
<h2>Practice</h2>
<p>Write a page with a heading and two paragraphs.</p>
</section>
</main> Expected result: a link labelled “Go to the practice section” targets the section with id="practice". An attribute adds information to an opening tag. Here, href gives the link's destination and id names its target. This example needs no external network request. An anchor jump can be hard to notice when the entire short page already fits inside the preview.
Spot the mistake
Mistakes, inspection and independent practice <p>Read this<p> is not the explicit closing syntax we intend; write <p>Read this</p>.Browsers recover from many HTML mistakes, so a visible result alone does not prove that the source is well structured. Check matching tags, nesting and attribute quotes as well as appearance. Never paste passwords, tokens or private information into practice examples.
Build a study profile containing one main heading, a short introduction, two section headings and a link to the second section. Start from Example 1's document structure. Keep the source readable with indentation, but remember that indentation is for the person reading the source, not a substitute for elements.
Show hint Put an id on the second section, then use the same name after # in the link's href.
Show solution One valid arrangement is a main element containing h1, an introductory p, a link with href="#goals", a first section, and a second section whose id is "goals". Both sections need descriptive h2 headings. There is no single required choice of personal text.
You are ready to continue when you can explain what belongs in head and body, write explicitly nested elements, and match a local link to its target without copying the examples line for line.
Understand the idea
Read the document, then test your prediction A browser does not infer a page section from the words in a link. It follows the address in href. A fragment beginning with # identifies a location in the current document. Compare that address against the target id character by character. This is different from naming a class for CSS. When a link appears to do nothing, a very short page might already show the target, or the target identifier might not exist. Check the structure before deciding that links are broken.
Understand the idea
Slow down at the important part Understand the idea
Read a page as a visitor, then as its author Start with the visitor's questions. "What page am I on?" needs a meaningful main heading. "What can I find here?" needs short introductory text and sensible section headings. "Where are the goals?" needs a destination and a link that points to it. Each question suggests a piece of document structure. This is a more useful starting point than choosing tags because their default font sizes happen to look attractive.
Now switch to the author's view. The head describes the document to the browser and other tools. The body contains the document's visible content. A title in the head does not replace a heading in the body: open the browser tab and the page itself and notice that they serve different places. They can describe the same subject without being the same element.
Indentation is your drawing of the structure. Follow one opening tag to its closing tag, then check what lies between them. If a paragraph belongs inside a section, the paragraph closes before that section closes. A browser may repair a mistake and still display something plausible. A plausible preview is therefore useful evidence, but not proof that you wrote the structure you intended.
Understand the idea
Give your link a real destination Treat a fragment link as a small contract. The href contains a # followed by an identifier. Somewhere in the same document, one element carries exactly that identifier as its id. The spelling must agree, and the identifier should be unique in the document. Writing a destination label in visible text does not create that connection by itself.
Try renaming only the target id and use the link again. Then restore the match. You have deliberately created a small failure, observed its effect, and repaired its cause. That experiment teaches more than copying a finished link without testing it.
Your turn
Build it, change it, explain it Build the study profile without copying the complete example. Write the document skeleton first and verify that the main heading appears. Add the introduction next. Add two sections, each with an h2, then connect a link to the second section. Check each addition before moving on.
Now review your page for a real reader. Can someone identify the subject without reading every paragraph? Does each section heading describe what follows? Does the link text explain its destination without saying only "click here"? These questions are part of writing HTML, not a decoration step to postpone until CSS.
For an extra check, change the visible heading but leave the title unchanged. Find both in the browser. Then deliberately use the same id twice and explain why that makes the intended destination ambiguous. Restore one unique target before finishing. You do not need JavaScript to perform either investigation.
Understand the idea
What this makes possible You now have something worth styling: a document with a clear purpose. CSS will change its presentation, but it should not have to rescue an unclear reading order. Keep this page as a reference and explain which improvements belong to structure and which belong to appearance.
