Modern Web Development Best Practices: 2026 Checklist

Why modern web standards matter for SEO and AI search

Search engines, AI crawlers and screen readers all read the same thing: your HTML. A page that is fast, well structured and accessible is easier for every one of them to understand. Google uses page experience signals such as Core Web Vitals in ranking, and many AI crawlers do not run JavaScript at all. Good engineering and good visibility are now the same job.

The checklist is written for small teams and solo developers, not big companies with a dedicated performance team.

Semantic HTML

Use the element that describes the content, and fall back to a generic <div> only when nothing fits.

• <header>, <nav>, <main>, <article>, <section>, <aside> and <footer> for page structure.
• One <h1> per page, then <h2> and <h3> in order. Pick heading levels for structure, not for font size.
• <button> for actions and <a href> for navigation. A clickable <div> cannot be reached with the keyboard unless you rebuild what a button already does.
• <details> and <summary> for simple accordions, and <dialog> for modals. Both work in every major browser and handle focus for you.
• <table> with <th scope> and a <caption> for real tabular data, such as a pricing comparison.

Does semantic HTML improve SEO? It is not a direct ranking boost on its own. It helps search engines and AI tools work out which part of the page is the main content, which text is a heading and which links are navigation. That makes it easier for them to pick the right snippet or quote.

Accessibility (WCAG 2.2 AA)

WCAG 2.2 is the current W3C standard, and level AA is what most laws point to, including the European Accessibility Act, which has applied to many online services since June 2025. A short website accessibility checklist:

• Text contrast of at least 4.5:1, or 3:1 for large text. Check it in Chrome DevTools by selecting the text and opening the color picker.
• Alt text on every meaningful image. Use alt="" for purely decorative images so screen readers skip them.
• A visible label for every form field. Placeholder text is not a label.
• Keyboard access: press Tab through the whole page. Every link and control should be reachable, in a sensible order, with a clear focus outline.
• Tap targets of at least 24 by 24 CSS pixels (WCAG 2.2 criterion 2.5.8). We aim for 44 px on mobile.
• A skip link to the main content, and a lang attribute on <html>.
• Respect motion settings with @media (prefers-reduced-motion: reduce).
• ARIA only when HTML cannot do it. The first rule of ARIA is to use a native element instead.

Core Web Vitals in 2026

Google measures three Core Web Vitals from real Chrome users, judged at the 75th percentile of page visits:

INP replaced First Input Delay (FID) in March 2024. If an old guide tells you to optimise FID, it is out of date.

How to make a website faster

1. Serve images as AVIF or WebP, sized for the screen with srcset and sizes.
2. Always set width and height on images and video. It is the easiest CLS fix there is.
3. Lazy-load images below the fold with loading="lazy", but never the main hero image. Give that one fetchpriority="high" instead.
4. Load scripts with defer (or as modules) so they do not block the first render. Put analytics after the page loads.
5. Count your third-party scripts. Chat widgets, tag managers and ad scripts are the most common cause of a poor INP. Remove any you cannot justify.
6. Use system fonts or self-host one font with font-display: swap, and preload only the file you need above the fold.
7. Turn on compression and caching on the server. Brotli or gzip for text, long cache lifetimes for files whose names change when they change (for example styles.css?v=6).
8. Keep the HTML light. A page that ships one big JavaScript bundle to render text is slow on mid-range phones, which are what most visitors use.

Responsive design

• Include <meta name="viewport" content="width=device-width, initial-scale=1">.
• Design mobile first, then add breakpoints where the layout actually breaks, not at device widths.
• Use clamp() for type sizes and spacing so they scale smoothly between screens.
• Use CSS grid and flexbox. Container queries (@container) let a component adapt to the space it has, not just the window size.
• Test at 360 px wide. Nothing should scroll sideways.
• Support dark mode with prefers-color-scheme and CSS custom properties.

Before using a newer CSS or JavaScript feature, check its Baseline status on web.dev or MDN. "Widely available" means it works in all major browsers and is safe to rely on.

Security and privacy basics

• HTTPS everywhere, with HTTP and the non-www (or www) version redirecting to one canonical address.
• Security headers: Strict-Transport-Security, Content-Security-Policy, X-Content-Type-Options: nosniff, Referrer-Policy and Permissions-Policy.
• No inline event handlers such as onclick="". Attach events in JavaScript, which also lets you use a strict Content Security Policy.
• Cookies set with Secure, HttpOnly where possible and a SameSite value.
• Never put API keys or secrets in front-end code or in a public Git repository.
• Collect only the data you need, and say what you collect in a privacy policy that matches what the site actually does.

SEO and AI-readiness

• A unique <title> (about 50 to 60 characters) and meta description on every page.
• A rel="canonical" link, an XML sitemap and a robots.txt that does not block pages you want found.
• Open Graph tags so links look right when shared.
• Structured data (JSON-LD) that matches the visible content: Organization, Article or BlogPosting, Product, FAQPage, BreadcrumbList.
• Important text in the server-rendered HTML, not injected later by JavaScript.
• Answer-first writing with question headings, so search features and AI tools can lift a direct answer. More on this in AEO vs GEO vs SEO.
• Optionally, an llms.txt file that summarizes your key pages.

Website best practices checklist

Copy this into your next pull request or launch ticket.

[ ] One h1, headings in order, semantic landmarks
[ ] Buttons for actions, links for navigation
[ ] Contrast 4.5:1, alt text, labelled form fields
[ ] Full keyboard access with visible focus
[ ] LCP <= 2.5 s, INP <= 200 ms, CLS <= 0.1 on mobile
[ ] Images: AVIF/WebP, width + height, lazy below the fold
[ ] Scripts deferred, third parties justified
[ ] No horizontal scroll at 360 px, dark mode works
[ ] HTTPS, security headers, no inline handlers
[ ] Title, meta description, canonical, sitemap, robots.txt
[ ] JSON-LD matches visible content
[ ] Key text present in View Page Source