Resources

Examples and guides

Validate your HTML.
Use HTML5 elements like section, article, header, footer, and nav.* Make sure every image has alt text.
Use the picture element and srcset to provide the image most suitable for the user’s device. You can use Picturefill to enable support for picture in browsers that don’t support it yet.
Think about performance: what are you loading that people won’t see?
Ensure that your HTML document follows correct outline guidelines. See Document Outlines for an excellent introduction.

Use HTML5 input types like search, email, and date.
Don’t use inline CSS (using the style tag or style attribute on HTML elements): use external stylesheets (using the link tag). The exception is for critical CSS: initially sending a small amount of CSS in the head of the document so that page rendering starts as early as possible.
Don’t use inline JS (using a script tag or directly on an HTML element): include external JS files (using the src attribute on a script element).
Place script elements at the bottom of the page, or load them asynchronously by adding the async attribute to the script tag (this means that the loading of the JavaScript files won’t block loading of the page).
Colour and contrast. Ensure sufficient contrast to make site readable for everyone.
Colour blindness test with Colorblind Web Page Filter