The Professional HTML Checklist: A Repeatable Review Process

The first pass verifies the structural foundation everything else assumes is correct: exactly one <main>, a heading hierarchy with no skipped levels, the correct landmark elements (header, nav, aside, footer) used deliberately rather than generic <div>s, and distinct aria-label values on any repeated landmark instances.

The second pass goes beyond structure into verified accessibility: appropriate alt text on every meaningful image, a real associated <label> for every form control, WCAG AA color contrast at minimum, and — critically — *actual* keyboard-only navigation testing and, for complex widgets like dialogs and custom disclosure patterns, real screen reader testing, rather than assuming correctness from how the markup reads.

The performance pass checks: appropriate image formats and responsive srcset/sizes with loading="lazy" correctly applied below the fold, non-critical scripts marked defer or async, preload/preconnect hints used deliberately for genuinely critical resources only (not scattered indiscriminately, which can actually compete with and delay the resources that matter most), and Core Web Vitals actually measured rather than assumed acceptable.

The SEO and metadata pass verifies a unique, accurate <title> and meta description, a correctly-set canonical URL, complete Open Graph and Twitter Card tags, appropriate JSON-LD structured data for the content type, and — the 2026-era addition from earlier in this module — a deliberate, intentional AI-crawler policy configured in robots.txt, rather than an unconfigured default left to each crawler's own behavior.

The final pass ties directly back to HTML-First Development: for any modal, menu, dropdown, or accordion need, was native <dialog>, the Popover API, or <details name> actually considered before reaching for a JavaScript library or custom implementation? And does the page's core functionality genuinely survive a JavaScript load failure — the resilience property a native-HTML-first baseline provides, and the concrete test for whether that philosophy was actually applied, not just discussed.

Finally, a basic but easy-to-skip check: does the HTML actually validate through a validator with no errors, and is the browser console free of errors and warnings on a normal page load? Both are quick, mechanical checks that catch a surprising number of subtle bugs before they reach production.

The Pass You Run Before Shipping. Knowing every individual feature this course has covered is different from reliably applying the right ones under real deadline pressure. This lesson consolidates everything into the concrete checklist a senior engineer actually runs before calling a page done.

Pass One: Semantic Structure And Landmarks. Before anything else: does the page have exactly one <main>, correctly-nested heading levels with no skipped levels, the right landmark elements for header/nav/aside/footer, and semantic elements (article, section, time) used for genuine meaning rather than as generic div replacements?

The Semantic Structure Pass. What should you check regarding heading levels during a semantic structure review?

• →That heading levels don't skip — an h1 followed directly by an h3 with no h2, for instance
• →That every heading renders at the same visual font size
• →Only the total count of headings on the page

Pass Two: Accessibility Beyond Structure. Beyond landmarks: does every image have appropriate alt text, every form control a real associated <label>, every custom interactive pattern the correct ARIA role/state, sufficient color contrast, and a verified, logical keyboard tab order with visible focus indicators throughout?

The Accessibility Pass. What's the most reliable way to verify a page's keyboard navigation and focus order, rather than assuming it's correct from the markup alone?

• →Actually tabbing through the page using only the keyboard and checking focus order and visibility
• →Reading the HTML source code alone, without interacting with the rendered page
• →Trusting that the framework used automatically guarantees correct keyboard behavior

Pass Three: Performance And Loading Strategy. Are images using appropriate formats and responsive srcset/sizes with correct loading="lazy" below the fold, is critical CSS not render-blocking unnecessarily, are non-critical scripts deferred or async, and are preload/preconnect hints used deliberately for genuinely critical resources rather than scattered indiscriminately?

The Performance Pass. How should preload/preconnect resource hints be applied during a performance review?

• →Deliberately, only for resources genuinely critical to the page's core rendering path
• →Applied broadly to every resource on the page for maximum coverage
• →They should never be used; they always hurt performance

Pass Four: SEO And Metadata Completeness. Does the page have a unique, accurate title and meta description, correct canonical URL, complete Open Graph and Twitter Card tags for social sharing, appropriate structured data (JSON-LD) for its content type, and — per the AI/LLMs lesson — a sensible position in any llms.txt and AI-crawler robots.txt policy?

The SEO/Metadata Pass. Besides traditional meta tags, what newer consideration from this course's AI/LLMs lesson belongs in a complete metadata review?

• →Whether AI crawler access in robots.txt reflects a deliberate, intentional policy choice
• →The page's web font loading strategy
• →Color contrast ratios for body text

Pass Five: Modern Feature Opportunities And Resilience. Finally: does this page reach for native <dialog>/popover/details-name before a JS library for any modal, menu, or accordion need; does critical functionality degrade gracefully if JS fails to load; and is the HTML valid (run through a validator) with no leftover console errors?

The Final Pass. What should be verified regarding JavaScript failure as part of this final checklist pass?

• →That the page's core functionality still works even if JavaScript fails to load entirely
• →Only that JavaScript executes as fast as theoretically possible
• →Nothing — JS failure resilience isn't a meaningful review criterion

The Professional HTML Checklist Mastered. You now have a concrete, repeatable five-pass review checklist consolidating everything this course has covered — the structured process a senior engineer actually runs before shipping HTML, rather than a vague sense that a page 'looks done.'

Pass The Basic Production Checklist. A production-ready page always declares lang, charset, and a title.