Validate, Debug & Review

After this lesson, you can find markup errors, repair important relationships, and record your project review.

BEGIN WITH A QUESTION

Understanding begins with a question.

‘Looks good’ is one observation, rather than proof that everything is correct. Now consider a reader using a keyboard, an image that fails to load, or many open tabs.

Find markup errors, repair important relationships, and record your project review.

UNDERSTAND THE CONCEPT

Distinguish preview from checking

Browsers often repair incorrect markup while building a page. Validators such as Nu HTML Checker help find HTML conformance issues. Lucia’s checker is narrower: it checks exercise goals, rather than every HTML rule or accessibility quality.

Read and use your work

Check both pages’ title and lang, link destinations, heading order, image alt, and label relationships. Try Tab, Shift+Tab, and Enter in files opened locally. Read the alternative text in place of the image: does it still convey the important information?

Record concrete changes

Write down the issue found, the change made, and anything still needing review. The Final Challenge combines automated structural grading with a self-review rubric. The result is labeled self-assessed, rather than a verified certificate.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<!-- Sample review note: the email label initially pointed to the wrong id. -->
<label for="email">Email (required)</label>
<input id="email" name="email" type="email" required>
<p>Improvement: for and id now match, connecting the label.</p>

BROWSER RESULT

The note describes a specific finding and change, rather than simply ‘all done’. A validator helps with structure; people still assess content and experience.

COMMON MISTAKES

<label for="email">Email</label>
<input id="alamat" type="text">

There are two separate issues: the label is disconnected and the input type is not email. Fix both, rather than just the visible text.

TRY TOGETHER

Practice clarifies understanding.

01 The preview looks normal, but a validator reports nonconforming markup. What comes next?

Ignore it because the page displaysRead the finding, fix the source, and observe againAdd color to hide the issue

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Repair a page before the final project

Fix the structure and metadata, change h4 to a logical subheading, connect the email label to a required email input, and add a paragraph beginning ‘Improvement:’ describing at least one finding.

<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
  <h1>Learning Journal</h1>
  <h4>Feedback</h4>
  <form><label for="email">Email</label><input id="alamat" name="email" type="text"></form>
</body>
</html>

index.htmlHTMLLn 1, Col 19 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Preview, checkers, and human review provide different information.
Look for issues in structure, navigation, labels, and media alternatives.
Record concrete improvements; self-assessment is not certification.

DebuggingAccessibility

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML validation °Accessibility °Head °

Library: Three languages behind one page ↗

Start the Final Challenge →