Validation, Debugging & Next Steps

This final chapter turns everything you've learned into a repeatable workflow: check your markup, find bugs fast, apply a performance checklist, and know exactly what to learn after HTML.

Validate your HTML

The W3C Markup Validator (validator.w3.org) is the authority. Paste a URL or your source and it reports every error with a line number.

<!-- Common validator errors you'll see -->

<!-- 1. Stray closing tag -->
<p>Hello</div>                     ✗ "Stray closing tag"

<!-- 2. Duplicate id -->
<div id="main">...</div>
<div id="main">...</div>           ✗ "Duplicate ID"

<!-- 3. Missing alt -->
<img src="cat.jpg">                 ✗ "Element img is missing required attribute alt"

<!-- 4. Unclosed element -->
<section>
  <p>content                        ✗ "No matching end tag"

<!-- 5. Bad nesting -->
<p><strong>text</p></strong>       ✗ "Stray tags"

Aim for zero errors (warnings are often acceptable). Valid markup = the browser and screen readers interpret exactly what you intended.

Debug with browser DevTools

1. Elements panel — inspect the "repaired" DOM. If your markup looks different here than in your file, you have a nesting bug.
2. Console — shows broken references and 404s.
3. Network panel — find slow or missing images/fonts (status 404/500).
4. Lighthouse tab — one-click audit of Performance, Accessibility, Best Practices, and SEO with concrete fix instructions.
5. Device toolbar — check responsive behaviour at 360 px, 768 px, and 1440 px.

The pre-publish checklist

• ☐ Valid HTML with zero errors (W3C Validator)
• ☐ Unique <title> (≤60 chars) and meta description (120–160 chars)
• ☐ One <h1>; heading levels never skip
• ☐ Every image has meaningful alt + width/height
• ☐ lang, charset, and viewport declared
• ☐ All forms: labelled inputs, named fields, native validation attributes
• ☐ Full keyboard walkthrough: skip link → Tab through everything → activate
• ☐ Colour contrast ≥ 4.5:1; no information carried by colour alone
• ☐ Internal links point to live, relevant pages with descriptive anchors
• ☐ Page loads under ~2.5 s LCP on a throttled 4G connection (Lighthouse)
• ☐ Tested on a real phone, not just a desktop window

Common mistakes to retire permanently

• Layout tables → use semantic layout elements.
• div-itis → pick the semantic element first; div only as a last resort.
• Inline styles everywhere → external CSS (your next course).
• Placeholder-as-label → real <label> always.
• Unquoted attribute values → quote everything.
• Skipping alt text → descriptive or explicitly empty.

Where to go after HTML

1. CSS — everything visual: layout (Flexbox/Grid), typography, responsive design, animations.
2. JavaScript — interactivity: DOM manipulation, events, fetch/APIs.
3. Version control (Git) — track changes and collaborate.
4. A frontend framework (React/Vue/Laravel Blade) — once vanilla HTML/CSS/JS feels natural.
5. Build real projects — portfolio site, recipe app, landing page for a local business. Projects teach more than tutorials alone.

Real-life use case: putting it all together

Build a personal portfolio with one semantic page per section: skip link, header+nav, main with an <article> per project (each with figure/figcaption, descriptive alt, and an <h2>), a contact <form> with labelled validated inputs, a footer with tel:/mailto: links, a unique title + description per page, canonical tags, and internal links. That single project exercises 90% of this course.

Congratulations

You've completed the HTML for Beginners series — document structure, elements, attributes, text, links, images, lists, tables, forms, semantics, media, entities, iframes, accessibility, SEO, and validation. Practice each chapter's examples by retyping them (not copy-pasting), then build the portfolio above. Return anytime to the course overview, or keep your streak going with our other tutorials.