Let’s practise the two structures learners use most: navigation tells them where they can go, and headings tell them where they are. We will make both explicit so the page works when visual position, color, or mouse interaction are unavailable.

We are building a page another person can understand without our help. That means the HTML must communicate structure before CSS, JavaScript, analytics, or a component framework enters the picture.

Read each heading as part of an outline, not as a font-size choice. Read each link by itself, not only with the paragraph around it. If either sounds vague, the markup needs a clearer contract.

• Name the purpose before choosing the element.
• Test the keyboard or reading order after writing it.
• Keep visual layout classes separate from document meaning.

A small honest page is more valuable than a large page of copied tags. We will use each example as a decision we can explain, test, and reuse.

Let’s work through this decision slowly. Start with one h1 is useful because it gives the document a truthfully named boundary rather than a visual box with hidden meaning.

First identify the element and its owner. Next predict what a learner can do with it. Finally, change one attribute or heading and explain whether the meaning remains honest. This is how we turn tag knowledge into a dependable engineering habit.

HTML

<main>
  <h1>Semantic HTML</h1>
  <p>We will build a readable document outline.</p>
  <h2>Landmarks</h2>
  <h2>Headings</h2>
</main>

Outline: Semantic HTML → Landmarks, Headings.

Teacher check: do not merely copy the tag. State the learner impact in one sentence before you keep it in a production page.

Let’s work through this decision slowly. Mark the current page is useful because it gives the document a truthfully named boundary rather than a visual box with hidden meaning.

First identify the element and its owner. Next predict what a learner can do with it. Finally, change one attribute or heading and explain whether the meaning remains honest. This is how we turn tag knowledge into a dependable engineering habit.

HTML

<nav aria-label="Course">
  <a href="/html/introduction">Introduction</a>
  <a href="/html/semantic" aria-current="page">Semantic HTML</a>
  <a href="/html/forms">Forms</a>
</nav>

Semantic HTML is announced as the current Course page.

Teacher check: do not merely copy the tag. State the learner impact in one sentence before you keep it in a production page.

Let’s work through this decision slowly. Write links with destinations is useful because it gives the document a truthfully named boundary rather than a visual box with hidden meaning.

First identify the element and its owner. Next predict what a learner can do with it. Finally, change one attribute or heading and explain whether the meaning remains honest. This is how we turn tag knowledge into a dependable engineering habit.

HTML

<p>Continue with <a href="/html/forms">the HTML Forms lesson</a>.</p>
<p><a href="/html/accessibility-checklist">Open the semantic HTML checklist</a></p>

Each link still makes sense when announced without nearby text.

Teacher check: do not merely copy the tag. State the learner impact in one sentence before you keep it in a production page.

Let’s work through this decision slowly. Place h3 beneath its h2 is useful because it gives the document a truthfully named boundary rather than a visual box with hidden meaning.

First identify the element and its owner. Next predict what a learner can do with it. Finally, change one attribute or heading and explain whether the meaning remains honest. This is how we turn tag knowledge into a dependable engineering habit.

HTML

<section>
  <h2>Navigation</h2>
  <h3>Primary navigation</h3><p>Links between major areas.</p>
  <h3>Local navigation</h3><p>Links inside this lesson.</p>
</section>

Navigation contains two sibling subtopics.

Teacher check: do not merely copy the tag. State the learner impact in one sentence before you keep it in a production page.

Let’s work through this decision slowly. Focus the skip-link target is useful because it gives the document a truthfully named boundary rather than a visual box with hidden meaning.

First identify the element and its owner. Next predict what a learner can do with it. Finally, change one attribute or heading and explain whether the meaning remains honest. This is how we turn tag knowledge into a dependable engineering habit.

HTML

<a href="#lesson">Skip to lesson</a>
<nav aria-label="Primary">...</nav>
<main id="lesson" tabindex="-1"><h1>Semantic HTML</h1><p>Start here.</p></main>

Activating Skip to lesson moves focus to the lesson region.

Teacher check: do not merely copy the tag. State the learner impact in one sentence before you keep it in a production page.

Now review the page as a learner would. Can you reach main quickly? Does every heading describe a real topic? Does every control have the native behavior its label promises?

• Read the heading outline without using font size.
• Tab from the first interactive element into the lesson.
• Replace one vague div, link, or heading with the element that states the real intent.

Semantic HTML is not extra decoration for accessibility. It is the clearest explanation of the document we are already trying to build.

Start by naming the value the next line depends on. This keeps the lesson input explicit before we apply a transformation or call an external boundary. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-7">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-7" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-7">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Replace the sample value with one from your own notes, predict the result, and then run it.

A small guard makes the allowed and rejected path visible. We want a caller to receive an intentional result instead of discovering an unexplained failure later. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-8">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-8" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-8">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Try an empty value as well as the normal value and describe why the two outcomes differ.

This step returns a value instead of mixing the rule with display or storage work. That separation gives us a small unit we can run, test, and reuse. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-9">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-9" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-9">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Call the same rule twice with different inputs and confirm that each result depends only on its input.

Use a named branch where the business rule changes. A future reader should be able to point at the condition and state the result for both sides. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-10">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-10" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-10">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Change the boundary value by one and explain exactly which branch becomes active.

Collections become safer when we can see which value is read, which value is derived, and whether the original collection remains owned by the caller. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-11">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-11" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-11">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Add one more item and predict the derived result before executing the code.

A named outcome is easier to test than an implied side effect. We can now distinguish a successful path from a rejected path without guessing from console noise. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-12">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-12" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-12">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Rename the outcome in your own words while preserving the same success and failure rule.

Work through one value at a time. The point is not to memorize syntax; it is to see how the accumulator or output changes after each repeatable step. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-13">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-13" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-13">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Use a shorter collection first, then add one value and trace the extra iteration aloud.

The core rule prepares a value, while the outer line decides how to show it. That keeps the result usable by a UI, test, API, or command-line caller. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-14">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-14" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-14">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Change only the display text and verify that the underlying rule and result stay unchanged.

A useful example includes the nearest boundary, not only the happy path. We are making the behavior inspectable before a real caller relies on it. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-15">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-15" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-15">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Try the lowest supported value and then one value just outside the accepted range.

A compact assertion turns the lesson into a repeatable promise. It helps us catch a changed rule before a larger program hides the source of the mistake. We are applying that habit while revisiting HTML Semantic HTML: Navigation and Heading Structure.

Keep the example small enough to trace. First predict the normal result; then change one input and explain the boundary result in your own words.

HTML

<label for="lesson-16">HTML Semantic HTML Navigation and Heading Structure</label>
<input id="lesson-16" name="lesson" value="HTML Semantic HTML Navigation and Heading Structure" />
<p id="result-16">Ready to practice</p>

A labelled input and a readable result are rendered.

Try next: Deliberately change the expected value once, observe the failed check, and then restore the correct contract.

Open one page you already own and sketch its header, navigation, main task, supporting material, and footer. Then compare that sketch with its source. Each mismatch gives you one focused improvement to make.

When you can explain why an element exists, who owns it, and what a learner experiences through it, you are designing a dependable document instead of copying HTML.