HTML Validation Checklist Before Going Live

#beginners #html #tooling #webdev

25 essential checks to run before deploying your website. Covers HTML structure, SEO, accessibility, social sharing, and performance. Use the ValidateHTML validator to automate most of these checks.

HTML Structure

[ ] Valid DOCTYPE declaration - Every page starts with <!DOCTYPE html>. Without it, browsers switch to quirks mode and render inconsistently.
[ ] No unclosed tags - Every opening tag has a matching closing tag. Unclosed divs and spans cascade layout bugs.
[ ] Proper nesting - Tags are nested correctly. No <div><p></div></p> patterns that break document structure.
[ ] No duplicate IDs - Every id attribute is unique on the page. Duplicate IDs break JavaScript selectors and accessibility.
[ ] Valid character encoding - <meta charset="UTF-8"> is the first tag in <head>. Prevents garbled characters on international content.
[ ] Language attribute set - <html lang="en"> is set. Helps screen readers pronounce content correctly and search engines serve the right version.

SEO Essentials

[ ] Unique title tag on every page - Under 60 characters, primary keyword first. The most important on-page SEO element.
[ ] Meta description present - Under 160 characters, compelling, includes target keyword. Affects click-through rate from search results.
[ ] Canonical URL set - <link rel="canonical"> points to the preferred URL. Prevents duplicate content issues.
[ ] Heading hierarchy is correct - One H1 per page, followed by H2s, then H3s. No skipped levels (H1 directly to H3).
[ ] All images have alt text - Descriptive alt attributes on every img tag. Required for accessibility and image SEO.
[ ] robots.txt is valid - No accidental disallow rules blocking important pages. Sitemap URL is declared.
[ ] XML sitemap is submitted - Sitemap.xml lists all important pages and is submitted to Google Search Console.

Social Sharing

[ ] Open Graph tags present - og:title, og:description, og:image, og:url, and og:type are set on every page.
[ ] OG image is 1200x630px - The recommended size for all major platforms. Must be an absolute URL.
[ ] Twitter card tag set - At minimum twitter:card is set to summary_large_image for full-width previews.
[ ] Social preview tested - Check how your page looks when shared on Facebook, LinkedIn, and Twitter before launch.

Accessibility

[ ] All images have alt attributes - Screen readers need alt text to describe images to visually impaired users.
[ ] Form inputs have labels - Every input, select, and textarea has an associated <label> element.
[ ] Color contrast is sufficient - Text has at least 4.5:1 contrast ratio against its background (WCAG AA).
[ ] Page is keyboard navigable - All interactive elements can be reached and activated with keyboard only.

Performance

[ ] No render-blocking resources - CSS and JS in <head> block rendering. Use async/defer for scripts, inline critical CSS.
[ ] Images are optimized - Use WebP/AVIF, proper dimensions, lazy loading on below-fold images.
[ ] Page weight is reasonable - Total page size under 3MB for good mobile performance.
[ ] CSS is valid - Invalid CSS is silently ignored by browsers, causing invisible bugs.

Run all these checks automatically with our free tools: