Semantic Page Structure

MODULE 01 · LESSON 1.1

Use landmarks and heading hierarchy so browsers, search engines and assistive technology understand a page.

Practice-firstBeginner-friendlyProduction-aware

The production problem this solves

A developer can know the syntax behind Semantic Page Structure and still make the wrong production decision. This lesson closes that gap. This lesson sits at the browser boundary, where structure, state and user input become observable behavior.

Here, that decision supports a specific checkpoint: Publish an accessible personal profile and CourseFlow registration form. A reviewable result should include a browser inspection, keyboard test and a recorded expected-versus-actual result rather than a claim that the feature simply works.

Semantic Page Structure workflowA four-step visual showing landmarks, heading order, links versus buttons, document outline.Semantic Page Structure workflow1Landmarks2Heading Order3Links VersusButtons4Document Outline

Semantic Page Structure workflow

  1. 1Landmarks
  2. 2Heading Order
  3. 3Links Versus Buttons
  4. 4Document Outline
Semantic Page Structure workflow: a practical sequence used in this lesson.

A practical model for semantic page structure

Use landmarks and heading hierarchy so browsers, search engines and assistive technology understand a page. The useful unit of understanding is the boundary: who owns the decision, which input crosses it, what result is visible and how a failure is reported.

  • Landmarks: Decide what belongs in code, configuration, data or documentation and explain why.
  • Heading Order: Name its input, observable result and most likely failure in this lesson.
  • Links Versus Buttons: Locate this responsibility in CourseFlow and defend the boundary you chose.
  • Document Outline: Implement one behavior that another learner can reproduce without reading your mind.

Explain each moving part

Before running the sample, predict how changing heading order will alter the result. The prediction is part of the exercise.

HTML
<main>
  <article>
    <h1>CourseFlow</h1>
    <p>Learn by shipping.</p>
  </article>
</main>
Trace cause before effect

Follow heading order from input to output. If the result surprises you, stop at the first boundary where reality differs from your prediction.

Trace the implementation boundary

  1. 1
    Landmarks

    Run the focused example and save the output, trace, query or screenshot that confirms the result.

  2. 2
    Heading Order

    Break one assumption on purpose, make recovery clear and record the trade-off you accepted.

  3. 3
    Links Versus Buttons

    Name the caller and the owner of this behavior before changing the implementation.

  4. 4
    Document Outline

    Compare expected and actual output before editing; the difference tells you where to investigate.

Mistakes that create hidden coupling

  • Treating landmarks as vocabulary instead of defining the behavior it must produce.
  • Testing the expected path while ignoring an empty, invalid, repeated or unauthorized case around heading order.
  • Allowing links versus buttons to cross a boundary without an explicit contract or useful error.
  • Changing several layers before capturing the first piece of evidence, which makes the original cause harder to see.

Debug from the boundary inward

  1. Reduce the problem to the smallest failing Semantic Page Structure case.
  2. Capture the actual input and output at the landmarks boundary.
  3. Read the first relevant error, request, trace or query rather than the loudest downstream symptom.
  4. Test one explanation for the failure in heading order; avoid changing two variables together.
  5. Keep a regression check that would expose the same defect if it returned.

Security decision

Keep untrusted content separate from executable markup or script, preserve native browser protections, and validate again when data reaches the server.

Performance decision

Use DevTools to measure the rendered result. Prefer semantic markup and the smallest necessary CSS or JavaScript before adding a dependency.

PRACTICE

Build something you can inspect

Rebuild a div-heavy profile using header, nav, main, article, section and footer.

Stretch challenge

Introduce a realistic failure involving landmarks, keep recovery understandable, and document why your response is proportionate.

Definition of done

  • The behavior around landmarks works with realistic input.
  • A failure involving heading order is handled clearly and without leaking sensitive detail.
  • The implementation remains keyboard-usable when it produces an interface.
  • Your evidence directly supports the claim made in the exercise.
  • The README records the important trade-off without pretending the solution is universal.

Check your reasoning

When should an action be a button instead of a link?

Answer by naming the expected landmarks behavior, the layer responsible for it and the evidence that would confirm your explanation.

Where would you investigate the first failure?

Start where heading order crosses a boundary. Compare the actual input and output there before following downstream symptoms.

What would make this work reviewable?

Show the focused change, repeatable steps, the result of your check and one honest trade-off connected to links versus buttons.

What to carry into the next lesson

  • Use landmarks and heading hierarchy so browsers, search engines and assistive technology understand a page.
  • Keep landmarks visible at the boundary where it can be tested.
  • Use evidence from heading order before widening the implementation.

References and related reading

Progress is stored only in this browser.

Share this page

Share this page with the people who will use it next.

X Facebook LinkedIn WhatsApp Email

Discussion

No comments yet. Add the first useful question or observation.