billmei/HTMLchecklist.md

## HTMLchecklist.md

      
    Raw
  

              HTMLchecklist.md
            
          
    Checklist for new websites

Once you're done coding your site, go through this checklist to make sure you have a W3C compliant, valid HTML, secure, maximally-compatible, optimal-performance, responsive and mobile-friendly, SEO-friendly website.
SEO


<title> is keyword friendly
<meta name="description" content="" />
<meta name="keywords" content="" />
Favicon
Apple icons for bookmarking
robots.txt
Consider using the HTML5 boilerplate .htaccess file [link]
.htaccess makes www and non-www consistent, so that only one version of the site is loaded
Site contains 404, 403 401, 400, and 500 pages.
Google Analytics
External sites linked via <a> have target="_blank" where appropriate, so that the user isn't completely funneled away from our website
Spell check your content
Thumbnail image, title, and description for Facebook:

If you are content with the default title and description:

<link rel="image_src" href="image.png" />


If you are not, and want to use Open Graph protocol:

Add xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" to <html>
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="image.png" />


Performance


rel-prerender and rel-prefetch http://ipullrank.com/how-i-sped-up-my-site-68-percent-with-one-line-of-code/
HTTP/2 Performance Checklist: https://hpbn.co/optimizing-application-delivery/#optimizing-for-http2

Responsive Design


@media CSS rules for responsive layout on mobile, tablet, and desktop
Image sizes are loaded appropriately for mobile/tablet/desktop to avoid loading unecessarily large files
Large iframes are replaced with images when you have overflow scrolling, or else a user on a touchscreen phone will get stuck on your iframe
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Icons are displayed using icon fonts
Use SVG instead of images whenever possible

Security


See also: https://gist.github.com/kortaggio/04cbf84f3b49e95650ebaa090561f159
See also: https://github.com/shieldfy/API-Security-Checklist
Always use SSL/HTTPS and rotate certs frequently
Use secure cookies, HTTP Only cookies Set-Cookie: xs=984ea98f98a6a19c; secure; HttpOnly
Use HTTP Strict Transport Security (HSTS) Strict-Transport-Security: max-age=2592000; includeSubdomains
XSS Protection X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff to turn off browser guessing mime-type
Make sure your admin and customer service accounts / dashboards are also properly protected and escaped against attacks. "Only internal users can access this" is not a good excuse because it can still load attacker scripts.
Set a Content Security Policy (whitelist for static content and external scripts/files/stylesheets)

Content-Security-Policy:
        default-src 'self';
        img-src 'self' data:;
        script-src: 'self' https://api.example.com


Set Frame Options (prevents clickjacking via invisible frames)

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN


Set Cross-origin domain options (CORS), whitelist which domains requests are allowed to be served

Access-Control-Allow-Origin: https://my.whitelisted.website.com


Subresource integrity (SRI) for externally loaded javascript <script src="https://example.com/example-framework.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>
Set SRI CSP headers:

Content-Security-Policy: require-sri-for script; require-sri-for style;


Isolate user content. Don't put user content into your main domain, e.g. github.io vs github.com and googleusercontent.com vs google.com
Don't store passwords if you can help it. Too many things to watch out for (proper salting, hashing, etc.), plus always assume your users re-use passwords from other websites. https://xkcd.com/792/
Make sure user-facing emails cannot be read by users or submitted to pass domain validation on your own domain, or else someone can use your support@example.com email to gain access to internal services.

Compatibility


<meta charset="utf-8"> must be the first meta-tag right after the <head>.
Apache .htaccess file includes AddDefaultCharset UTF-8 to serve webpages in the correct encoding (Unicode)
normalize.css or reset.css implemented to override default browser settings
Modernizr for old browsers
Fonts work with default settings (the default, pre-installed font libraries) on Windows, iOS, Linux, and Android
Fonts work in every browser
Site structure displays nicely in every major browser
IE <= 6 users are denied access and informed to upgrade their browser (with Chrome Frame as an alternative)
IE <= 9 users are informed to upgrade their browser
High-density displays don't mess up images

Accessibility


Images have alt tags
<html lang="en"> so that Google Translate can help out non-English users
humans.txt
HTML elements have semantic meaning (e.g. <article>, <nav>, <footer> instead of <div>)
aria- tags ARIA
tota11y

Semantics


Site passes the W3C validator
Try to not use <noscript>, if possible
Copyright notice appears somewhere
Legal information (Terms of Service, Privacy Policy) appears where appropriate