Goal
You’ll practice auditing existing HTML for common real-world mistakes, applying the diagnostic thinking from across this entire course to spot problems in code you didn’t write yourself.
Learn
Auditing existing HTML is a genuinely different skill from writing new HTML — it requires actively looking for specific problem patterns, not just reading code and assuming it’s fine because it renders correctly visually. A structured mental checklist, pulling together this whole course:
- Heading structure (Part 1.3): Is there exactly one h1? Do headings descend logically without skipping levels?
- Images (Part 2.2): Does every meaningful image have real alt text? Is alt=”” used correctly for decorative images, not omitted entirely?
- Semantic regions (Part 2.3): Are header/nav/main/article/aside/footer used where they genuinely apply, or is everything divs?
- Forms (Part 3.1): Is every input properly connected to a label via matching for/id, not just visual proximity?
- Links (Part 1.4): Are internal links using relative paths appropriately, rather than unnecessarily hardcoded absolute URLs?
- Head metadata (Part 4.4): Is viewport present? Is there a genuine, specific meta description, not a generic placeholder or nothing at all?
This kind of audit reveals that a page can render perfectly correctly and look completely fine visually, while still containing several genuine structural and accessibility problems invisible to a quick visual check — which is exactly why deliberate auditing, not just glancing at the rendered result, is a genuinely necessary skill, not an optional extra step.
Decision Task
You’re auditing a page and find: <div class=”header”>, <div class=”nav”>, and three images with no alt attribute at all. Before reading on: name the two distinct categories of problems present here, referencing specific earlier lessons.
Show Answer
First: missing semantic elements (Part 2.3) — using div with class names instead of genuine <header> and <nav> elements, losing the built-in screen reader navigation benefits those provide. Second: missing alt attributes entirely (Part 2.2) — not even alt=””, meaning screen readers may read filenames aloud instead of either genuine descriptions or a correct “skip this” signal.
Common Mistake
Auditing a page purely by how it looks when rendered in a browser, assuming visual correctness means structural correctness. As this whole lesson demonstrates, a page can look completely fine while still using non-semantic divs everywhere, missing alt text, disconnected form labels, and missing meta tags — none of which a quick visual glance would reveal at all.
Practice Questions
1. An audited page has <input type=”text”> fields with no visible label element anywhere nearby. What specific problem does this represent, from Part 3.1?
Show Answer
The inputs likely have no accessible label at all, meaning screen readers announce them with no context about what data they collect — a genuine accessibility failure, not just a minor omission.
2. A page has three <h1> elements, one for each major section. What structural problem does this represent, from Part 1.3?
Show Answer
Multiple h1 elements break the page’s single clear main-topic signal and logical heading outline, which both screen readers and search engines rely on.
3. An audited page has no meta description tag at all in its head. What real outcome, from Part 4.4, does this risk?
Show Answer
Search engines will auto-generate a snippet instead, often awkwardly cut off or unrepresentative, losing control over how the page appears in search results.
4. True or False: a page rendering correctly and looking visually polished is sufficient evidence that its underlying HTML structure is also correct.
Show Answer
False — this is the core lesson here: visual correctness and structural/semantic correctness are genuinely separate things, and a page can have serious underlying problems invisible to a quick visual check.
5. List the six audit checklist categories from this lesson, in your own words.
Show Answer
Heading structure, image alt text, semantic regions, form label connections, link path choices, and head metadata (viewport/meta description).
Try It Yourself
Using this lesson’s checklist, audit (in your head or on paper) a real website you use often — pick one page and see if you can spot at least one likely issue from the checklist, just by viewing the page’s content and structure as a user (you don’t need to view source code).
This is an open, ungraded reflection exercise — there is no single correct answer to reveal.
Quick Check
1. Why is auditing HTML a genuinely different skill from writing new HTML?
Show Answer
It requires actively looking for specific known problem patterns, not just reading/writing code and assuming correctness from visual rendering alone.
2. What heading-related checks does the audit checklist include?
Show Answer
Exactly one h1 present, and headings descending logically without skipping levels.
3. What image-related checks does the audit checklist include?
Show Answer
Meaningful images having real alt text, and decorative images correctly using alt=”” rather than omitting alt entirely.
4. Can a page look completely fine visually while still having significant underlying HTML problems?
Show Answer
Yes — this is the core point of this lesson; visual correctness doesn’t guarantee structural or accessibility correctness.
5. What form-related check does the audit checklist include?
Show Answer
Whether every input is properly connected to a label via matching for/id, not just visual proximity.